Ni ska bygga en cocktail-wiki som använder data från The Cocktail DB API. Ni kan se ett exempel på en cocktail-wiki på deras hemsida.
Uppgiften kommer att delas in i tre sprintar som sträcker sig över tre veckor. Varje sprint avslutas med en code review på fredagen, där ni ska presentera och granska varandras kod inom gruppen. Ni kommer också att sätta upp delmål inför varje sprint och planera vem som arbetar med vad inom gruppen. Detta kräver att ni aktivt samarbetar och kommunicerar.
Applikationen ska byggas med Vite och React TypeScript och innehålla minst sex olika sidor.
Mål: Sätt upp projektet och skapa både en landningssida där användaren kan se en slumpmässig cocktail och en söksida där användaren kan söka efter cocktails.
Landing Page (Random Cocktail)
Cocktail Info Page
.Search Page
Cocktail Info Page
.Denna vecka bör ni sätta upp projektet i Vite med React TypeScript. Implementera React Router för att kunna navigera mellan olika sidor. Använd useEffect och useState för att hantera API-anrop och lagra cocktails. Dessutom ska ni läsa på om loaders och actions i React Router för att senare kunna implementera dem i projektet.
Code Review på fredag: Gå igenom koden tillsammans och säkerställ att alla förstår implementationen samt diskutera era första intryck av loaders och actions.
Mål: Skapa en sida för detaljerad information om cocktails och en favoritsida där användaren kan spara sina favoritcocktails.
Cocktail Info Page
Favorites Page
Denna vecka ska ni fokusera på att implementera användning av React useContext för att hantera favoriterna mellan komponenter och React Router för navigering. Använd också useEffect för att hämta cocktailinformation baserat på URL-parametrar.
Code Review på fredag: Diskutera användningen av useContext och hur ni hanterar data mellan sidorna.
Mål: Skapa en sida för detaljerad information om ingredienser och implementera eventuella bonusfunktioner.
Denna vecka ska ni också slutföra och implementera eventuella bonusfunktioner som ni har valt att arbeta med.
Code Review på fredag: Granska hela applikationen, inklusive bonusfunktioner, och säkerställ att allt fungerar som det ska. Förbered för inlämning.
Om ni blir klara med grundkraven kan ni välja att implementera några av dessa extra funktioner.