MERN Stack: Overview of Core Concepts

Posted by

   

In the web development landscape, choosing the right technology "stack" is crucial. If you are looking for a powerful, flexible solution based entirely on JavaScript, then the MERN Stack is exactly what you need.

But what exactly is MERN and why is it so popular? Let's find out together.

🔗 Do you like Techelopment? Check out the website for all the details!

What is MERN?

MERN is an acronym that refers to a set of four JavaScript-based technologies used together to build dynamic and high-performance full-stack web applications.

  • MongoDB: The database (NoSQL).
  • Express.js: The backend framework (based on Node.js).
  • React: The frontend library.
  • Node.js: The runtime environment for JavaScript.

Why is it special?

The winning feature is the use of a single language (JavaScript) for both the client side and the server side. This drastically reduces the cognitive load for the developer and significantly speeds up development times.

The 4 Pillars of the Stack

1. MongoDB (The Database)

Unlike relational databases (SQL), MongoDB is a document-oriented NoSQL database. It stores data in JSON format (BSON), making it extremely compatible with JavaScript.

2. Express.js (The Web Framework)

Express is a lightweight framework that runs on Node.js. It is used to handle routes, HTTP requests, and server logic, making backend development simple and modular.

3. React (The Frontend)

Created by Meta, React allows you to build component-based user interfaces. It is the heart of the frontend: it allows you to update parts of the page without reloading the entire application.

4. Node.js (The Runtime Environment)

Node.js allows JavaScript to "leave" the browser and run on the server. Thanks to its asynchronous nature, it is extremely efficient in handling many simultaneous connections.


How they interact: A Practical Example

To understand how they work together, let's imagine building a simple To-Do List:

  • React (Frontend): The user writes a task and clicks "Add". React sends an HTTP request (POST) to the server.
  • Express.js (Backend): Receives the request, validates the data, and prepares the instruction for the database.
  • MongoDB (Database): Saves the task permanently.
  • Closing the loop: Express confirms the operation and React updates the interface without reloading the page.


Let's get to work: the code

The Backend (Node.js + Express + Mongoose)

The server exposes an endpoint that receives the data and saves it to MongoDB using an ODM like Mongoose (the standard for connecting Node to MongoDB) to manage the structure (Schema).

Completing the stack: MongoDB and Mongoose - Data persistence

MongoDB is a NoSQL database, but to interact with it from Node.js, most developers use Mongoose: a library that allows you to define "Schemas" (rigid structures) for your data, making the database more reliable.


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

app.use(express.json());

// Database connection
mongoose.connect('mongodb://localhost:27017/myApp');

// Schema definition
const TaskSchema = new mongoose.Schema({ title: String });
const Task = mongoose.model('Task', TaskSchema);

// Route to add a task
app.post('/api/tasks', async (req, res) => {
  const newTask = new Task(req.body);
  await newTask.save();
  res.status(201).send({ message: "Task saved to the database!" });
});

app.listen(5000, () => console.log("Server listening on port 5000"));

The Frontend (React)

The frontend sends the data to the server via a fetch request.

import React, { useState } from 'react';

function AddTask() {
  const [task, setTask] = useState("");

  const handleAddTask = async () => {
    const response = await fetch('/api/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: task })
    });
    
    if (response.ok) alert("Task sent successfully!");
  };

  return (
    <div>
      <input onChange={(e) => setTask(e.target.value)} placeholder="What do you need to do?" />
      <button onClick={handleAddTask}>Add</button>
    </div>
  );
}

Conclusion: Your next step

The MERN stack is not just an acronym, but a coherent ecosystem that allows for high development speed thanks to sharing the same language across the entire stack.

Want to get started?

  1. Install Node.js on your PC.
  2. Create a free account on MongoDB Atlas to host your database in the cloud.
  3. Start experimenting by creating a simple "To-Do" app.

The world of full-stack development is vast, but mastering these four technologies will give you the foundation to build virtually any modern web application. Happy coding!


References



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment