Leuk dat je vandaag met ons meeloopt! Het doel van deze dag is om je zowel persoonlijk als technisch wat beter te leren kennen. Om je technische kant wat beter te leren kennen hebben we een leuke opdracht bedacht. Doe ondertussen alsof je thuis bent, kijk een beetje om je heen en stel gerust vragen.
We hebben alvast een Nuxt.js-setup voorbereid en een begin gemaakt, zodat je gelijk aan de slag kunt met de opdracht.
- Clone of download dit project naar je eigen private repository op GitHub.
- Voeg aan deze repository
julianhulsdouwenyhanssenstoe als collaborators. - Installeer het project middels
npm ci. - Run vervolgens
npm run devom de Nuxt-server te starten op http://localhost:3000.
Zoals je inmiddels wel gezien hebt hebben we een mooie racesimulator op kantoor staan waar veelvuldig gebruik van wordt gemaakt. Vandaag is het aan jou om hiervoor een leaderboardapplicatie te maken waarin we de rondetijden kunnen bijhouden. De applicatie moet minimaal voldoen aan de volgende user stories:
- Als gebruiker kan ik vanaf elke pagina een nieuwe rondetijd invoeren.
- Als gebruiker ben ik verplicht de volgende velden mee te sturen bij het invoeren van een nieuwe tijd: rondetijd, racer, datum en tijd van invoeren.
- Als gebruiker kan ik navigeren naar een pagina waarop alle ingevoerde rondetijden te zien zijn.
- Als gebruiker kan ik navigeren naar de leaderboardpagina waarop de beste tijd per racer te zien is, gesorteerd op snelste tijd.
- Grafisch gezien hoeft het wat ons betreft niet heel spannend te worden. Wat we wel belangrijk vinden is dat de UX goed is. Het is dus aan jou om de applicatie gebruiksvriendelijk, toegankelijk en logisch te maken.
- De racers kun je uit een JSON-bestand halen. Deze kun je vinden in de map
static/json. - Het daadwerkelijk opslaan en uitlezen van dynamische data is voor nu niet nodig. Het is wel belangrijk dat je hier al rekening mee houdt.
- Tailwind gebruiken
- Werken met Pull Requests.
- Filteren en sorteren.