Bài toán
Tại hội nghị khách hàng, ban tổ chức cần thu thập nhanh ý kiến của khách mời (chủ nhà thuốc) ngay tại chỗ, có số liệu tổng hợp theo ngày để báo cáo, đồng thời tổ chức phần quay số may mắn trên màn hình lớn một cách sinh động và minh bạch.
Chức năng chính
- Form đăng ký thông tin khách mời: tên nhà thuốc, tên khách hàng, số điện thoại (kiểm tra 10 số), email.
- Bộ 6 câu hỏi khảo sát dạng chạm-chọn, hiển thị từng câu một với hiệu ứng chuyển cảnh, tự chuyển câu sau khi chọn; câu trả lời được lưu cùng thời điểm gửi.
- Màn hình cảm ơn sau khi hoàn thành khảo sát.
- Trang kết quả cho ban tổ chức, bảo vệ bằng mã truy cập (cookie httpOnly); lọc theo ngày/tháng, bảng tô màu theo mức độ đánh giá, xuất file Excel.
- Màn hình quay số trúng thưởng 1280x720 (tự co giãn theo màn hình trình chiếu): hiệu ứng quay từng chữ số, âm thanh, bảng giải Nhất/Nhì/Ba/Tư có thể chỉnh số lượng giải, không trùng số đã trúng, cho phép huỷ một kết quả và quay lại.
Công nghệ
- Next.js 13 (App Router, Server Actions), React 18, TypeScript, SCSS.
- MongoDB (driver chính thức) lưu phiếu khảo sát.
- react-animated-numbers cho hiệu ứng quay số; react-export-table-to-excel cho xuất Excel.
- Đóng gói Docker, build tự động qua GitLab CI và đẩy image lên registry.
Điểm ưu việt
- Một sản phẩm gọn nhẹ phục vụ trọn vòng đời sự kiện: thu thập ý kiến → báo cáo → quay thưởng.
- Giao diện theo nhận diện thương hiệu của sự kiện, thao tác chạm đơn giản, phù hợp khách mời dùng điện thoại hoặc kiosk.
- Dữ liệu lưu tức thời qua Server Actions, ban tổ chức xem và tải báo cáo Excel ngay trong ngày.
- Quay số có cơ chế chống trùng và điều chỉnh cơ cấu giải trực tiếp trên màn hình, thuận tiện cho MC khi điều phối.
