Augustus 2025
Augustus 2025
In dit examen bouw je een eenvoudige applicatie voor het beheren en doorzoeken van een dranken database. De gebruiken kan draken bekijken en filteren op naam en soort. Daarnaast kunnen dranken verwijderd worden en kunnen de ingrediƫnten van een drank aangepast worden.
Gebruik React Router en TanStack Query om de applicatie te bouwen, als je andere libraries gebruikt verlies je een groot deel van je punten.
Dit is een open-boek, open-internet examen. Het enige wat niet is toegestaan, is het gebruik van generatieve AI waar je via natuurlijke taal mee communiceert en elke vorm van communicatie met iemand anders dan je toezichter. Onder natuurlijke taal verstaan we chat tools zoals ChatGPT en (GitHub) Copilot chat, maar ook het schrijven van commentaarlijnen die vervolgens door een AI-tool omgezet worden in code. AI-powered (multi)line-completion tools zoals GitHub Copilot of de ingebouwde line completion in WebStorm of Visual Studio Code zijn wel toegestaan.
Startbestanden
CSS
In de startbestanden vind je een CSS-bestand, zorg ervoor dat dit correct ingeladen wordt en beschikbaar is voor alle componenten in de applicatie.
Routing
Bouw een routing component die onderstaande routes voorziet en plaats deze op de correcte plaats in je applicatie.
- Het pad '/' toont de HomePage component die al te vinden is in de startbestanden.
- Het pad '/drinks/id' toont de DetailPage component die eveneens te vinden is in de startbestanden. Het tweede segment (id) is een dynamische parameter waaraan het id van een drank meegegeven kan worden.
Zorg voor een Suspense boundary rond alle routes. Terwijl een component suspended is, moet de LoadingPage component (die te vinden is in de startbestanden) getoond worden.
Dranken tonen
Maak gebruikt van de getDrinks functie uit de startbestanden en TanStack Query om een overzicht te tonen van alle dranken in de database. Om onderstaande lay-out na te bouwen kan je gebruik maken van de Drink component uit de startbestanden.
Dranken filteren
Maak gebruik van de select en het input veld om de dranken te filteren, beide filters moeten samen werken. De naam filter is niet gevoelig voor hoofdletters.
Detailpagina
Zorg er voor dat de gebruiker via de > (ChevronRight) knop (in de Drink component) naar de '/drinks/id' route gebracht wordt.
Op deze route worden de details van de drank getoond, in de DetailPage component vind je statische placeholders, vervang deze door de correcte data.
Terug navigeren
Via de "< Back to Home" button wordt de gebruiker terug naar de vorige pagina gebracht, ongeacht wat deze pagina is.
Ingrediƫnten updaten
De detail pagina bevat een lijst van de ingrediƫnten waarmee de drank gemaakt wordt, zorg ervoor dat deze gegevens aangepast kunnen worden via een optimistic update. Elke aanpassing (keypress) moet onmiddellijk weggeschreven worden via een TanStack mutation. Hiervoor kan je de updateDrink functie uit de startbestanden gebruiken.
Als het je niet lukt om de ingrediƫnten te updaten, kan je de instructies updaten voor een klein beetje minder punten.
Context: dranken selecteren
Op de homepagina moet de gebruiker dranken kunnen selecteren door op de afbeelding te klikken, een geselecteerde drank moet de selected CSS-klasse krijgen. Verder moet het aantal geselecteerde dranken getoond worden en moeten de 'Clear selection' en 'Delete selection' knoppen uitgeschakeld worden als er geen dranken geselecteerd zijn.
Je gebruikt context om de id's van de geselecteerde dranken te bewaren.
Selectie resetten
Via de knop 'Clear selection' moet de selectie van dranken gewist worden, de klasse selected moet van alle dranken verwijderd worden, de knoppen 'Clear selection' en 'Delete selection' moeten uitgeschakeld worden en het aantal wordt terug op 0 gezet.
Dranken verwijderen
Via de knop "Delete selection" moeten de geselecteerde dranken verwijderd worden via een afwachtende update.
Als het je niet gelukt is om de context te implementeren, zorg je ervoor dat een afbeelding verwijderd kan worden door op de afbeelding te klikken. Je verliest hierdoor geen punten op dit onderdeel (natuurlijk wel op de context)