Skip to content

A full stack app that lets user search for recipes based on diets or health concerns. Logged-in users can 'like' recipes and save them to their profile. Quick demo below!

Notifications You must be signed in to change notification settings

LukeHayesss/final-project-foodzy

Repository files navigation

FOODZY is my final project for Concordia Web Dev Bootcamp. I wanted to make an app where you can filter through recipes depending on either diet preference (such as vegan, gluten free, etc), or health conditions (such as diabetes, or heart-health). I was inspired to make this because I'm a Type 1 diabetic, who also loves to cook! I implemented a lot of features and functionality in this app, such as-

  • ability to search the entire database of recipes
  • ability to filter based on diet or health conditions
  • login and logout ability, done through Firebase. This runs through the backend server, and the data is sent to Firebase
  • once logged in, you can 'like' recipes and have them save to your profile for future reference. They attach to your UserID in Firebase, so you can access your 'likes' on any device where you are logged in
  • there is a chat and review section, where you can upload notes/reviews to the recipe, and this info is also saved to your UserID
  • global error handling that redirects incorrect url's to an error page

In building this, I used a lot of different elements, including NodeJS, Styled Components, SCSS, Framer Motion, the Spoonacular API, extensive CSS Styling, React, React Icons, Regex for password verification, Firebase, and more.

Screenshots

Homepage

foodzy homepage

Diets Dropdown

foodzy dropdown 1

Health Conditions Dropdown

foodzy dropdown 2

Recipe Page

Recipe detail (1)

Login Page

foodzy login

Liked Recipes Page Part 1

foodzy no fave

Liked Recipes Page Part 2

foodzy faves

Error Page

foodzy error

Dependencies used in the front-end:

"dependencies": {
"@material-ui/core": "^4.12.4",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"dotenv": "^16.0.0",
"firebase": "8.2.1",
"framer-motion": "4.1.17",
"lodash": "^4.17.21",
"moment": "^2.29.2",
"mongodb": "^4.5.0",
"morgan": "^1.10.0",
"node-sass": "^7.0.1",
"path-to-regexp": "^6.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.5"},

Dependencies used in the backend:

"dependencies": {
"express": "^4.17.3",
"firebase": "^9.6.10",
"firebase-admin": "^10.0.2",
"firebase-functions": "^3.20.1",
"mongodb": "^4.5.0",
"morgan": "^1.10.0",
"node-fetch": "^2.6.1",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"uuid": "^8.3.2"},

About

A full stack app that lets user search for recipes based on diets or health concerns. Logged-in users can 'like' recipes and save them to their profile. Quick demo below!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published