Inhoudsopgave

• Meeloopstage stage
  • Leerpunten uit de Pokémon App
  • Leerpunten uit de Tic Tac Toe App

Leerpunten uit de Pokémon App

1. Frameworks en Tools

• Next.js
  • Gebruik van Next.js voor server-side rendering, routing en het optimaliseren van de performance van de applicatie.
• TypeScript
  • TypeScript biedt statische typecontrole, wat resulteert in robuustere en onderhoudbare code.
• Tailwind CSS
  • Tailwind CSS wordt ingezet voor snelle, flexibele en consistente styling van de gebruikersinterface.

2. API en Data Management

• Pokémon API
  • De applicatie maakt gebruik van een externe Pokémon API als primaire bron voor alle Pokémon-gegevens.
• Data Modellen
  • Definitie van de structuur van de data (zoals Pokémon en evolutieketens) om een consistente verwerking van gegevens te garanderen.
• DTO's (Data Transfer Objects)
  • Gebruik van DTO's om de ruwe data van de API te standaardiseren en om te zetten naar interne formaten.
• Transformers
  • Transformers zetten de opgehaalde ruwe data om naar de gewenste interne modellen, zodat de data correct en uniform kan worden gebruikt binnen de applicatie.

3. Data Ophalen en State Management

• GET Requests
  • Implementatie van GET-requests voor het ophalen van data uit de API.
• Hooks
  • Gebruik van custom React hooks om API-calls af te handelen en de data efficiënt te beheren.
• useState
  • Toepassing van de useState-hook voor het dynamisch beheren van de state binnen componenten.

4. UI Componenten en Layouts

• Componenten
  • Ontwikkeling van herbruikbare en modulaire UI-componenten voor een consistente gebruikerservaring.
• Layouts
  • Structurering van de pagina's met overzichtelijke layouts, wat bijdraagt aan een gebruiksvriendelijke navigatie en presentatie van data.
• Translations Files
  • Integratie van vertaling bestanden om meertaligheid te ondersteunen en de applicatie toegankelijk te maken voor een breder publiek.

5. Testing

• Unit Tests
  • Schrijven en uitvoeren van unit tests om de functionaliteit van individuele onderdelen te verifiëren en toekomstige regressies te voorkomen.

Gedetailleerde Indeling

1. Data Modellen en DTO's

• pokemon.ts
  • Doel: Definieert het Pokémon-model (bijv. id, name, types, abilities, sprites, statistieken, etc.).
  • Waarom eerst?: Dit is de basisstructuur voor alle Pokémon-gegevens.
• evolutions.ts
  • Doel: Definieert het Evolution-model voor het opslaan van evolutieketens.
  • Waarom?: Evoluties zijn onderdeel van de Pokémon-data en bouwen voort op het Pokémon-model.
• speciesDTO.ts
  • Doel: DTO voor soort gegevens van een Pokémon (bijv. evolution_chain url).
  • Waarom?: Nodig voor het ophalen van soort informatie via de API.
• pokemonDTO.ts
  • Doel: DTO voor de ruwe Pokémon-gegevens zoals door de API geretourneerd.
  • Waarom?: Zorgt voor een gestandaardiseerde structuur van de opgehaalde gegevens.
• evolutionDTO.ts
  • Doel: DTO voor de evolutieketen van een Pokémon.
  • Waarom?: Biedt een uniforme structuur voor evolutiedata.

2. Transformers

• evolutionTransformer.ts
  • Doel: Transformeert de ruwe evolutiedata naar het interne evolutiedata-formaat.
  • Waarom?: Om de door de API opgehaalde evolutiedata bruikbaar te maken in de applicatie.
• pokemonTransformer.ts
  • Doel: Transformeert ruwe Pokémon-gegevens naar het interne Pokémon-model.
  • Waarom?: Zorgt ervoor dat de gegevens conform het model zijn voordat ze verder worden gebruikt.

3. API Services

• getPokemon.ts
  • Doel: Haalt de gegevens van een specifieke Pokémon op via de API.
  • Waarom?: Gebruikt het model en de transformer om gedetailleerde Pokémon-gegevens op te halen.
• getEvolutionChain.ts
  • Doel: Haalt de evolutieketen op voor een Pokémon via de API.
  • Waarom?: Combineert soort informatie en evolutietransformatie om de keten te verkrijgen.
• getPokemonList.ts
  • Doel: Haalt een lijst van Pokémon op (met paginering) via de API.
  • Waarom?: Voor de overzichtspagina's waar een complete lijst van Pokémon wordt getoond.
• getSpecies.ts
  • Doel: Haalt de soort informatie (species data) van een Pokémon op via de API.
  • Waarom?: Nodig voor het ophalen van evolutie-gerelateerde data en aanvullende soort informatie.

4. React Hooks (Data- en State-management)

• usePokemon.ts
  • Doel: Een hook die specifieke Pokémon-gegevens ophaalt (maakt gebruik van getPokemon.ts).
  • Waarom?: Zorgt voor een eenvoudige interface om gedetailleerde gegevens in componenten te laden.
• useEvolutionChain.ts
  • Doel: Een hook die de evolutieketen van een Pokémon beheert (via getSpecies.ts en getEvolutionChain.ts).
  • Waarom?: Voor het dynamisch ophalen en weergeven van evolutieketens op detailpagina's.
• usePokemonList.ts
  • Doel: Een hook die de lijst van Pokémon ophaalt en beheert (inclusief paginering).
  • Waarom?: Zorgt ervoor dat de lijstdata in overzichtspagina's efficiënt wordt geladen.
• useSearch.ts
  • Doel: Een hook die zoekfunctionaliteit biedt door de Pokémon lijst te filteren op basis van een zoekterm (met debouncing).
  • Waarom?: Voor een responsieve zoekervaring binnen de Pokémon lijst.

5. UI Componenten en Layouts

• navigation.ts
  • Doel: Beheert de meertalige navigatie en routing binnen de applicatie.
  • Waarom?: Zorgt voor consistente navigatie-ondersteuning over de hele app.
• button.tsx
  • Doel: Een herbruikbare knopcomponent met meerdere stijlen (variants) en functionaliteiten.
  • Waarom?: Wordt gebruikt in diverse componenten voor consistente knoppen.
• pokemonCard.tsx
  • Doel: Toont een kaart met basisinformatie van een Pokémon (naam, afbeelding, type).
  • Waarom?: Wordt herhaald gebruikt in de overzichtspagina voor elke Pokémon.
• PokemonDetailLayout.tsx
  • Doel: Layout voor de detailpagina van een specifieke Pokémon, met uitgebreide informatie (zoals afbeelding, ID, evoluties).
  • Waarom?: Biedt de gebruiker een gedetailleerd overzicht van een gekozen Pokémon.
• PokemonLayout.tsx
  • Doel: Layout voor de overzichtspagina met een lijst van Pokémon, inclusief zoekfunctionaliteit en load-more functionaliteit.
  • Waarom?: Dit is de hoofdpagina waar gebruikers door alle Pokémon kunnen bladeren.

6. Vertalingen

• en.json
  • Doel: Bevat de Engelse vertalingen voor alle tekstuele elementen in de applicatie (zoals knoppen, titels, labels).
  • Waarom?: Zorgt voor meertaligheid en dynamische tekstweergave op basis van de taalvoorkeur van de gebruiker.

Samenvattend

• Basisgegevens: Worden gedefinieerd in de models en DTO's (bestanden 1 t/m 5).
• Transformers: (bestanden 6 en 7) Zetten de ruwe API-data om naar deze modellen.
• Services: (bestanden 8 t/m 11) Halen de data op via de API.
• Hooks: (bestanden 12 t/m 15) Beheren de data-ophaling en filtering binnen de React applicatie.
• UI Componenten en Layouts: (bestanden 16 t/m 20) Gebruiken de hooks en services om de gegevens aan de gebruiker te tonen.

Leerpunten uit de Tic Tac Toe App

1. Componenten en Props

• Square Component
  • Het Square-component is verantwoordelijk voor het weergeven van een enkel vakje op het bord. Het ontvangt twee props: value (de waarde van het vakje: 'X', 'O', of null) en onSquareClick (de call back functie die wordt aangeroepen bij een klik op het vakje).
• Board Component
  • Het Board-component bevat de logica voor het spelbord. Het ontvangt drie props:
  • xIsNext (een boolean die aangeeft of het de beurt is van 'X'),
  • squares (de huidige staat van de 9 vakjes op het bord),
  • onPlay (een functie die wordt aangeroepen wanneer een speler een zet doet).
• Game Component
  • Het Game-component is de hoofdcontainer voor de applicatie. Het beheert de geschiedenis van de zetvolgorde, de huidige zet en de weergave van het bord. Het ontvangt geen props, omdat het de staat zelf beheert via useState.

2. State en State Management

• useState Hook
  • De applicatie maakt gebruik van de useState-hook om de toestand van het spel te beheren. Er zijn twee belangrijke stukjes staat:
  • history (de lijst van alle voorgaande bord configuraties),
  • currentMove (de huidige zet in de geschiedenis, waarmee de voortgang van het spel wordt gevolgd).
• State Wijzigingen
  • Elke keer dat een speler een zet doet, wordt de toestand van het bord bijgewerkt via de handlePlay-functie. Deze functie voegt de nieuwe bord configuratie toe aan de history-array en wijzigt currentMove om de huidige zet bij te houden.

3. Game Logica

• handleClick Functie
  • In het Board-component wordt de handleClick-functie aangeroepen wanneer een speler op een vakje klikt. Als er al een winnaar is of het vakje is al bezet, gebeurt er verder niets. Anders wordt het vakje geüpdatet met de waarde 'X' of 'O', afhankelijk van de beurt van de speler.
• calculateWinner Functie
  • Deze functie controleert of er een winnaar is door te kijken naar alle mogelijke combinaties van drie vakjes op het bord (de lijnen). Als er een winnende lijn is, retourneert het de waarde van de winnaar ('X' of 'O'). Als er geen winnaar is, retourneert het null.
• Status Weergave
  • De status van het spel wordt dynamisch bijgewerkt afhankelijk van de voortgang van het spel. Het toont de winnaar, een gelijkspel of de volgende speler die aan de beurt is.

4. Historie en Navigatie

• Zetgeschiedenis
  • De applicatie houdt de volledige geschiedenis bij van alle zetten die zijn gedaan. Elke zet wordt toegevoegd aan de history-array. Dit maakt het mogelijk om terug te gaan naar eerdere zetten, wat wordt weergegeven in een lijst onder het bord.
• jumpTo Functie
  • Met de jumpTo-functie kunnen gebruikers teruggaan naar een specifieke zet in de geschiedenis. De functie past de currentMove aan, zodat de gebruiker de voortgang van het spel op een eerder moment kan zien.

5. UI en Layout

• React Components voor het UI
  • De UI bestaat uit herbruikbare componenten zoals Square, Board en Game. Deze zijn op een manier gestructureerd die zorgt voor een duidelijke scheiding van verantwoordelijkheden en een modulaire opbouw:
  • Square: Toont een enkel vakje van het bord en verwerkt klik interacties.
  • Board: Bevat de logica voor het spelbord en beheert de individuele vakjes.
  • Game: Beheert de spelstaat en de weergave van de geschiedenis.
• CSS Klassen
  • De applicatie maakt gebruik van eenvoudige CSS-klassen om de layout van het bord en de knoppen te bepalen. Bijvoorbeeld, de square-klasse wordt toegepast op de individuele vakjes om ze als knoppen weer te geven.

6. Event Handling

• onClick Event
  • In zowel het Square-component als het Board-component wordt gebruik gemaakt van de onClick-event handler om interactie van de gebruiker met de UI te beheren. De onSquareClick wordt aan elk vakje toegewezen en leidt naar de handleClick-functie in het Board-component.

7. Herbruikbaarheid en Modulariteit

• Modulaire Componenten
  • Elk component (zoals Square, Board, en Game) heeft één specifieke verantwoordelijkheid, waardoor de app gemakkelijk te begrijpen en uit te breiden is. Dit maakt het onderhoud eenvoudiger en vergroot de herbruikbaarheid van de componenten in andere applicaties of projecten.

Gedetailleerde Indeling

• Square Component
  • Doel: Weergeeft een enkel vakje en verwerkt klikken op het vakje.
  • Props:
    • value: de waarde van het vakje (null, 'X', 'O').
    • onSquareClick: een callback-functie voor het verwerken van klikken.
  • Waarom eerst?: Dit component is essentieel voor de weergave van het bord en interactie met de gebruiker.
• Board Component
  • Doel: Bevat de logica voor het spelbord en beheert de interactie met de vakjes.
  • Props:
    • xIsNext: bepaalt welke speler aan de beurt is.
    • squares: de huidige toestand van de vakjes.
    • onPlay: een functie om de nieuwe staat van het bord te verwerken.
  • Waarom eerst?: Dit is het centrum van de logica voor het weergeven en beheren van het bord.
• Game Component
  • Doel: Beheert de staat van het spel, de geschiedenis van zetten en de huidige voortgang.
  • Waarom eerst?: Het beheert de globale staat van het spel en biedt de gebruikersinterface voor het teruggaan naar eerdere zetten.
• calculateWinner Functie
  • Doel: Controleert of er een winnaar is.
  • Waarom eerst?: De winconditie is essentieel voor het beëindigen van het spel en voor het updaten van de status.

Samenvattend

• Componenten: Square, Board, en Game vormen de kern van de applicatie.
• State: Wordt beheerd met de useState-hook voor het bord, de geschiedenis en de huidige zet.
• Logica: De spelwinst wordt gecontroleerd via de calculateWinner-functie, en de voortgang wordt beheerd via de history.
• UI en Event Handling: Modulariteit en eenvoudige event handling zorgen voor een overzichtelijke en gebruiksvriendelijke ervaring.