An app designed to help keep recipes organized and keep an inventory of ingredients.
The user can edit their recipe cards easily.
Ingredients and instructions can be marked as the user works on their recipe to help them keep track.
Users can create new recipes and easily add as many input fields as their recipes require.
Users can organize their pantry items based on storage categories. Users can add the weight and quantities of each item.
Users can also edit their pantry item specifications or remove items entirely from their pantry tracker.
EJS, JavaScript, CSS, Node.js, Express.js, MongoDB, Mongoose
This app uses EJS to generate HTML using JavaScript, allowing the app to render recipes and pantry items based on user data.
JavaScript handles what happens when the user interacts with things like buttons. It removes recipe ingredients or instructions as the user edits their recipe. It also appends new inputs to the recipe card page, allowing users to add more ingredients and instructions as needed.
Node.js is responsible for the server-side aspect. It uses JavaScript to build scalable applications.
Express.js is a framework for Node.js that comes with lots of features. It is responsible for routing and middleware throughout the app.
MongoDB is the database that stores users' data, such as the data tied to recipe cards and pantry items.
Mongoose is responsible for defining Schema Objects that map directly to MongoDB. Organizing user data this way makes it easy to reference throughout the app.
MVC architecture organizes the app into three components: Model, View, and Controller.
The View component holds all of the ejs files the user sees and interacts with.
The Model component holds all of the Mongo schemas that give structure to our user data. It is responsible for adding and retrieving data from the database.
The controller component acts as the middleman between the Model and View components. The Controller will process requests made through View components and relay requests related to data to the Model component. The model component will then retrieve the data needed and "pass it" to the Controller, which will then interact with the View component to have the data rendered in HTML.