DEV Community

Cover image for Day 47 of Learning MERN Stack
Ali Hamza
Ali Hamza

Posted on

Day 47 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 47 of my daily coding run toward full-stack MERN mastery! Over the past few weeks, my Express.js server was growing quickly with custom routes, JSON handling, and rendering scripts. But as any senior dev will tell you: putting all your backend logic inside a single index.js file is a fast track to technical debt.

Today, I advanced straight into Prashant Sir's (Complete Coding) curriculum to implement the golden standard of software organization: MVC (Model-View-Controller) Architecture for clean code separation!


🧠 The Architectural Breakdown of MVC

MVC is a structural software design pattern that splits an application's concerns into three distinct decoupled layers. Here is how I broke down my monolithic file today:

1. Routes Directory (/routes)

Moved all my endpoint paths out of the main server setup. The routes file has only one responsibility now: capturing incoming network paths (like router.get("/api/users", ...) ) and mapping them instantly to the correct controller. No business logic lives here anymore!

2. Controllers Layer (/controllers)

This is the operational command center. I isolated all the raw middleware functions, conditional evaluations, data finding metrics, and response execution handling cleanly inside independent, exported functions:


javascript
// /controllers/user.js
const users = require("../MOCK_DATA.json");

const handleGetAllUsers = (req, res) => {
    return res.json(users);
};

module.exports = { handleGetAllUsers };
Enter fullscreen mode Exit fullscreen mode

Top comments (0)