Bài toán
Mỗi cuối năm học, nhà trường cần tổng kết hoạt động để gửi phụ huynh, học sinh và đối tác. Báo cáo dạng PDF hay slide khó đọc trên điện thoại và không lan toả tốt. Trường muốn một trang báo cáo trực tuyến, kể lại “hành trình trải nghiệm” của năm học bằng hình ảnh, hiệu ứng và số liệu, chia sẻ được bằng một đường link.
Chức năng chính
Website là một trang dài (one-page) có menu neo tới từng phần:
- Hành trình trải nghiệm: màn hình mở đầu có video “Báo cáo hoạt động năm học 2020–2021”.
- Hoạt động đào tạo: chia tab theo tổ Tiếng Anh, Xã hội, Tự nhiên. Mỗi tab có ảnh và bài viết hoạt động.
- Hoạt động phát triển cá nhân: dòng thời gian (timeline) các chương trình kèm ảnh.
- Hoạt động và sự kiện học sinh: băng chuyền (carousel) sự kiện, hội thảo, câu lạc bộ.
- Đời sống nội trú: ảnh và chia sẻ của học sinh nội trú.
- Giải thưởng nổi bật: băng chuyền giấy khen và giải thưởng.
- Thống kê: khối số liệu tổng kết của nhà trường.
- Chân trang: thông tin liên hệ của trường.
Nội dung (bài, ảnh, danh sách giải thưởng) để trong các file dữ liệu data/*.js, tách khỏi giao diện. Năm sau chỉ cần thay dữ liệu và ảnh là có báo cáo mới.
Công nghệ
Next.js 10 (Pages Router) xuất trang tĩnh (next export) dưới đường dẫn /bchd, React 17, AOS (hiệu ứng khi cuộn), react-responsive-carousel, CSS thuần.
Điểm ưu việt
- Trang tĩnh hoàn toàn: không cần máy chủ ứng dụng hay cơ sở dữ liệu, đặt được trên bất kỳ web server hoặc CDN nào. Trang tải nhanh, gần như không có bề mặt tấn công.
- Kể chuyện bằng hình ảnh: hiệu ứng khi cuộn, băng chuyền, timeline và số liệu giúp bản báo cáo khô khan thành trải nghiệm đọc hấp dẫn, dùng tốt cho truyền thông tuyển sinh.
- Dễ tái sử dụng: dữ liệu tách khỏi giao diện nên dùng được cho các năm học tiếp theo.
- Gắn vào website chính của trường: chạy dưới đường dẫn con /bchd của tên miền nhà trường.
