8 Best Practices for a MERN Stack Application

Mohamed Dek Web Development March 7, 2025 No Comments

8 Best Practices for a MERN Stack Application

Waxaan bloggaan ugu hadli doonna 8 Qaab aad u hagaajin kartid folders-kaaga marka aad sameyneysid fullstack MERN Stack(MongoDB, Express.js, React, Node.js) application. in Project-ka folders-kiisa loo hagaajiyo qaabka ugu wanaagsan waa mid muhiim ah si projectikaas loo hormariyo, loona joogteeyo sidoo kale ay team-ka ay si fudud ugu wada shaqeyn karaan.

Mark aad fullstack project aad sameyneysid oo aad code-kaaga isku hagaajiso waxaa fududaan doonto in markaas cilad bixin lagu sameeyo, wax cusub lagu soo kordhiyo sidoo kale ay dad kale kaala shaqeeyaan. Marka waxaa isla arki doonna 8 Qaab ee aad u maraysid arintaas.

1- Kala Saar Labadda Folder ee Backend iyo Frontend.

Marka aad sameyneysid Fullstack MERN Application waxaa caan ah inaad kala saartid labadda folder ee aad ku kala sameyneysid backend iyo frontend adigoo raacaayo qaacida ah separation of concerns. taas oo ka dhigan mid aad u fududeyndoonta development app-kaas iyo deployment-ka intaba.

Tusaale:

Frontend: Waxaa ku isticmaali doontaa React-Js files sida (components, hooks, Redux store, styles).

Backend: waxaa kali doonna dhamaan files-backend sida (models, routes, controllers, and middleware).

Database: database-ka iyo ku xerida database=ka waxaa si gaar u geli doonnaan folders-ka kala models or db oo ku dhex jira folder-ka Backend.

Waxaa uu noqondoonnaa structure-kaaga sidaan oo kale.

/MERN-app
/frontend
/src
/components
/redux
/hooks
/styles
/backend
/controllers
/models
/routes
/middleware
/config
.env
package.json.

2- Isticmaal Nidaamka Loo Yaqaan Modularization.

Hab-kaan loo yaqaan Modularization waa hab loo hagaajiyo code-kaaga oo laga dhigo mid qayb qayb ah oo qeyb walbaa ay qabanayso howl gaar ah.

Marka la joogo Backend iyo Frontend Modularization waa kala duwan yahay waxaadna usameyneysaa qaab kala duwan waxaan hoos ku xuseenna qaabka Frontend-ka iyo Backend-ka.

Backend Modularization:

Controllers: Folder-kaan waxaa keli doonna wax walbo backend logic ah adigoo sameynaya controller files. controller file walba waxaa uu qabanaayaa shaqo gaar ah sida (taskController.js oo aan u isticmaalayno Tasks-ka iyo userController.js oo aan u isticmaalayno users-ka).
Routes: Sidoo kale si loo sameeyo routes waxaad isticmaalaysaa folder u gaar ah routes sida (taskRoutes.js, userRoutes.js).
Models: Modules oo aad u isticmaalaysid habayn qaab dhismeedka data la keedinaayo waxaad sidoo kale gelinaysaa folder gaar ah, waxaana ku jiri doonno files-ka sida Task.js, User.js, iwm.
Middleware: Haddi aad heysatid middleware sida Authentication check waxaad middleware code-kaaga ka dhigaysaa mid gaar ah oo waxaad isticmaalaysaa Folder-kaan loo yaqaan middleware.

Frontend Modularization:

Components: Folderkaan oo ah folder-ka ugu caansan react js waxaad u isticmaalaysaa Reuseable components-ka sida button iyo wixii la mid ah.
Pages: waxaad folder-kaan aad u isticmaalaysaa inaad geliso pages-ka application-kaaga.

Habkani wuxuu sahlayaa code-kaaga in la tijaabin karo, oo wax laga beddelo.

3- Hagaaji API Routes iyo Controllers-ka.

In APIs sa fiican lays kugu hagaajiyo waa mid aad u muhiim ah taas aan ka dhalanaynin wax cilad ah marka uu application-kaaga weynaado. marka waxaad APIs-ka ka dhigtaa iyo Controllers-ka labbo kala badax banaan oo aan isku jirin taasoo ka dhigan haddii loo baahdo in endpoint APIs cusub lagu soo kordhinaya inaan meelaha kale wax laga badalin ee fudud loogu soo kordhin karo inta APIs loo baahan yahay.

Waa Files-ka Routes-ka aad kaliya u isticmaashaa routes sidoo kale Files-ka Controllers-ka aad kaliya u isticmaashaa Controllers.

Tusaale:

backend/controllers/taskController.js

const Task = require("../models/Task");

exports.getAllTasks = async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
};

exports.createTask = async (req, res) => {
  const task = new Task(req.body);
  await task.save();
  res.status(201).json(task);
};

backend/routes/taskRoutes.js

const express = require("express");
const router = express.Router();
const taskController = require("../controllers/taskController");

router.get("/", taskController.getAllTasks);
router.post("/", taskController.createTask);
router.put("/:id", taskController.updateTask);
router.delete("/:id", taskController.deleteTask);

module.exports = router;

4- Isticmaala Environment Variables .env

Mark aad sameynaysid fullstack MERN app waxaad u baahan tahay links baddan inay noqdaan kuwa secret sida database link, JWT_SECRET_KEY iwm.

Waxaad isticmaalaysaa .env dotenv file oo aad kelinaysid wax yaalaha secret-ka waxaadna markaas gelinaysaa file-kaas root folder-ka ee Backend iyo Frontend waxaadna u isticmaalaysaa wixii aad markaas u bahan tahay. file dotenv marka aad project-kaaga aad dhigaysid github-ka waxaad gelinaysaa .gitignore si uusan u raacin code-ka.

Tusaalaha.env file-ka ee Backend:

Sida Database URL-kaaga
MONGODB_URI=mongodb://localhost:27017/mydatabase

Json web token 
JWT_SECRET=your-secret-key

PORT=5000

Qaabka aad u isticmaalaysid Dotenv waa sidaan oo kale:

require("dotenv").config();

const mongoose = require("mongoose");
const app = express();

mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });

5- Isticmaal Middleware

Middleware waxaad u baahanaysaa marka aad sameyneysid Authentication ama Validation-ka waa file aad dib u isticmaalaykartid code-ka aad ku qorto.

Tusaale waxaad Sameyn kartaa file AuthMiddle.js si aad u hubisid user-ka inuu u fasaxan yahan qaar kamid ah routes-ka.

File AuthMiddleware waxaa loo qoraa sidaan:

backend/middleware/authMiddleware.js

const jwt = require("jsonwebtoken");

const authMiddleware = (req, res, next) => {
  const token = req.header("x-auth-token");
  if (!token) return res.status(401).json({ msg: "No token, authorization denied" });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded.user;
    next();
  } catch (err) {
    res.status(401).json({ msg: "Token is not valid" });
  }
};

module.exports = authMiddleware;

Marka aad rabtid inaad routes-ka qaar aad hubiso inuu user-ka uu u faxan yahay waxaad sameyneysaa sidaan oo kale:

backend/routes/taskRoutes.js

const authMiddleware = require("../middleware/authMiddleware");

router.get("/", authMiddleware, taskController.getAllTasks);

6- Isticmaal Naming Convention(Qaab Magaca midaysan)

Maadaama aad sameyneysid frontend iyo backend waxaad isticmaashaa magacyo aad marka koowaad ee la arko la fahmi karo. waxaa jira Naming Conventions(Qaab Maga Midaysan) oo kala duwan.

Halkaan waxaad ku xusi doonna qaar kamid ah:

CamelCase oo aad u isticmaalaysid variables iyo functions sida getAllTasks, taskController.
PascalCase oo aad u isticmaalaysid Magacyada React Components-ka sida TaskForm, TaskList.
kebab-case oo aad u isticmaalaysid magacyada files-ka iyo folders-ka task-controller.js, user-routes.js.

Waxaa halkaas ku xusnay sida qaab aad u isticmaali kartid magac sameynta variables, functions, components, files iyo folders. haddii aadan dooneynin inaad isticmaasho seddexdaas nooc oo kala duwan waxaad isticmaali kartaa hal nooc oo aad u isticmaali kartaa variables, functions, components, files iyo folders intaba.

6-U Isticmaal API Calls-ka hal file.

Madaama aad diyaarisay backend iyo frontend si uu frontend-kaaga uu ula tacaamulo backend waxaad isticmaalaysaa API-skii aad diyaarisay madaama API-ska ay noqonayaa ugu yaraan afar waxaad sameyn kartaa API calls-ka oo ah marka aad API-ska aad la tacaamulaysid waxaad functions-kaas gelin kartaa hal file sidaan oo kale adigoo isticmaalayo Axios.

frontend/src/services/taskService.js

import axios from "axios";

const API_URL = "http://localhost:5000/tasks";

export const getTasks = () => {
  return axios.get(API_URL);
};

export const createTask = (taskData) => {
  return axios.post(API_URL, taskData);
};

export const updateTask = (id, taskData) => {
  return axios.put(`${API_URL}/${id}`, taskData);
};

export const deleteTask = (id) => {
  return axios.delete(`${API_URL}/${id}`);
};

Kadibna waxaa ku isticmaali kartaa components-kaaga adigoo soo import-kareysanaayo.

import { getTasks, createTask } from "./services/taskService";

7- Isticmaal Redux or Context API for State Management (Marka aad u baahato)

Marka aad sameyneysid Fullstack Web Application waxaa uu noqon karaa mid leh components aad u baddan oo ay ka dhaxeeyaan hal data si data-daas aad ugu isticmaasho file walba waxaa u baahan tahay inaad isticmaashid Redux Toolkit ama Context API si aad u maareyso states-ka Application-kaaga.

Redux Toolkit waxaad u isticmaalaysaa Web Application-ka aad u weyn halkaa Context API aad u isticmaali kartid Web Applications-ka yar yar.

Qaabka loo sameeyo Context API waa sidaan:

frontend/src/context/TaskContext.js

import { createContext, useState, useEffect } from "react";

const TaskContext = createContext();

const TaskProvider = ({ children }) => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    // Fetch tasks and update state
  }, []);

  return (
    <TaskContext.Provider value={{ tasks }}>
      {children}
    </TaskContext.Provider>
  );
};

export { TaskContext, TaskProvider };

8- Isticmaal Version Control Sida Git

ugu danbeyn isticmaal version control git si aad ula socoto heerarka kala duwan ee code-kaagu uu maraayo oo samey branches adigoo isticmaalayo nidaamka gitFlow.

Waxaa rajaynaayaa inaad bloggaan aad wax baddan aad ka faa`iideen. marka wixii suaal ah qeybta comment-ka inoogu reeb.