Skip to content

tnel91/My-Recipe-Database

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

My Recipe Database

Date: 10/19/2022

By: Travis Nelson


Description

My Recipe Database a React.js app that allows a user to create recipes and upload them to a database. The user will be able to search for, view, update, and delete recipes from the database. There will also be a separate page for tracking the contents of the user's pantry. It will render cards for each ingredient, showing name and quantity. The user will be able filter ingredients by tag, in addition to CRUD operations.


Technologies Used

  • React
  • Express
  • Node.js
  • MongoDB
  • Mongoose
  • Heroku
  • Visual Studio Code
  • Git/Github

Getting Started

Production

Development

  • Fork and Clone this repo
  • cd into directory
  • run npm install
  • Create a .env file in the root of the directory and insert your MONGODB_URI connection string.

Screenshots

Recipe List Page

Recipe List Page

Pantry Page

Pantry Page


Project Guidelines

Frontend

  • App.js will contain routing for the app.
  • Home.js will contain the landing page with links to the RecipeDB.js and Pantry.js pages.
  • RecipeDB.js will contain a component for a search bar and will render recipe cards on search. Will contain a button to link to a page with fields to add a recipe. Clicking a card will link to RecipeDetails.js, which contains a button to edit the recipe.
  • Pantry.js will contain a component containing a create food field. food items will be rendered as cards in a flex grid. A search bar will filter the food items by name or tag.

Component Hierarchy Diagram

Component Hierarchy Diagram


Backend

  • Database will need two collections, one for recipes and one for pantry items.
  • Routes for adding or updating a recipe/pantry item will need to differentiate the two actions, but can use the same field if possible.

Entity Relationship Diagram

Entity Relationship Diagram


Future Updates

  • Implement search/filter functionality on pantry ingredients.

Credits

Project Prompt: Github
Image Hosting Imgur
Search Engine Google
Stack Overflow StackOverflow

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors