Case study
Nền tảng đặt tour
Tìm tour, lọc theo nhu cầu và yêu cầu lịch trình riêng — đặt chỗ không ma sát.
- Vai trò
- Lập trình viên Frontend
- Thời gian
- 06.2025 — 08.2025
- Công nghệ
- WordPress + NextJS · REST API · ShadCn UI
Dự án bảo mật
Đây là dự án khách hàng đã được ẩn danh. Thương hiệu, trang live và hình ảnh thuộc thỏa thuận bảo mật (NDA) — liên hệ để mình trao đổi chi tiết về cách làm, quyết định và kết quả.
Liên hệ để trao đổi về dự ánDemo bộ lọc
Thử thanh lọc
- Highland loop3d · $420
- Coastal escape5d · $680
- Delta discovery2d · $310
- Mountain trek4d · $540
Demo ẩn danh — không brand khách hay inventory live.
Tổng quan
Website đặt tour cho khách khám phá cung đường núi phía Bắc Việt Nam. Khách cần tìm chuyến nhanh, lọc theo ràng buộc thật, gửi yêu cầu lịch trình riêng và thanh toán yên tâm — chủ yếu trên mobile.
Phác thảo giao diện
Vấn đề
01Nhiều đơn vị vẫn xoay quanh inbox Facebook, spreadsheet và website brochure. Khách thoát khi không trả lời nhanh: đi đâu được, còn chỗ khi nào, đặt thế nào?
Cần trải nghiệm phía khách hiện đại, trong khi ops vẫn quản lý nội dung trên CMS quen thuộc.
Hướng tiếp cận
02- Frontend Next.js trên WordPress headless
- CPT + ACF cho tour, giá, metadata
- REST API nuôi listing/detail/filter
- Form đặt tour/inquiry + cổng thanh toán
Quyết định quan trọng
03- Ưu tiên bộ lọc thật: điểm đến, ngày, thời lượng, giá
- Flow yêu cầu tour tuỳ chỉnh riêng
- WordPress cho ops, Next.js cho khách
- Motion có kiềm chế
Tác động
Lab / shipping
Ảnh chụp Lighthouse
Performance
Lighthouse
LCP
1.4s
Lab mobile
Lab mobile trên bản build giống production — URL khách vẫn riêng tư.
LCP
1.4s
Lab mobile
Performance
96
Lighthouse
Bộ lọc live
4
Điểm đến → giá
Luồng thanh toán
1
Đã nối thanh toán
Trước / sau
Điểm lab mobile trên bản build giống production — URL khách vẫn riêng tư.
Trước
LCP 5.1s
Sau
LCP 1.5s
Kết quả
Vòng browse → lọc → đặt/yêu cầu hoàn chỉnh
Ops cập nhật tour trong WordPress không đụng frontend
Luồng thanh toán và inquiry nối follow-up admin
Pattern booking headless tái dùng được
Công nghệ dùng
- WordPress + NextJS
- REST API
- ShadCn UI
- Tailwind CSS
- GSAP
- Swiper
Kiến trúc
Cách hệ thống được nối. UI khách không đưa lên trang này — tên, logo và screenshot thuộc NDA.
- 01Figma
- 02UI Next.js
- 03WordPress CPT/ACF
- 04REST
- 05Thanh toán