Approach to Create Workout Planner using MERN Stack

Functionalities:

• User can register/login, the state of the user can be stored once the user logs in and logout is also possible.
• A user can create custom routines and meals, and also view them.
• A user can make an entry on a particular day and select the

Frontend:

• Install necessary packages include fontawesome for icons, react-router-dom for routing etc.
• Create the basic routing structure of the frontend application
• Define page components that’ll be imported on every route and the internal components that form the atomic elements of the page.
• Context APIs are used for state management i.e. whenever a user logs in the state gets stored for the required amount of time for every session. This helps to store information across components and their children.
• A custom hook is created to fetch data from backend API.

Backend:

• The model-view-controller architecture is employed for the backend.
• Connect backend with the MongoDB Database using mongoose.
• Define model schemas for Entry, Routine, Meal and User.
• Create CRUD function in the controllers.
• Create routes for each CRUD function.

With a busy schedule, it is very important to prioritize our health and fitness. In this article, a walkthrough to creating a Workout Planner using MERN (Mongodb, Express, ReactJS, NodeJS) stack is explained. How to create own customized APIs using Mongoose for performing CRUD (Create, Read, Update and Delete) operations has been proposed along with an explanation of installation and setting up of the project.

Output Preview: Let us have a look at how the final output will loo like.