| Naam | Tijn Huisman |
| Opdrachtgever | Fletcher Hotels |
| Praktijkbegeleider | Steven Wijnreder |
| Datum | 2025-08-26 |
| Versie | 1.0 |
Ik loop stage bij de developmentafdeling van Fletcher Hotels, een team van ongeveer zestien mensen. Binnen dat team werk ik bij de frontendafdeling, onder begeleiding van Rens Boeser, een senior frontend developer.
Het team werkt volledig op kantoor, vijf dagen per week van 9 tot 17. Elke dag start met een korte frontend-stand-up waarin we bespreken wat iedereen gisteren heeft gedaan en wat er die dag op de planning staat.
Fletcher Hotels ontwikkelt verschillende websites en webapplicaties voor hun hotelketen. Een belangrijk onderdeel daarvan is het vernieuwen van de fletcher.nl-omgeving en de individuele hotelpagina’s. Om die nieuwe sites visueel consistent en technisch schaalbaar te maken, is er een interne componentenbibliotheek nodig. Die bibliotheek heet Fletcherify 2.
De opdracht was om mee te werken aan Fletcherify 2, de tweede versie van Fletcher Hotels’ eigen frontend-componentenbibliotheek. Deze nieuwe versie moest:
Mijn taak als frontend-stagiair was om componenten te bouwen op basis van die ontwerpen en ze te implementeren in de Fletcherify-bibliotheek.
Ik heb onder andere gewerkt aan componenten zoals:
📸 [Foto 2 – Screenshot van ontwerp in Figma naast het gemaakte component]
We werkten met een lokale GitLab-instance voor versiebeheer, Jira voor taakverdeling en Figma als bron voor alle visuele ontwerpen.
Elke ochtend begon met de daily stand-up, daarna werkte ik zelfstandig of samen met Rens aan componenten. Wanneer ik een nieuw onderdeel had gebouwd, maakte ik een Merge Request (MR) in GitLab. Deze werd gereviewd door Rens Boeser of door Younes, de lead fullstack developer.
De code-reviews waren een belangrijk leermoment. Ik kreeg veel feedback op code-consistentie, herbruikbaarheid en readability. Daardoor leerde ik om clean code te schrijven en componenten zo op te zetten dat ze generiek inzetbaar zijn binnen Nuxt-projecten.
📸 [Foto 3 – Screenshot van een GitLab Merge Request met code-review]
Vooraf onderzocht het team, onder leiding van Rens, hoe Reka UI het beste geïntegreerd kon worden binnen Nuxt. Deze library biedt een set van toegankelijke, gestileerde UI-primitives die als basis dienen voor meer complexe componenten.
Daarnaast bekeken we bestaande design-systemen zoals Nuxt UI om te leren hoe zij werken met Tailwind variants en UI-props (bijv. :ui="{ label: 'text-green' }"). Zo konden we onze componenten flexibel maken, zonder aan consistentie te verliezen.
De designafdeling werkte gelijktijdig aan een nieuwe style guide, die nog in ontwikkeling was. Daardoor moest ik soms improviseren of zelf oplossingen bedenken om de visuele stijl consistent te houden.
📸 [Foto 4 – Voorbeeld van documentatie of prototype in Storybook]
Fletcherify 2 is opgezet als een moderne, schaalbare Vue/Nuxt-bibliotheek met TypeScript-ondersteuning en Tailwind CSS-styling.
De bibliotheek bevat inmiddels meerdere componenten die in Storybook staan en al actief getest worden door het team. Hoewel Fletcherify 2 nog niet in productie draait, wordt het binnenkort uitgerold samen met de vernieuwde Fletcher-websites.
Floris van Kempen (design) gaf aan dat ik snel en accuraat werk lever en de ontwerpen goed omzet naar code.
📸 [Foto 5 – Component-voorbeeld in Storybook met codevoorbeeld ernaast]
Het meest uitdagende aspect vond ik het maken van generieke componenten die in verschillende contexten gebruikt kunnen worden. Vooral het omgaan met Tailwind variants en het juist exposen van UI-props kostte tijd en denkwerk.
Technisch heb ik geleerd om:
Persoonlijk heb ik geleerd hoe het is om in een groter team samen te werken, om duidelijk te communiceren, en om clean code-principes consequent toe te passen.
📸 [Foto 6 – Teamoverleg of whiteboard-schets van componentstructuur]
Fletcherify 2 was voor mij een waardevolle stage-ervaring. Ik heb niet alleen gewerkt aan een belangrijk onderdeel van de nieuwe Fletcher-websites, maar ook geleerd hoe professioneel samenwerken binnen een groot developmentteam eruitziet.
De bibliotheek zal binnenkort worden ingezet voor de nieuwe fletcher.nl en de hotelpagina’s, waardoor mijn werk straks zichtbaar wordt voor duizenden gebruikers.