ReactJS-applikasjon som lar deg søke i – og lagre oppskrifter på drinkar.

Om prosjektet

Avsluttande oppgåve i JavaScript rammeverk-modulen i FrontEnd-studiet. Med fokus på å lage gjenbrukbare komponentar og sørge for strukturert og ryddig React kode

Gå til nettsida

Eg stod fritt til å style sida slik eg sjølv ville, og valde å bruke Styled Components slik at eg fekk bli betre kjent med den måten å designe komponentar på. Eg må sei eg er stor fan!

Eg kunne velje API å hente data frå sjølv. Eg valde å hente frå The Cocktail DB. Det gav meg høve til å lage eit søk der brukaren kunne søke etter drink, men det gav meg òg sjansen til å legge inn ein knapp for å få ein tilfeldig drink frå APIet.

Eg laga ein komponent kalla "FavouriteToggle.js", som eg inkluderte i alle drinkane. Med denne komponenten vil brukaren få presentert ein knapp – forma som eit hjerte – både inne på kvar drink-side, samt på resultata i drink-søket. Ved å klikke på dette hjertet vil ein legge til og fjerne drinken frå ei liste over favorittar. Denne lista blir lagra i ein Context Provider i applikasjonen, samt i Local Storage hos brukaren. FavouriteToggle.js-komponenten. Den er inkludert i kvar drink-komponent. Lista over brukaren sine favoritt-drinkar.

For å halda koden ryddig, samla eg variablar i eige filter, eksporterte dei, og importerte dei der eg hadde bruk for dei.

Eksempel på eksport av variablar knytt til oppkopling til APIet og WordPress

Ein ekstra del av oppgåva var å lage eit "kontakt oss-skjema". Skjemaet skulle kontrollerast ved bruk av React Hook Form med Yup som resolver.

Krava til validering av skjemaet er òg eksportert ut frå eigen fil

Det var ei svært spennande oppgåve der eg fekk fridom til å utfordra meg og kunnskapen eg hadde om React på det tidspunktet.