Permanente evaluatie
Permanente evaluatie
Als permanente evaluatie bouw je individueel een kleine website met minimaal 3 pagina's. Hieronder worden de specifieke vereisten besproken.
Het doel van deze opgave is om je bezig te laten zijn met React. Als je hier voldoende tijd in steekt, kan je hoog scoren op deze opgave en al 4 van de 20 punten verdienen.
Onderwerp
Het onderwerp van de website is vrij te kiezen, je kan bijvoorbeeld een website maken over een hobby of vereniging. Het onderwerp speelt niet echt een rol, we kijken ook niet in detail naar de informatie die weergegeven wordt op de site (zolang niet alles lorem-ipsum is), we beoordelen je op je React code.
Pagina's
Bouw een website met minstens 3 pagina, op 2 van de drie pagina's moet interactiviteit toegevoegd worden.
Onder interactiviteit verstaan we:
- Een zelfgeschreven interactieve component zoals tabs, een accordion, ... waarbij je state gebruikt om te bepalen welke content zichtbaar is.
- Data die uit een API of JSON-bestand (via fetch ingelezen) komt en dynamisch in de UI wordt weergegeven.
- Een filter waarmee bepaalde data kan worden getoond of verborgen, e.g. skills in een portfolio, activiteiten in een vereniging, ...
- Alles waarvoor je state nodig hebt.
Op één van deze pagina's moet je data inladen via een API call (fetch) waarrond je een TanStack wrapper schrijft. De data die teruggegeven wordt door de API moet lokaal of via een nieuwe API call gefilterd kunnen worden op basis van input van de gebruiker. Voor de andere pagina kies je zelf hoe je interactiviteit toevoegt.
Een API-call kan een oproep zijn naar een publieke API (je kan https://free-apis.github.io raadplegen voor inspiratie). Maar ook een lokaal JSON-bestand dat ingeladen wordt via fetch is toegestaan, zolang je maar gebruik maakt van TanStack Query.
Context
Je maakt verplicht gebruik van Context in je applicatie, hoe je dit doet, speel geen rol. Context moet niet op een zinvolle manier gebruikt worden zoals je dat zou doen in een echte applicatie, je kan bijvoorbeeld alle state van één van de dynamische pagina's in Context plaatsen. Ook als je deze data enkel gebruikt op deze éne pagina.
Layout
Je bouwt je website met behulp van een React componenten library die niet besproken is in de lessen. Het gebruik van shadcn/ui is dus niet toegestaan. Tailwind mag wel gebruikt worden als je dit combineert met een andere componenten library.
Je bent vrij in de keuze van de componenten library, hieronder worden enkele suggesties geven, maar je bent vrij om een andere library te gebruiken, zolang deze niet in de les besproken is. Ook libraries zonder styling, zoals BaseUI, React Aria, Headless UI, ... zijn toegelaten, je moet dan wel zelf voor de gepaste styling zorgen.
- Mantine
- MUI
- NextUI
- Prime React
- Chakra UI
- React Bootstrap
- Ant Design
- Blueprint
- Fluent UI
- Semantic UI
- Grommet
- Evergreen
- Ark UI
- Park UI
- Reactstrap
- Base UI
- Headless UI
Vereisten & evaluatiecriteria
In je inzending moeten volgende vereisten verwerkt zitten:
AI Gebruik
Deze opdracht bevindt zich in niveau 4 van de AI Assessment Scale, je mag dus gebruik maken van AI maar moet dit niet verplicht doen.
Alhoewel AI gebruik toegestaan is, raden we dit ten zeerste af. Deze opdracht is vooral bedoeld om je te laten oefenen met React en je voor te bereiden op het examen, waar AI slechts in zeer beperkte mate toegestaan is. Als je gebruik maakt van AI, werkt dit in jouw nadeel aangezien je jezelf zo minder goed voorbereidt op het examen.
GitHub Classroom
Je maakt gebruik van het aangeboden template repository in de GitHub classroom assignment. De link naar de opdracht voor jouw groep vind je op Canvas.
Enkel code die via GitHub classroom geüpload is en op de main branch staat wordt beoordeeld.