Front-end Ontwikkeling¶
Als Full-Stack Developer werk je aan de voorkant van een applicatie met een modern front-end framework dat draait op Node.js tooling (zoals React, Vue of Angular). Je ontwerpt en bouwt de gebruikersinterface, zorgt voor een goede gebruikerservaring en verbindt de front-end met back-end API’s. Het doel is een responsive, toegankelijke en performante webapplicatie.
Voor dit product ontwikkel je een front-end voor jouw applicatie met een front-end framework in het Node.js ecosysteem en documenteer je de keuzes die je hebt gemaakt.
Front-end frameworks & tooling¶
Binnen dit pre-profiel werk je idealiter met een modern front-end framework zoals:
- React (bijv. met Vite of Next.js)
- Vue (bijv. met Vite of Nuxt)
- Angular
Je maakt gebruik van Node.js tooling voor:
- Dependency management (bijv. npm, pnpm of yarn)
- Build tooling (bijv. Vite, Webpack)
- Development server en bundling
Kwaliteitsindicatoren¶
Bij het waarderen van dit product zal er worden gekeken naar de volgende kwaliteitsindicatoren:
- De Front-end Ontwikkeling is een op zichzelf staand document wat begint met een introductie/contextuele tekst, en vervolgens de verschillende onderdelen van de front-end beschrijft.
- Er is een duidelijke beschrijving opgenomen van de gekozen front-end stack (framework, tooling, Node.js versie, etc.).
- De front-end maakt gebruik van een modern front-end framework binnen het Node.js ecosysteem (bijv. React, Vue, Angular).
- De front-end is verbonden met (mock) API’s of een echte back-end, en dit is beschreven in het document.
- Er is aandacht besteed aan gebruikerservaring (UX) en vormgeving (UI), en deze keuzes zijn kort onderbouwd.
- De code is gestructureerd (componenten, mappenstructuur) en volgt afgesproken code kwaliteit standaarden (bijv. SOLID waar relevant, linting, formatting).
- Er zijn code snippets en/of screenshots opgenomen die de belangrijkste onderdelen van de front-end tonen.
- Er zijn referenties naar de code in GitLab opgenomen waar de front-end te vinden is.
- Er is een lijst van bronnen opgenomen in het document waarin je de bronnen die je hebt gebruikt om de front-end te ontwerpen en te bouwen beschrijft.
Template¶
Om zelf een front-end documentatie te maken, kan je gebruik maken van de volgende template:
# Front-end Ontwikkeling
In dit onderdeel beschrijf je in een paar zinnen wat de front-end van je applicatie doet, voor welke gebruiker(s) deze bedoeld is en welk probleem het oplost. Dit is de hoofdtekst van je document.
## Technologieën & Stack
Hier beschrijf je welke technologieën je gebruikt voor de front-end:
- Framework (bijv. React, Vue, Angular)
- Tooling (bijv. Vite, Webpack, Next.js/Nuxt)
- Node.js versie en package manager
Leg uit waarom je voor deze stack hebt gekozen.
## Architectuur & Structuur
Hier beschrijf je hoe je front-end is opgebouwd:
- Mappenstructuur
- Componentstructuur (bijv. pages, components, layouts)
- Hoe state management is geregeld (bijv. React state, Context, Redux, Pinia/Vuex, etc.)
Voeg eventueel een diagram of schets toe.
## Interactie met API
Hier beschrijf je hoe de front-end met de back-end of API communiceert:
- Welke endpoints je gebruikt
- Hoe je data ophaalt en verwerkt
- Hoe je omgaat met loading/error states
Voeg hier code snippets toe en verwijs naar de implementatie in GitLab.
## UX & UI Keuzes
Hier beschrijf je de belangrijkste UX/UI keuzes:
- Navigatie en flow door de applicatie
- Belangrijke schermen en componenten
- Responsiveness en toegankelijkheid (bijv. mobile-first, ARIA waar relevant)
Je kunt hier screenshots toevoegen om dit te illustreren.
## Bronnen
Plaats hier een lijst van bronnen die je hebt gebruikt om de front-end te ontwerpen en te bouwen. Denk aan youtube videos, websites, boeken, documentatie van frameworks, enzovoort.
Ook bronnen die je hebben geholpen met het schrijven van de code.