what-to-cook

An app that let's you search for recipes by inputting a number of ingredients. You can log in and save those recipes as favourites.

How to run the app

  1. Fork or download the app and open the folder in a CLI
  2. Install dependencies using npm install
  3. Set up the nodeJS .env file with details on DB connection and a secret for encription (see below)
  4. To populate the DB run npm run migrate
  5. Start the backend server with npm run start. The app is served at http://localhost:5000/
  6. cd into the client folder and install dependencies with npm install
  7. add api key to react .env file. Get API key from https://spoonacular.com/food-api (see below)
  8. Start the frontend with npm run start. The app is served at http://localhost:3000

How to use the app

Without user account creation

  • click inside the search bar input at the top
  • add ingredients separated by commas
  • get back list of recipes you can use with those ingredients
  • click on one recipe to get more details

With user account creation

  • create login on the "Create accout" section
  • log in in the "Login" section
  • click inside the search bar input at the top
  • add ingredients separated by commas
  • get back list of recipes you can use with those ingredients
  • click on one recipe to get more details
  • click on ✩ to save recipe to favourites
  • access favourite recipes in the "Favourites" section
  • click on recipe to view details
  • click on ★ to remove recipe from favourites
  • click on the "Logout" button to log out

User stories

  • user can search a recipe by ingredients
  • user can select a random recipe on homepage
  • user can create account
  • user can log in
  • user can save recipes and access them later
  • user can log out

Features

  • Search recipe by ingredients

  • Random recipes on homepage

  • Account creation

  • Login

  • Logout

  • Adding to Favourites

  • Removing from Favourites

DB schema

DBschema

API routes to backend

routes

Dependencies

  • nodejs
  • express
  • react
  • MySQL
  • jsonwebtoken
  • bcryptjs
  • react-router-dom
  • bootstrap

node .env

 DB_HOST=
 DB_USER=
 DB_NAME=
 DB_PASS=
 SECRETWORD=

react .env

REACT_APP_RECIPE_API_KEY=

This is a student project that was created at CodeOp, a full stack development bootcamp in Barcelona.