Overzicht
Natuurhuisje is een platform voor gasten en verhuurders. Ik werk er aan features en de technische basis van de frontend. Sinds begin 2026 werk ik vooral in het verhuurdersteam, onder andere aan compliance en fiscale processen.
Uitdaging
Ik begon in een Symfony-monoliet met Twig, TypeScript, Custom Web Components en PostCSS. Die applicatie moest blijven draaien terwijl we een nieuwe frontend opbouwden en routes geleidelijk migreerden.
Aanpak
Samen met een Next.js-developer en een DevOps-engineer bouwde ik aan een zelfstandige frontend-monorepo naast de Symfony-applicatie. We migreren routes stap voor stap. Een proxy en GrowthBook feature toggles sturen verkeer gecontroleerd naar de nieuwe frontend.
Mijn bijdrage
Ik introduceerde Atomic Design en zette Storybook op voor component development. Voor de monorepo werkte ik mee aan de architectuur, conventions en migratieaanpak.
In het verhuurdersteam verzorg ik de frontend. Met app developers, backend developers en DevOps stem ik API-contracten en endpoints af voordat de implementatie begint.
Architectuur
De frontend-monorepo heeft meerdere apps, zodat teams binnen hun eigen domein kunnen werken. Een gedeelde componentbasis houdt de UI consistent.
De stack bestaat uit Next.js, React en TypeScript. TanStack Query beheert server state. OpenAPI-contracten leveren via Hey API gegenereerde API-types en TanStack Query-functions. De Symfony-applicatie en de nieuwe frontend draaien naast elkaar.
Technische keuzes
Presentational components krijgen data via props. Businesslogica heeft één duidelijke plek en wordt niet over clients verspreid. De frontend kan data combineren, maar dupliceert geen domeinregels.
Bij grote wijzigingen toets ik aannames met een proof of concept en weeg ik operationeel risico mee. Zo kan de bestaande applicatie blijven draaien.
Kwaliteit
Unit tests dekken functionele logica. Componenttests controleren UI-gedrag, states en validatie. Integration tests gebruik ik voor samenwerking tussen lagen; Playwright test volledige gebruikersflows.
Code review loopt via merge requests. Automatische pipelines draaien tests en E2E-flows. Voor accessibility combineer ik Storybook/a11y, semantische HTML, ARIA en browserchecks.
Resultaat
De nieuwe frontend groeit naast de Symfony-applicatie. Teams kunnen routes in hun eigen domein ontwikkelen en via de proxy gecontroleerd live zetten.
Lessen
Een migratie werkt beter met duidelijke grenzen, kleine stappen en controle over het verkeer. Afstemming tussen frontend, backend, app development en DevOps is daar onderdeel van.