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.
- React
- Express
- Node.js
- MongoDB
- Mongoose
- Heroku
- Visual Studio Code
- Git/Github
- Navigate to the Heroku Deployment page.
ForkandClonethis repocdinto directory- run
npm install - Create a
.envfile in the root of the directory and insert yourMONGODB_URIconnection string.
- 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.
- 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.
- Implement search/filter functionality on pantry ingredients.



