Author Profile Altaf Shaikh
Altaf Shaikh

BE Engg | Python Dev | Content Writer | Founder of TeachMeBro | Blockchain Dev | Django

Todo App - Project Directories And MVC Pattern

January 26th 2021   309

Todo App - Project Directories And MVC Pattern
Todo App - Project Directories And MVC Pattern

You should create a project folder at this point to house all the source code for the backend part of this application. I'll call my todo-app-backend. Feel free to use the todo-app-backend as your directory. It's not patented : )

I am Using VS code as my editor to code the project you can feel free to choose any other editor

So we will follow MVC pattern (model, View, Controller) for our project which is an industry standard. So don’t worry about this heavy term its basically means we are going to create some folders and we keep relative code in the respective folders. Simple!. Lets talk little about MVC before going ahead.

MVC Architecture Pattern:

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. MVC is one of the most frequently used industry-standard web development framework to create scalable and extensible projects.

In our case, we will only focus on Model and Controller, the View can be separately handled by frontend frameworks like React Js, Vue JS, ect. With the help of REST APIs. In this way we are creating a decoupled Web application where backend is written in Node JS and Frontend can be written separately using react or any other framework of your choice, both the application will talk with each other via API calls.

We'll create just 3 folders in the directory you created above.

models: This houses our entity (Todo data structure).

routes: A route is an entry to your application. This folder contains a file that defines what should happen when a user accesses a particular route.

controllers: This file basically contains functions which hold actual execution logic and each function is linked with a route specifying which controller(function) present in this file needs to be executed when a particular route is matched inside the route file.   

So we have setuo our project directory, in the next section we will learn to setup the Express server.