Generalized Basic Architecture for your first Full Stack project in NodeJS

Whenever you as a dev started planning / researching for your first project that includes backend , you probably heard a term MVC pattern or came Across a file Structure that includes folders like Models , Views and Controllers . So what is this ? Let's dive in.

If we can generalize the working of a web app , we can see that it generally goes like this. At first , A simple landing UI is there , where user first comes in . Now in the UI there might be various forms , buttons and/or Routes. After clicking those , A user can generally create , read , update or delete data from the database(known as CRUD operations) or can go to a route , only if they have the right access to perform those tasks. This operations also update the UI accordingly .

Now At first, we have to develop the UI , which you can already guess does reside in The Views Folder , Here generally the frontend part of the App is written.

Now, as we are dealing with the database we have to actually declare the Schema(The structure and the type of the data) of the data we are going to perform the operations on. Here , comes the participation of the Models folder. In the models folder , we declare the schemas of the various data we have to encounter in the database .

Ok, But what is the function of the controller folder ?

I am glad you asked . Only performing database query is not the only task our web app performs . It also performs various activities like Handling Database Errors , Authorize the right user , Access controls(i.e. checks if the user is admin and allowing admin operations) , Storing some extra information in the table if required (i.e. the date time which create request was made , the user id that made it , this was generally not taken from the form value ) etc. For these tasks we need the controllers folder. As of the word suggests here contains the controller functions / classes which control carious tasks of our App.

To put together when a user performs activities(let's say submitted the form) in the UI views calls controller method and let it check for errors , access controls etc. if all things passed , controllers calls models and model perform the query on the database.

It goes like this (This is my first attempt, you can totally skip this part , and please don't judge me 🙏 ) -

(Jake logs in to his account)

View - "Hey Controller! can you please give me jake's cat's information ?"

Controller - "let me check the token , yeah it's jake. Model can you please give me jake's details."

Model - "Fine ."

Controller - "Code 200 , Here you have it View . "

View - "Jake wants only the picture taken after 2022"

Controller - "let me perform the filter operation"

View - "Hey Jake wants to delete his cat's picture."

Controller - "He needs to be an Admin to perform that. Sorry, He isn't."

Controller - "Code 403, I can't authorize him ."

View - " You don't have permission ."

Now we actually often try to keep frontend backend separated. So, you might not see the Views folder . There you can see another folder named as Routes . And as the name suggests it does contain the routes. Generally the API(Application Program Interface) routes and endpoints . We , from the frontend send various requests(get, put, post and delete) to the API routes , that is declared here with the specific endpoints for the request on the route(Generally functions from controllers and middleware are called here ). We get data from the routes according to our requests , authorization level etc. Then , we show the data in the frontend.

Another folder named Middleware can also be seen , they're like controllers but the functions here generally decides where the controller function should be called or not and can generally be reused multiple times as a callback . We generally implement our Authentication part , Generalized error handling part here and call them inside the controllers.

In the utils folder , we implement various utility methods like we implement mechanism for email sending , mechanism to encrypt and decrypt data , mechanism to send/receive token etc.

We have the db folder there we declare the drivers and starting codes (like creating a table in SQL if it doesn't exist) , we need to connect with the database.

If the project uses Typescript you can see a folder named interfaces , where all the types are declared .

This is a generalized project structure and isn't only limited to NodeJS . Many Devs across various Programming languages and frameworks use this as a basic pattern to start their project .

This is my first blog . Hope, I can improve my writings and share more with you . Thank you for reading 😊😊😊😊😊.