Secret Menu

Tổng quan dự án (Project Overview) SecretMenu là một ứng dụng web (mobile-first) giúp người dùng giải quyết câu hỏi "Hôm nay ăn gì?". Ứng dụng cung cấp tính năng Randomizer, quản lý kho món ăn cá nhân và xây dựng hệ thống dữ liệu ẩm thực dựa trên đóng góp của cộng đồng. Hệ thống hỗ trợ phân vùng dữ liệu theo 3 khu vực độc lập: TP. Hồ Chí Minh, Vũng Tàu và Đà Lạt.

Một số hình ảnh

Vai trò & Công việc đảm nhận (Key Responsibilities) 

Trong dự án này, tôi đóng vai trò là Fullstack Developer, chịu trách nhiệm toàn bộ từ khâu thiết kế kiến trúc, phát triển tính năng đến triển khai hệ thống:

• Phát triển Ứng dụng & Giao diện (Frontend):

  • Xây dựng giao diện hướng thiết bị di động (mobile-first) với Next.js 16 (App Router), React 19 và Tailwind CSS 4.

  • Tích hợp hiệu ứng chuyển động mượt mà bằng Framer Motion (hiệu ứng quay Randomizer, confetti).

  • Tối ưu hóa trải nghiệm người dùng với Server Components, skeleton loading, client-side caching và phân tách chunk tải theo nhu cầu.

• Xây dựng Kiến trúc Backend & Cơ sở dữ liệu:

  • Thiết kế và quản lý cơ sở dữ liệu MongoDB bằng Mongoose 9. Viết các luồng migration idempotent để cập nhật schema an toàn.

  • Phát triển toàn bộ hệ thống API với Zod validation, tối ưu truy vấn bằng compound index và cơ chế lấy dữ liệu ngẫu nhiên hiệu quả cho Randomizer.

• Xử lý Media & Lưu trữ: Tích hợp AWS S3 SDK để kết nối Cloudflare R2, tự động xử lý (resize, crop) và chuẩn hóa hình ảnh (Avatar, Ảnh món ăn) sang định dạng WebP qua thư viện Sharp trước khi upload. Thiết lập cơ chế tự động dọn dẹp ảnh rác trên R2 khi dữ liệu bị xóa hoặc sửa đổi.

• Hệ thống Xác thực & Quản lý Người dùng (Auth & User Management):

  • Triển khai xác thực qua NextAuth (Credentials JWT) với mật khẩu mã hóa bằng bcryptjs.

  • Xây dựng luồng quên mật khẩu sử dụng token dùng 1 lần, giới hạn thời gian (15 phút) và tích hợp API gửi email qua Resend.

  • Xây dựng hệ thống cấp bậc, điểm số và giới hạn đóng góp (rate limit) để chống spam.

• Hệ thống Quản trị & Tự động hóa (Admin & Automation):

  • Tích hợp Telegram Bot API để tự động gửi thông báo (realtime) cho Admin khi có tài khoản mới hoặc đề xuất món ăn mới (kèm cơ chế bypass an toàn để không làm hỏng luồng khi bot lỗi).

  • Xây dựng CMS cho Admin quản lý catalog, kiểm duyệt món ăn (duyệt/từ chối kèm lý do), quản lý hạn mức và khóa/xóa tài khoản người dùng.

• Kiểm thử & Triển khai (Testing & Deployment):

  • Viết các kịch bản Integration Test (bao phủ 88 trường hợp về xác thực, phân quyền, luồng kiểm duyệt, xử lý ảnh) bằng MongoDB cục bộ.

  • Cấu hình và triển khai (Deploy) dự án lên môi trường Vercel/Node.js, thiết lập Cloudflare DNS cho email giao dịch.

Kỹ năng & Công nghệ sử dụng (Technologies & Skills)

• Frontend: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, Framer Motion, Lucide React.

• Backend: Node.js, NextAuth (JWT), Zod, Sharp.

• Database & Storage: MongoDB, Mongoose 9, Cloudflare R2 (qua AWS S3 SDK).

• Third-party Services: Resend Email API, Telegram Bot API.

• Testing & CI/CD: Integration Testing, Vercel Deployment.