Case study
Tour Booking Platform
Tour search, filters, and custom itineraries — built to book without friction.
- Role
- Frontend Developer
- Period
- 06.2025 — 08.2025
- Stack
- WordPress + NextJS · REST API · ShadCn UI
Private client project
This is anonymized client work. The brand, live site, and visuals are covered by an NDA — reach out and I'll walk you through the details, the decisions, and the results.
Contact to discuss this projectFilter UI demo
Try the filter rail
- Highland loop3d · $420
- Coastal escape5d · $680
- Delta discovery2d · $310
- Mountain trek4d · $540
Anonymized demo — no client branding or live inventory.
Overview
A tour booking site for travelers exploring northern Vietnam's mountain routes. Guests need to find trips fast, filter by real constraints, request custom itineraries, and pay with confidence — mostly on mobile.
Interface sketch
The problem
01Tour operators often juggle Facebook inbox, spreadsheets, and a brochure-style site. Travelers bounce when they can't answer three questions quickly: where can I go, when is it available, and how do I book?
The client needed a customer-facing experience that felt modern, while ops still managed content in a familiar CMS.
Approach
02I built a Next.js frontend on top of WordPress as a headless CMS:
- Custom post types + ACF for tours, pricing fields, and availability metadata
- REST API feeding listing, detail, and filter UIs
- Booking + inquiry forms with admin notifications
- A payment gateway wired for checkout
Key decisions
03- Filters first: destination, date, duration, and price — the real decision drivers
- Custom tour requests: a dedicated flow for trips that don't fit fixed packages
- WordPress for ops, Next.js for guests: admin comfort without a sluggish theme for customers
- Motion with restraint: GSAP/Swiper where they clarify hierarchy
Impact
Lab / shipping
Lighthouse snapshot
Performance
Lighthouse
LCP
1.4s
Mobile lab
Mobile lab on a production-like build — client URL stays private.
LCP
1.4s
Mobile lab
Performance
96
Lighthouse
Live filters
4
Destination → price
Checkout rail
1
Payment wired
Before / after
Lab mobile scores from a production-like build — client URL stays private.
Before
LCP 5.1s
After
LCP 1.5s
Outcomes
Complete browse → filter → book/request loop on mobile and desktop
Ops update tours in WordPress without touching the frontend
Payment and inquiry paths wired for admin follow-up
Reusable headless booking pattern for later travel projects
Technologies
- WordPress + NextJS
- REST API
- ShadCn UI
- Tailwind CSS
- GSAP
- Swiper
Architecture
How the build is wired. Client UI stays off this page — names, logos, and screenshots are covered by NDA.
- 01Figma
- 02Next.js UI
- 03WordPress CPT/ACF
- 04REST
- 05Payment
Need a tour booking flow — live filters, custom requests, and a payment rail?