Web quay thưởng Honda Bảo Cường

MÔ TẢ DỰ ÁN – QUAY THƯỞNG BẢO CƯỜNG Website: https://quaythuongbaocuong.com/giaithuong 1. Giới thiệu dự án Hệ thống “Chương trình Quay Thưởng Bảo Cường” là website mini-game dành cho khách hàng của chuỗi cửa hàng xe máy Bảo Cường. Mục tiêu là tạo trải nghiệm tương tác trực tiếp, minh bạch và hấp dẫn cho khách hàng khi tham gia quay thưởng nhận quà. Website được thiết kế theo phong cách rực rỡ – lễ hội – phù hợp các chương trình marketing, với hiệu ứng pháo hoa, confetti, chuyển động mượt và giao diện dễ sử dụng trên mọi thiết bị. 2. Công nghệ sử dụng Frontend: React.js + Vite + TypeScript Animation: CSS, React-motion, hiệu ứng quay vật lý Backend API: Node.js (Express) Database: MySQL Hosting & Domain: Firebase Hosting + Domain quaythuongbaocuong.com Realtime logic: Đồng bộ kết quả quay từ API → Wheel UI Sound effect: Sfx tăng – giảm tốc khi quay, tạo cảm giác chân thực 3. Tính năng đã triển khai Vòng quay trúng thưởng Hiệu ứng quay vật lý mượt, tốc độ tăng – giảm tự nhiên Chọn góc quay ngẫu nhiên mỗi lần Âm thanh tương tác theo tốc độ quay (nhanh → chậm) Kết quả dừng đúng theo index trả về từ API backend Danh sách giải thưởng Hiển thị danh sách quà: dầu nhớt, móc khóa, áo mưa, bảo dưỡng, phụ kiện xe… Hình ảnh quà dạng THẬT được thiết kế giống 100% mẫu xe & phụ kiện thực tế Hình nền – giao diện tuỳ chỉnh Hình nền bố cục theo chủ đề Honda: Vision, SH, Air Blade, Wave Màu sắc sinh động phù hợp chiến dịch marketing Bảo mật & minh bạch Vòng quay không chạy client-side random, mà dùng backend /spin API UI vòng quay xoay chính xác tới vị trí giải thưởng server đã chọn → chống gian lận Quản lý kết quả quay Lưu lịch sử quay theo ngày, theo khách hàng Chống spam / quay liên tục Tự động đối soát số lượng quà còn lại UI Responsive Tối ưu hiển thị cho điện thoại của khách hàng Tương thích mọi trình duyệt 4. Phần việc tôi đảm nhiệm Thiết kế UI/UX trang quay thưởng Phát triển toàn bộ front-end React/Vite Xây dựng animation vòng quay + âm thanh tương tác Xây dựng backend Node.js (Express) Thiết kế cấu trúc MySQL cho bảng giao dịch / lượt quay / giải thưởng Tạo API /spin trả index để đồng bộ với bánh xe Tích hợp hình ảnh xe Honda thật theo yêu cầu thương hiệu Thiết lập domain, hosting, tối ưu build, SEO cơ bản Kiểm thử & triển khai production 5. Kết quả Website chạy ổn định, xử lý hàng nghìn lượt quay mỗi ngày Tốc độ tải nhanh, UI đẹp, mượt, hiệu ứng chuyên nghiệp Tăng tương tác khách hàng và hiệu quả marketing cho hệ thống cửa hàng xe máy Được khách hàng đánh giá cao về tính minh bạch, đẹp mắt và dễ sử dụng