LA Vakantie Hub

Waarom een eigen app voor één reis?

Vakanties plannen lukt prima in Notion of Google Sheets. Maar voor onze trip naar Los Angeles — tien dagen, twee personen, Downtown LA als basis — wilden we één weergave waarin dagplanning, kosten in EUR én USD, kaart, checklist en bronnen elkaar versterken. Niet vijf losse tabs en een Whatsapp-conversatie, maar één app die ook op het vliegveld, in de auto en op een rustig moment op het strand werkt.

Niet de app moet zich aanpassen aan de tools; de tools moeten zich aanpassen aan de reis.

De acht pagina's

De app bestaat uit acht hoofdpagina's: home met countdown en KPI's, dagen-overzicht met detail per datum, activiteiten-lijst met filters, kaart met Mapbox-markers, kostenoverzicht met scenario's, checklist met deadlines, bronnen met betrouwbaarheidsniveau, en een offline-fallback. Iedere pagina is een Server Component tenzij interactiviteit echt nodig is — dan komt er een nauwkeurig afgebakend client component bij.

Drag & drop dat ook werkt zonder muis

De dagplanner gebruikt @dnd-kit in plaats van react-beautiful-dnd of een eigen oplossing. Reden: @dnd-kit is van origine toetsenbord-toegankelijk en heeft een schone API zonder de hacks die andere libraries nodig hebben. Activiteiten slepen tussen Ochtend / Middag / Avond werkt met muis, touchscreen én pijltjes-toetsen.

Server-first, met admin-only data-access

Alle data-fetching loopt server-side via firebase-admin. De client heeft nooit directe Firestore-toegang; mutaties gaan via Server Actions in lib/actions. Dat houdt het simpel: één plek voor security, één plek voor validatie (Zod), en geen rare hybride client-/server-Firestore-toestanden.

PWA voor onderweg

De app is installeerbaar als PWA via Serwist 9. Belangrijk voor onderweg: een offline-pagina toont rustig de laatste cache, een gestileerde fallback, en de service worker wordt alleen in productie geregistreerd. In LA wil je niet vertrouwen op een witte spinner als de mobiele data even wegvalt.

Een 'klein' project dat veel leert

LA Vakantie Hub is niet bedoeld voor distributie — het is een 'walking project' waarin ik bewust elke moderne Next.js 16 feature heb willen aanraken: Server Components, Server Actions, Fluid Compute, image-optimisatie, PWA, Mapbox-integratie, Zod-runtime checks en een externe API-stack. Eén trip, één codebase, heel veel rendement.