Januari 2026
Januari 2026
In dit examen bouw je een eenvoudige applicatie waarmee een museumcollectie beheerd kan worden. De nadruk ligt op het correct toepassen van React, React Componenten, React Router en TanStack Query.
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.
Belangrijk:
- Je werkt verder op een bestaand project. Download de startbestanden.
- Controleer of je alle benodigde bestanden hebt ontvangen. Contacteer onmiddellijk je toezichter als er iets ontbreekt.
- Voer pnpm install uit om alle benodigde libraries te installeren
Startbestanden
Opdracht
1. Opmaak
De startbestanden bevatten, in de root van het project, een stylesheet met opmaak voor dit examen. Zorg ervoor dat deze opmaak voor het volledige examen ingeladen wordt.
In het verdere verloop van dit examen is het geen probleem als jouw oplossing er anders uitziet. De focus van het examen ligt op de functionaliteit, focus dus niet op CSS-problemen, deze hebben, behalve het koppelen van de .css file geen invloed op je resultaat.
2. Navigatie
2.1 Routing.tsx
Schrijf een routing component met de volgende routes. Alle nodige componenten zitten al in de startbestanden.
- '/collection' Toont de CollectionPage component, waar een overzicht van alle artefacten in het museum wordt weergegeven.
- '/artifact/:id' Toont de ArtifactPage component, waar de details van een individueel artefact worden bekeken.
- '*': Toont de eveneens de CollectionPage component.
Zorg voor een Suspense boundary rond alle routes. Terwijl een pagina aan het laden is moet de Loading component getoond worden.
2.2 Navbar.tsx
Vervolledig de NavBar component, deze bevat één link die de gebruiker naar /collection stuurt.
3. CollectionPage.tsx
3.1 Artefacten tonen
De CollectionPage component toont een overzicht van alle artefacten in de database. Programmeer een nieuwe hook die de methode 'getArtifacts' oproept om de artefacten op te halen. Maak vervolgens gebruik van de Artifact component om elk artefact correct weer te geven (vervang de placeholder data met dynamische). De component toont voorlopig enkel de Nederlandstalige beschrijving.
3.2 Artefacten filteren
Via de tekstinput bovenaan de pagina moeten de artefacten gefilterd kunnen worden op naam of era, het zoekveld moet case-insensitive zijn en alle artefacten teruggeven waarvoor de naam of era de zoekterm bevat.
Als de tentoongesteld checkbox aangevinkt is, mogen enkel de artefacten getoond worden die de status "On Display" hebben. Als het veld niet aangevinkt is, toon je alle artefacten ongeacht hun status.
LET OP: Beide filters zullen dus hand in hand te werk gaan om de artefacten te filteren. Als een zoekterm is ingevuld én de checkbox is aangevinkt, moeten enkel de artefacten getoond worden waarvan de naam of era de zoekterm bevat EN waarvan de status "On Display" is.
3.3 Data manipuleren
3.3.1 Nieuw artefact toevoegen
Via de "+ Artefact toevoegen" knop moet een nieuw willekeurig artefact toegevoegd worden aan de database. Hiervoor gebruik je de addArtifact functie die voorzien is in de startbestanden.
Schrijf een afwachtende create-hook en gebruik deze om de mutatie uit te voeren.
3.3.2 Artefact verwijderen
Via de delete knop in een artifact card moet het artefact verwijderd worden uit de database, gebruik hiervoor de deleteArtifact functie die voorzien is in de startbestanden.
Gebruik hiervoor een afwachtende delete-hook. Terwijl de mutatie bezig is, voeg je de CSS-klasse 'delete' toe aan de artifact container (die momenteel al de klasse 'artifact' heeft). Deze klasse voegt een animatie toe die het artefact laat vervagen.
4. ArtifactPage.tsx
4.1 Navigatie toevoegen in Artifact.tsx
Door op de naam van een artefact te klikken in de Artifact component, moet de gebruiker kunnen navigeren naar de detailpagina van dat artefact.
4.2 ArtifactPage.tsx
Schrijf een nieuwe hook om de details van één artifact op te halen en gebruik deze om onderstaande pagina te bouwen. Hiervoor maak je gebruik van de ArtifactPageLayout component die voorzien is in de startbestanden.
Zorg ervoor dat de gebruiker terug kan navigeren naar de vorige pagina via de "Back" button. De gebruiker moet teruggaan naar de vorige pagina, ongeacht wat deze pagina is. Je mag dus geen hardgecodeerd pad gebruiken.
4.3 Artefact bijwerken
Maak gebruik van de displayStatuses array uit de startbestanden om de optie in het dropdown menu op te vullen. Schrijf vervolgens een optimistische update-hook om de display status van het artefact bij te werken. Voor alle punten, doe je dit zonder useState te gebruiken.
5. LanguageProvider.tsx
Schrijf een nieuwe context om bij te houden wat de geselecteerde taal is (Nederlands, Frans of Engels). Via de knoppen in de Navbar moet de gebruiker een andere taal kunnen selecteren. De taal die momenteel actief is, wordt aangegeven door de CSS-klasse 'active' toe te voegen aan de corresponderende knop.
De beschrijving op de collectie pagina moet aangepast worden aan de geselecteerde taal.
