Case study Fletcherify

Naam	Tijn Huisman
Opdrachtgever	Fletcher Hotels
Praktijkbegeleider	Steven Wijnreder
Datum	2025-06-01
Versie	1.1

Context

Ik heb deze opdracht uitgevoerd bij Fletcher Hotels, waar ik sinds februari 2025 stage loop op de development-afdeling op het hoofdkantoor in Nieuwegein. Fletcher Hotels is een Nederlandse hotelketen met meer dan 100 hotels verspreid over het land. De development-afdeling richt zich vooral op de websites van Fletcher, zoals:

fletcher.nl – de hoofdwebsite waar je hotels kunt bekijken en boeken;

fletcherevents.nl – voor evenementenlocaties;

trouwenbijfletcher.nl – gericht op bruiloften;

Tijdens mijn stage werkte ik mee aan het project Fletcherify: een interne componentenbibliotheek die wordt gebruikt voor toekomstige websites. Het doel van Fletcherify is om één consistente en herbruikbare codebasis te maken, zodat het team sneller en consistenter kan werken aan nieuwe projecten.

Ik werkte in het frontendteam, waar we nauw samenwerkten met de designafdeling. Zij leverden Figma-ontwerpen aan, die wij vervolgens omzetten naar herbruikbare Vue-componenten. Mijn rol was om te helpen bij het ontwikkelen van die componenten, volgens de richtlijnen van het Fletcherify design system.

Opdracht

Voor dat ik was begonnen met werken aan de componenten had ik de huidige codebase bekeken om te kijken hoe zij werken.

Als eerste opdracht moest ik een breadcrumbs component maken

Aan de hand van een beschrijving heb ik dit component gemaakt in Vue, het ging best makkelijk.

Het tweede component was een pagination component

Leerdoelen

• Voor deze opdracht had ik drie persoonlijke leerdoelen opgesteld:

• Leren werken in een professioneel developmentteam met code reviews en samenwerkingstools.

• Meer inzicht krijgen in het bouwen van schaalbare componenten met Vue.

• Leren hoe je Figma-designs vertaalt naar code binnen een design system.

Onderzoek

Voordat ik begon, heb ik de bestaande codebase van Fletcherify onderzocht om te begrijpen hoe componenten waren opgezet. Ik bekeek hoe collega’s met Vue 3, TypeScript en Vite werkten en hoe de componentstructuur eruitzag.

Voor de datepicker heb ik ook gekeken naar bestaande oplossingen. Ik vond bijvoorbeeld een voorbeeld op CodePen van Rob Vermeer

Proces

Het proces verliep via Jira-tickets, waarin elke taak duidelijk omschreven stond. Ik begon met het analyseren van het design en de technische vereisten. Daarna maakte ik een eerste opzet van de componentstructuur.

Tijdens het bouwen gebruikte ik:

• Vue 3 voor de componentlogica,

• TypeScript voor typecontrole,

• Vite als build tool,

• en GitLab voor versiebeheer en Merge Requests (MR’s).

Mijn werk werd nagekeken door Rens Boeser, een senior frontend developer. Via zijn code reviews kreeg ik waardevolle feedback op codekwaliteit, structuur en Vue-best practices.

Na goedkeuring werd de component getest door andere developers binnen het team om te checken of alles werkte zoals bedoeld op verschillende schermgroottes en browsers.

Componenten

Date picker

Een van de componenten die ik moest maken voor Fletcherify was het datepicker component,

De bedoeling was dat ik het Figma ontwerp van Loaie Hamo ging uitwerken in Vue

Dit was het design:

Omdat wij geen external component library gebruiken moest ik het component helemaal vanuit niks maken

Ik had wel online de volgende code gevonden voor een datepicker die ongeveer had wat ik zocht

https://codepen.io/RobVermeer/pen/zBgdwg

Ik moest het nog steeds overtypen van vanilla JS naar Vue maar het hielp wel

Ik liep soms wel tegen dingen aan maar met behulp van collega's en AI is het mij uiteindelijk wel gelukt om een goed & werkend datepicker component te realizeren

Review en reflectie

Deze opdrachten waren mijn eerste echte productieopdrachten bij een professioneel bedrijf. In het begin vond ik het best spannend om code te schrijven die door anderen beoordeeld werd, maar ik merkte al snel dat de feedback van collega’s me hielp om beter te worden.

Ik heb geleerd hoe belangrijk code reviews zijn voor kwaliteit, en hoe waardevol het is om samen te werken met design en andere developers. Technisch gezien heb ik veel geleerd over Vue, props/emits, en het structureren van componentlogica binnen een grotere codebase.

Ik ben trots dat ik een component heb gebouwd dat echt wordt gebruikt binnen Fletcherify. Het was leerzaam om te ervaren hoe professionele webontwikkeling werkt — van design tot implementatie en review. Volgende keer wil ik mijn onderzoeksgedeelte nog wat verder uitbreiden, bijvoorbeeld door meer te testen met gebruikersfeedback of toegankelijkheid.