Building a To-Do Application with the MERN Stack: A Comprehensive Guide for Beginners — Part 1

To-Do application Swagger Documentation

I always wanted to develop a full fledged To-Do application and deploy it so that other beginner developers who are learning full stack development can have some insight and will prove to be helpful. This guide, unlike many tutorials that leave learners in a dilemma with missing pieces, aims to provide a seamless, end-to-end understanding of developing and deploying a full-fledged application. This is not merely a tutorial; it’s a roadmap to help developers with practical, hands-on experience, elucidating the intricacies of the MERN stack through the development of a To-Do app.

The Repository and Deployment Details

Our journey begins with the backend API of the To-Do application. You can explore the entire codebase on GitHub at: https://github.com/prajwalbati/todo-backend. The application lives in the cloud on Render, a versatile hosting platform. Experience it live at https://express-todo-mway.onrender.com. Given it’s hosted on a free tier, initial load might be slow.

Understanding the Application Structure

Above picture shows how the folder structure looks like in github. It is not the hard and fast rule that we need to follow the exact pattern. You can modify it as best you can. I will try to explain how the application works, where it starts from and what each files and folders represents.

Note: This application runs on Node Version >14 and <18.

Starting point of the Application

Every node project will have package.json file which includes important things such as scripts, dependencies, dev dependencies and other metadata details. If you see the scripts section, you can find the command to start the application. There you can find the file name which is run in order to start the application. In this repo, the starting file is www file inside bin directory. This file runs the express server in specified port and it also import another important file app.js which has all other important code included in it.

Diving into app.js

app.js orchestrates our application's flow, integrating middleware, routes, and database connections, and establishing a global error handling mechanism. Traditionally, server listening code might reside here, but decoupling it aids in testing and scalability.

If you look into the app.js file, you can see use of some middlewares like express-session, flash, cookieParser. You can also see views and view engine setup. If you donot want to use backend to render it’s own view files, then these are not necessary to include. If you are developing only APIs, then you can remove them.

Routes within app.js serve as channel to our endpoints, processing user requests through controller functions, service layers, and database interactions.

Controllers, Services, and Models

When user sends request on some api endpoint, the routes will call specific controller functions to process the request. All the functions for request handling is implemented in different files in controllers directory. These controller functions will then execute necessary task and sends response to the user. From controller, it calls functions in service which acts as the business layer and service then executes database queries. Services contain all necessary functions to interact with the database. There you can also see the models. Model act as a connection with database tables. Since I am using mongodb on this application, Mongoose ODM is used to connect with mongodb collections.

Authentication and Authorization

Most of the tutorials found in internet tends to exclude user authentication and authorization part. But the real world application will have this feature to authenticate user. You can find auth.js file that has user authentication features including user registration, activation, user login and other related endpoints. This way we can implement user specific todo list. For user authorization, I have used passport.js library and validate bearer token using passport Bearer Strategy which can be found in passport.js file inside config directory.

Beyond the core actors, our application benefits from a supportive ensemble:

• Database Connection: The database folder's mongoose.js file ensures a stable connection to MongoDB.
• Documentation: Employ the docs folder to swagger your API documentation, enhancing usability and developer experience.
• Utilities: Commonly used functions reside in the helpers folder, ready to be summoned application-wide.
• Middleware Management: The middleware folder is the guardian of request-response integrity, orchestrating validations and more.
• Validation: Input validations find their home in the validators folder, ensuring data integrity and security.

For those inclined towards frontend endeavors, the public and views folders offer a playground for experimenting with templates and EJS, although these can be omitted for API-centric projects.

Also please read the README.md file for more details.

I will soon write next article on frontend todo application using this same Rest API. If you are interested to take a look into the frontend part, you can visit github repo https://github.com/prajwalbati/todo-frontend
Also, frontend is deployed in vercel https://react-todo-prajwalbati.vercel.app

Updated: You can find my next article on frontend To-Do application here.
https://prajwalbati.medium.com/building-a-reactjs-frontend-for-a-to-do-application-mern-stack-part-2-7b9524349c30

Again, I am still working on both API and frontend app and improving them. So, there is still many other features to implement. But the basic crud todo operations and user authentication is all done.

That is it for this article. Please comment if you have any feedbacks and queries.

Below you can find the links to repo and live demo. Happy Coding.

Backend API
Github Repo: https://github.com/prajwalbati/todo-backend
Live Demo: https://express-todo-mway.onrender.com/

Frontend
Github Repo: https://github.com/prajwalbati/todo-frontend
Live Demo: https://react-todo-prajwalbati.vercel.app