Cookalocal Tour — Nền Tảng Đặt Tour & Lớp Học Nấu Ăn Bản Địa Hội An
Website đặt tour xây mới hoàn toàn cho đơn vị tổ chức lớp học nấu ăn và trải nghiệm bản địa tại Hội An: tính giá lại phía server, email xác nhận tự động, chống spam không cần captcha và đặt tour nhanh qua WhatsApp với tin nhắn soạn sẵn.
- Năm
- 2026
- Timeline
- 1 month
- Tech stack
- 8 công nghệ
Xem qua sản phẩm
Desktop Preview
Mobile Mockup
Phạm vi & vai trò của mình
Fullstack Developer (Solo / End-to-End)
Phạm vi sản phẩm
Lập kế hoạch kiến trúc thông tin, layout nhận diện thương hiệu và luồng trải nghiệm cho khách du lịch quốc tế.
Tập trung dữ liệu tour (giá, thực đơn, thông tin liên hệ) vào một nguồn duy nhất, tách khỏi JSX.
Xây dựng giao diện responsive bằng Tailwind CSS v4, tối ưu ảnh thực tế (AVIF/WebP).
Xây dựng API cho đặt tour, liên hệ và đăng ký nhận tin, có Zod validation, honeypot và giới hạn tần suất request.
Gửi email song song: thông báo nội bộ cho điều hành tour và thư xác nhận giữ chỗ cho du khách.
Nút WhatsApp nổi và nút đặt chỗ thông minh: tự mã hóa tour đã chọn, ngày khởi hành và số khách vào tin nhắn.
Viết bộ unit test Vitest cho schema Zod, giới hạn tần suất, định dạng tiền tệ VND và form liên hệ.
Triển khai production với HTTPS tự động.
Luồng chính
Du khách duyệt các trải nghiệm đặc trưng (lớp học nấu ăn sân vườn, chèo thuyền thúng Cẩm Thanh, đi chợ truyền thống, thực đơn chay), xem ảnh thực tế và thực đơn chi tiết.
Khách chọn ngày, khung giờ, số người lớn/trẻ em và thấy giá tạm tính; khi gửi form, server validate bằng Zod, kiểm tra honeypot, giới hạn tần suất và tính lại tổng tiền từ bảng giá gốc.
Server gửi email thông báo tour mới cho ban quản lý và email cảm ơn kèm tóm tắt đặt chỗ cho du khách.
Khách bấm nút WhatsApp nổi hoặc nút đặt qua WhatsApp, ứng dụng mở ra với nội dung soạn sẵn đầy đủ thông tin đặt chỗ.
Các trang giới thiệu đội ngũ đầu bếp địa phương, liên hệ có bản đồ Google Maps, điều khoản đặt chỗ và chính sách bảo mật.
Công nghệ
- Next.js
- React
- TypeScript
- Tailwind CSS
- Zod
- React Hook Form
- Resend
- Vitest
Cách mình giải quyết
Bài toán cần giải quyết
Cookalocal Tour cần một website chuyên nghiệp xây mới hoàn toàn để giới thiệu các lớp học nấu ăn và trải nghiệm văn hóa bản địa tại Hội An đến du khách quốc tế. Phần lớn khách đặt tour ngay trong chuyến đi bằng điện thoại, nên trang cần tải nhanh, giao diện dễ dùng, bảng giá minh bạch theo số người lớn/trẻ em và cho phép liên hệ tức thì qua WhatsApp. Hệ thống cũng cần cơ chế đặt chỗ trực tuyến có email xác nhận tự động và chống spam bot mà không làm phiền khách bằng captcha.
Quyết định kỹ thuật
Một nguồn dữ liệu duy nhất cho tour: giá, thực đơn, thời lượng nằm ở một nơi, đổi giá một chỗ thì thẻ tour, trang chi tiết, form đặt và email đều cập nhật đồng bộ.
Không tin tổng tiền từ client: server luôn đối chiếu số khách với bảng giá gốc để tính lại tổng, tránh bị sửa payload.
Chống spam không cần captcha: trường ẩn (honeypot) kết hợp giới hạn tần suất theo IP, không làm phiền khách thật.
Dùng chung một Zod schema cho React Hook Form ở client và Route Handler ở server, để validate nhất quán và báo lỗi ngay cho người dùng.
Bài toán phức tạp
Đồng bộ múi giờ: neo logic ngày giờ đặt chỗ theo múi giờ Việt Nam (Asia/Ho_Chi_Minh) trên cả client và server, tránh lệch ngày khi khách đặt từ múi giờ khác.
Giữ giá nhất quán giữa giao diện, server và email: cùng một nguồn dữ liệu và cùng cách định dạng tiền VND.
Đặt tour đa kênh: khách nước ngoài cần phản hồi nhanh, nên bên cạnh form còn có link WhatsApp với tin nhắn soạn sẵn, không phải chờ email.
SEO ngay từ đầu: semantic HTML, sitemap động, robots.txt, metadata OpenGraph và ảnh được tối ưu.
Kết quả đạt được
Website Cookalocal chạy trên Next.js 16 và React 19 với quy trình đặt tour gọn: khách đặt qua form trực tuyến (giá được tính lại phía server, email xác nhận gửi tự động) hoặc trao đổi qua WhatsApp với tin nhắn soạn sẵn thông tin đặt chỗ. Form được bảo vệ bằng honeypot và giới hạn tần suất request, các logic quan trọng được kiểm thử bằng Vitest, trang có sitemap và metadata SEO đầy đủ.
Bộ test Vitest kiểm tra form đặt tour, giới hạn tần suất, validate schema và định dạng tiền tệ.
Khách có thể đặt tour qua form hoặc WhatsApp, đơn vị tổ chức nhận email thông báo cho mỗi yêu cầu.
Nội dung và giá tour nằm trong thư mục dữ liệu riêng, việc cập nhật không phải sửa giao diện.
Điểm nổi bật
Xây mới trên Next.js 16 App Router và React 19, ưu tiên trải nghiệm đặt tour trên điện thoại cho du khách quốc tế.
Form đặt tour bảo vệ nhiều lớp: honeypot, giới hạn tần suất request theo IP và tính lại tổng chi phí độc lập phía server.
Đặt tour linh hoạt: form trực tuyến có email tự động, song song với link WhatsApp điền sẵn thông tin đặt chỗ.
Kết nối với mình
Cảm ơn bạn đã ghé thăm góc nhỏ của mình. Rất mong chúng ta sẽ có dịp trò chuyện và hợp tác!
Mình luôn cởi mở với những cuộc trò chuyện về phát triển sản phẩm, ứng dụng AI hay các ý tưởng khởi nghiệp. Cứ thoải mái ném thẳng một tin nhắn cho mình nhé!
Nhận hợp tác chọn lọc · trả lời trong ngày
- GitHubgithub.com/Finnng1104
- LinkedInlinkedin.com/in/finnng1104
- ResumeResume (PDF)