LA Holiday Hub
Private command centre for our trip to Los Angeles in June 2026.
Why a custom app for a single trip?
Planning a holiday works fine in Notion or Google Sheets. But for our trip to Los Angeles — ten days, two people, Downtown LA as base — we wanted one view where day planning, costs in EUR and USD, map, checklist and sources reinforce each other. Not five separate tabs and a WhatsApp thread, but one app that also works at the airport, in the car and during a quiet moment on the beach.
Don't let the trip adapt to the tools; let the tools adapt to the trip.
The eight pages
The app has eight main pages: home with countdown and KPIs, days overview with detail per date, activities list with filters, Mapbox map, budget with scenarios, checklist with deadlines, sources with reliability tags, and an offline fallback. Every page is a Server Component unless interaction is truly needed — in which case a tightly scoped client component is added.
Drag & drop that also works without a mouse
The day planner uses @dnd-kit instead of react-beautiful-dnd or a custom solution. Reason: @dnd-kit is keyboard-accessible by design and has a clean API without the hacks other libraries need. Dragging activities between Morning / Afternoon / Evening works with mouse, touch and arrow keys.
Server-first, admin-only data access
All data fetching runs server-side via firebase-admin. The client never has direct Firestore access; mutations go through Server Actions in lib/actions. That keeps things simple: one place for security, one place for validation (Zod), and no weird hybrid client/server Firestore states.
PWA for the road
The app is installable as a PWA via Serwist 9. Important for the road: an offline page calmly shows the last cache, a styled fallback, and the service worker is only registered in production. In LA you don't want to be staring at a white spinner when mobile data drops out.
A 'small' project that teaches a lot
LA Vakantie Hub isn't meant for distribution — it's a deliberate 'walking project' where I touched every modern Next.js 16 feature: Server Components, Server Actions, Fluid Compute, image optimisation, PWA, Mapbox integration, Zod runtime checks and an external API stack. One trip, one codebase, lots of returns.
Highlights
- № 01Drag & drop day planner (@dnd-kit) with keyboard-accessible drop zones per part of the day.
- № 02Live countdown to departure, weather widget via custom /api/weather route and Mapbox map with markers.
- № 03EUR ⇄ USD currency toggle with live FX rate via /api/currency and a client-side provider.
- № 04Budget scenarios (Base 2p, Optional, To check) with Recharts visualisations.
- № 05Installable PWA via Serwist 9 with offline page and service worker.
- № 06Server Components by default; Firestore via firebase-admin server-side only.
- № 07Zod schemas as single source of truth for types, seed script and runtime validation.
- № 08Notion → Firestore seed script (npm run seed) for the initial dataset.