https://github.com/bouquet1/phase2-react-project-meal-prep-backend
In your VsCode terminal, enter the comments below in an order.
npm install should intstall the dependencies that is necessary to run the code.
npm install react-router-dom@5 makes sure that the the project uses router5 because React router-6 has different features that is not used in this project.
npm run dev to run backend server in development mode. This command will use your localhost, probably port 3000.
https://github.com/bouquet1/phase2-react-project-meal-prep-frontend
In your VsCode terminal, enter the comments below in an order.
npm install should intstall the dependencies that is necessary to run the code.
npm install react-router-dom@5 makes sure that the the project uses router5 because React router-6 has different features that is not used in this project.
npm start should use your local server to display the webpage.
$ npm install
$ npm install react-router-dom@5
$ npm start
I'm thrilled to present to you my latest project, UR Meal Prep Assistant, a user-friendly web application built with React that aims to revolutionize the way we manage our recipes and plan our meals. In this presentation, I will take you through the key features and functionalities of this app.
UR Meal Prep Assistant is a digital replacement for the traditional methods of jotting down recipes on notebooks, notes, or draft papers. It streamlines the process of organizing recipes, creating shopping lists, and planning weekly meal preps. To achieve this, I used React to develop the front-end of the application, providing a seamless user experience.
UR Meal Prep Assistant is divided into two main sections: Recipe List and Shopping List. The Recipe List is further categorized into three sections: Breakfast Recipes, Lunch Recipes, and Dinner Recipes. This categorization helps users easily find and manage recipes based on the meal type.
Within each meal page, users can find an "Add a New Recipe" button to easily add a new recipe to the specific meal section. Every recipe in the list comes with four convenient buttons to manage the recipe efficiently: "Add to Meal Prep List" allows users to add the recipe to their weekly meal prep plan. "Add Ingredients to Shopping List" instantly adds the recipe's ingredients to the shopping list. "Edit Recipe" grants users the ability to modify any details of the recipe to suit their preferences. "Delete" offers an easy way to remove any unwanted recipes from the app.
To complement the React front-end, I also developed a RESTful API in another VS code file and utilized JSON files to store recipe data. This back-end infrastructure ensures smooth data management and retrieval, making the app more efficient and reliable. My Learning Journey and Future Plans
This project marks the completion of my React.js phase, and I am proud to have successfully implemented CRUD operations for effective data handling. I decided to undertake this relatively complex project out of personal interest, as I am passionate about meal prepping and organizing recipes. Although I have focused on Breakfast Recipes for now, I plan to continue building and enhancing UR Meal Prep Assistant. My goal is to develop a fully functional app that meets all my meal planning needs and helps others in their daily cooking routines.
Thank you for your attention, and I'm excited to share more updates on UR Meal Prep Assistant in the future.
Please use this link for the presentation of the project: