Nadim Chowdhury

Posted on Feb 6

How to Write Clean and Maintainable Code in MERN

Writing clean and maintainable code is essential for building scalable and efficient applications, especially in the MERN (MongoDB, Express.js, React, Node.js) stack. Following best practices not only makes your code easier to read and understand but also improves collaboration and long-term maintainability. Here’s how you can achieve that:

1. Follow a Consistent Coding Style

A consistent coding style improves readability and reduces cognitive load when reviewing or debugging code.

Use ESLint and Prettier to enforce style rules.
Follow naming conventions (camelCase for variables and functions, PascalCase for React components).
Keep indentation, spacing, and line breaks consistent.

Example .eslintrc.json setup:

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

2. Modularize Your Code

Break your code into smaller, reusable functions and components to improve readability and reusability.

Backend (Node.js & Express.js)

Instead of writing everything in server.js, split concerns into different files.

Bad Example:

app.get('/users', (req, res) => {
  const users = db.find();
  res.json(users);
});

Good Example: (Using a controller)

// controllers/userController.js
exports.getUsers = (req, res) => {
  const users = db.find();
  res.json(users);
};

// routes/userRoutes.js
const express = require('express');
const { getUsers } = require('../controllers/userController');
const router = express.Router();
router.get('/users', getUsers);
module.exports = router;

Frontend (React.js)

Use reusable components instead of duplicating code.

Bad Example:

function UserCard(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>{props.email}</p>
    </div>
  );
}

Good Example: (Using destructuring and separate styles)

function UserCard({ name, email }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

3. Use Meaningful Variable and Function Names

Poor naming can make code difficult to understand. Choose clear, descriptive names.

Bad Example:

const x = getData();

Good Example:

const userList = fetchUserList();

4. Keep Functions Short and Focused

Each function should perform a single task.

Bad Example:

function processUserData(user) {
  const fullName = `${user.firstName} ${user.lastName}`;
  console.log(fullName);
  db.save(user);
}

Good Example:

function getFullName(user) {
  return `${user.firstName} ${user.lastName}`;
}

function saveUser(user) {
  db.save(user);
}

5. Handle Errors Properly

Ignoring errors can cause unexpected failures. Always handle them gracefully.

Bad Example:

const user = getUser(id);
console.log(user.name);

Good Example:

try {
  const user = getUser(id);
  console.log(user.name);
} catch (error) {
  console.error("Failed to fetch user:", error.message);
}

6. Use Environment Variables

Never hardcode sensitive information.

Bad Example:

const dbPassword = "mysecretpassword";

Good Example: (Using .env file)

DB_PASSWORD=mysecretpassword

require('dotenv').config();
const dbPassword = process.env.DB_PASSWORD;

7. Write Unit and Integration Tests

Testing ensures your application works as expected and prevents future bugs.

Use Jest for unit testing.
Use Supertest for API testing in Express.js.

Example test using Jest:

test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});

Example API test:

const request = require('supertest');
const app = require('../server');

test('GET /users returns a list of users', async () => {
  const response = await request(app).get('/users');
  expect(response.statusCode).toBe(200);
  expect(response.body).toBeInstanceOf(Array);
});

8. Optimize Performance

Use lazy loading in React to improve load time.
Implement pagination for large datasets.
Use indexes in MongoDB for efficient querying.

Example of pagination in Express.js:

app.get('/users', async (req, res) => {
  const { page = 1, limit = 10 } = req.query;
  const users = await db.find()
    .skip((page - 1) * limit)
    .limit(parseInt(limit));
  res.json(users);
});

Conclusion

By following these best practices, you can write clean, maintainable, and scalable MERN applications. Always aim for simplicity, reusability, and clarity in your code. Start implementing these tips today, and your future self (and teammates) will thank you! 🚀

Support My Work ❤️

If you enjoy my content and find it valuable, consider supporting me by buying me a coffee. Your support helps me continue creating and sharing useful resources. Thank you!

Connect with Me 🌍

Let’s stay connected! You can follow me or reach out on these platforms:

🔹 YouTube – Tutorials, insights & tech content

🔹 LinkedIn – Professional updates & networking

🔹 GitHub – My open-source projects & contributions

🔹 Instagram – Behind-the-scenes & personal updates

🔹 X (formerly Twitter) – Quick thoughts & tech discussions

I’d love to hear from you—whether it’s feedback, collaboration ideas, or just a friendly hello!