food-finder

A small application that helps you find recipes that matches the ingredients at home.

See the app here.

This project was built by: Ellen Dahlgren Linus Hammarberg Nathanael Blackbourn

About

This project is a response to a brief at Medieinstitutet in Gothenburg. In groups of three, we were tasked with creating a small React app. The purpose of the app was our choice.

Food-finder takes input from the user to create a list of ingredients avilable to them in their kitchen. It then communicates with the Spoonacular API to get a selection of recipes that can be cooked with those ingredients. The recipes are displayed to the user along with which ingredients are used and which ingredients are missing from the user's selection. The user can then click on each recipe to see more details and either the recipe mthod or a link to the website where it is hosted.

Project setup

Food-finder uses Vite, TypeScript, React, React Router and Styled Components.

1. Clone the project from github.
2. Run npm install in your CLI to install the project's dependencies.
3. Run npm run dev in your CLI to start the live server.
4. Rum npm run build in your CLI to build the project.
5. Run npm run preview in your CLI to start th preview server.

---

Krav

Requirements of the brief.

Gjorda krav ska kryssas för.

G [x] Projektet innehåller och använder minst 8 stycken komponenter varav minst 3 stycken är “statefulla"-komponenter. [x] React Router har använts för att dynamiskt uppdatera URL’en. [x] Git & GitHub har använts. [x] Projektmappen innehåller en README.md fil - (läs ovan för mer info). [] Uppgiften lämnas in i tid! [] Muntlig presentation är genomförd.

VG [x] Alla punkter för godkänt är uppfyllda. [x] Ett “CSS i JS“ lib skall användas för at skriva CSS (ex JSS, Styled-Components, mm). [x] En ”ErrorBoundry”- komponent ska skapas och användas på minst 3 ställen. [x] Data från ett web-API hämtas och visas på sidan.