Loại sản phẩm: Web app mobile-first: mini game nhận quà + trang quản trị

Bài toán

Thương hiệu cần một hoạt động tương tác ngắn, vui, gắn với chất Anh quốc của Olivia Burton để thu hút khách tham gia trên điện thoại (ví dụ tại điểm bán/sự kiện), thu thập số điện thoại khách và phát quà theo cơ cấu, số lượng do nhãn hàng kiểm soát.

Chức năng chính

  • Nhập số điện thoại để bắt đầu (tự định dạng 09xx xxx xxx); ghi nhận thiết bị/trình duyệt của người chơi.
  • Game "chọn 3 ảnh tương ứng với nước Anh": hiển thị ngẫu nhiên 6 ảnh (3 ảnh nước Anh, 3 ảnh nơi khác), chấm điểm và tô viền đúng/sai; đúng ít nhất 1 ảnh thì được đi tiếp.
  • Chọn 1 trong 9 số may mắn: phần thưởng được phân bổ theo tỉ lệ xuất hiện cấu hình cho từng quà, chỉ dùng các quà còn số lượng; kết quả hiển thị kèm hình quà và lưu vào hồ sơ người chơi (giao dịch Serializable để trừ tồn kho chính xác).
  • Nhạc nền, hiệu ứng chuyển động, khung giao diện "phong thư" theo nhận diện thương hiệu.
  • Trang quản trị (bảo vệ bằng passcode): lịch sử người chơi có phân trang và tìm theo số điện thoại, hiển thị quà đã nhận, thiết bị; quản lý phần thưởng (tên, số lượng, tỉ lệ, giới hạn/tuần, hình ảnh), thêm/xoá quà, xem số lượng còn lại.

Công nghệ

  • Next.js 13 (App Router, Server Actions), React 18, TypeScript.
  • Prisma ORM + MySQL (migration quản lý schema User/Reward).
  • ua-parser-js đọc thông tin thiết bị; next/font (Arsenal, hỗ trợ tiếng Việt).
  • Docker + GitLab CI; ảnh quà tặng phục vụ qua file host riêng.

Điểm ưu việt

  • Trải nghiệm ngắn gọn 3 bước (nhập SĐT → chơi game → bốc số), tối ưu cho điện thoại, dễ tham gia tại chỗ.
  • Nhãn hàng tự điều chỉnh cơ cấu giải và tỉ lệ trúng ngay trên trang quản trị, không cần sửa code.
  • Trừ tồn kho quà trong giao dịch an toàn, tránh phát vượt số lượng; quà hết thì tự ẩn khỏi vòng quay.
  • Thu thập dữ liệu khách tham gia (SĐT, quà, thiết bị) phục vụ chăm sóc sau chương trình.