November 2025
November 2025
In dit examen bouw je een eenvoudige applicatie om Pokemon te vangen. De gebruiker kan Pokemon vangen, details bekijken (indien gevangen), filteren, en vechten (verwijderen). 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 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.
- '/' Toont de PokemonList component, waar een overzicht van alle Pokemon wordt weergegeven.
- '/pokemon/:id' Toont de PokemonDetail component, waar de details van een individueel Pokemon worden bekeken.
- '*': Toont de PageNotFound component voor niet-bestaande routes.
Zorg voor een Suspense boundary rond alle routes. Terwijl een pagina aan het laden is moet de LoadingPage component getoond worden.
2.2 Navbar.tsx
Vervolledig de NavBar component zodat de gebruiker naar de correcte pagina’s kan navigeren.
3. PokemonList.tsx
3.1 Pokemon tonen
De PokemonList component toont een overzicht van alle Pokemon in de database. Programmeer een nieuwe hook die de methode 'getPokemons' oproept om de Pokemon op te halen. Maak vervolgens gebruik van de Pokemon component om elke Pokemon correct weer te geven.
De "View" knop mag enkel zichtbaar zijn voor gevangen Pokemon en "Catch" en "Battle" knoppen enkel voor Pokemon die nog niet gevangen zijn.
3.2 Pokemon filteren
Het moet mogelijk zijn om Pokemon te filteren op type en of ze al dan niet gevangen zijn.
Als er in de type dropdown een bepaald type geselecteerd wordt, mogen enkel Pokemon van dit type getoond worden. Als 'All' geselecteerd wordt, moeten alle Pokemon in de database getoond worden.
Om de dropdown op te bouwen kan je gebruik maken van de pokemonTypes array en het PokemonType type die in IPokemon.ts gedefinieerd zijn.
Zorg er vervolgens voor dat de caught checkbox gebruikt kan worden om enkel gevangen Pokemon te tonen. Als de checkbox aangeduid is moet de gevangen Pokemon getoond worden, anders de niet-gevangen Pokemon.
Notitie
Beide filters zullen dus hand in hand te werk gaan om de Pokemon te filteren. Indien type Flying is aangeduid en de gevangen checkbox staat uit. Dan toon je enkel alle Flying Pokemon die niet gevangen zijn.
3.3 Data manipuleren
3.3.1 Zoeken naar een nieuwe Pokemon
De "Search for new wild pokemon" knop kan gebruikt worden om nieuwe willekeurige Pokemon toe te voegen aan de database. De functionaliteit om een nieuwe Pokemon toe te voegen bestaat reeds in pokemonApi.ts.
Schrijf een afwachtende create-hook en gebruik deze om de mutatie uit te voeren.
3.3.2 Catch - Pokemon.tsx
Via de "Catch" knop kan je proberen een Pokemon te vangen. De functionaliteit om een Pokemon te vangen bestaat reeds in pokemonApi.ts.
Schrijf een update-hook en gebruik deze om de mutatie uit te voeren, voor volledige punten moet deze hook een optimistische update uitvoeren. In dat geval hou je rekening met de volgende opmerking. Let op dat de afbeelding van de Pokemon aangepast moet worden in deze hook naar '/pokeball.png' EN dat je de originele afbeelding van de pokemon in de restoreImage plaatst terwijl het vangen aan het gebeuren is. De catch API zal de originele afbeelding van de Pokemon terug herstellen indien de restoreImage is ingevuld. Je hoeft tijdens de onSuccess dus alleen de Pokemon met hetzelfde ID te vervangen.
3.3.3 Battle - Pokemon.tsx
Via de "Battle" knop kan je een Pokemon verwijderen uit de database. De functionaliteit om een Pokemon te verwijderen bestaat reeds in pokemonApi.ts.
Schrijf een update-hook en gebruik deze om de mutatie uit te voeren, voor volledige punten gebruik je een optimistische update.
4. PokemonDetail.tsx
4.1 Navigatie toevoegen in Pokemon.tsx
Via de "View" knop moet de detail pagina bezocht kunnen worden, implementeer deze navigatie.
4.2 PokemonDetail.tsx
Schrijf een nieuwe hook om de details van Ă©Ă©n Pokemon op te halen en gebruik deze om onderstaande pagina te bouwen. Merk op de UI van de detailpagina heel sterk lijkt op de Pokemon component.
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.
5. cheatCodeModeProvider.tsx
Schrijf een nieuwe context om bij te houden of de gebruiker wenst gebruik te maken van cheats. Er zijn twee opties: false en true. De modus bepaalt welke pokeball (standaard pokeball vs masterball) we gebruiken bij het vangen van een Pokemon.
- Standaard pokeball = cheat modus uit: kans op vangen van Pokemon < 100%
- Masterball = cheat modus aan: kans op vangen Pokemon = 100%
In de Navbar moet een checkbox toegevoegd worden waarmee de gebruiker kan schakelen tussen het al dan niet gebruiken van de cheat modus. De applicatie start standaard niet in cheat modus.
5.1 Aanpassen catch code
Zorg ervoor er in de catch code rekening gehouden wordt met de cheat modus.
Maak verder een kleine aanpassing aan de catch hook zodat je de correcte pokeball weergeeft wanneer je een Pokemon aan het vangen bent. Gebruik '/pokeball.png' indien je niet in cheat modus bent of '/masterball.png' wanneer je wel in cheat modus bent.
