Desc - MERN Stack Beginner Guide: Building Your First Full-Stack App

MERN Stack 101: How to Build Your First Full-Stack App from Scratch

Are you eager to dive into full-stack development but unsure where to start? The MERN stack—an acronym for MongoDB, Express.js, React, and Node.js—has become a favorite for developers worldwide. Combining JavaScript-based tools for both frontend and backend development, the MERN stack offers a streamlined approach to building powerful and dynamic web applications.

What is the MERN Stack? A Quick Overview

The MERN stack is a popular web development framework used to build dynamic, full-stack applications. It comprises four powerful tools:

MongoDB

MongoDB is a NoSQL database designed to store data in a flexible, JSON-like format called BSON. Unlike traditional SQL databases, MongoDB excels in handling unstructured data, making it perfect for modern web applications that require scalability and speed.

Express.js

Sitting on the backend, Express.js is a lightweight web application framework for Node.js. It simplifies the creation of server-side logic by providing robust middleware options and an intuitive way to handle HTTP requests and responses.

React

React is a JavaScript library created by Facebook for building interactive and user-friendly interfaces. It uses a component-based structure, making it easy to develop reusable UI elements and manage application state.

Node.js

Node.js allows JavaScript to be executed on the server side, enabling developers to use a single language for both client-side and server-side programming. It is built on Chrome’s V8 JavaScript engine and is known for its efficiency in handling concurrent connections.

Why is MERN So Popular?

The MERN stack’s all-JavaScript nature streamlines development, reducing the need to switch between languages for different parts of the application. Its modular structure allows developers to easily integrate additional tools, while its community-driven support ensures abundant resources and libraries.

With the MERN stack, you can build anything from single-page applications to robust enterprise solutions. This versatility, combined with its developer-friendly tools, makes it a go-to choice for full-stack development.

Setting Up Your Development Environment

Before diving into building your first MERN stack application, it’s crucial to set up a development environment equipped with the necessary tools and frameworks. Here’s a step-by-step guide to get you started:

1. Install Node.js

Node.js is the backbone of the MERN stack. Download and install it from the official Node.js website. Ensure you install the latest LTS (Long Term Support) version for optimal stability.

Once installed, verify the installation by running the following commands in your terminal:

node -v 

npm -v

These commands will display the installed versions of Node.js and npm (Node Package Manager).

2. Install MongoDB

MongoDB is the database component of the MERN stack. Download it from the MongoDB website and follow the installation instructions for your operating system.

After installation, start the MongoDB service by running the following command:

mongod

You can also use MongoDB Atlas, a cloud-hosted version, if you prefer not to set up a local instance.

3. Install a Code Editor

A robust code editor makes coding more efficient. Many developers recommend Visual Studio Code (VS Code) for its features and extensive library of extensions. Download it from the VS Code website.

4. Set Up Your Project Structure

1.Create a new directory for your project:

mkdir my-mern-app
cd my-mern-app

2.Initialize a new Node.js project:

npm init -y

3.Install basic dependencies like Express and Mongoose:

npm install express mongoose

5. Configure Git and Version Control

Version control is essential for tracking changes in your project. If you don’t have Git installed, download it from the Git website. Initialize a Git repository in your project folder:

git init

With these tools and configurations in place, you’re ready to start building the backend and frontend of your MERN application!

Creating the Backend with Node.js and Express

Now that your environment is ready, it’s time to build the backend of your MERN stack application. In this section, we’ll create a RESTful API using Node.js and Express, and connect it to MongoDB using Mongoose.

1. Set Up the Server

1.Create a new file called server.js in your project directory.

2.Install Express by running:

npm install express

3.Add the following code to server.js to set up a basic Express server:

const express = require('express');
const app = express();
const PORT = 5000;

app.use(express.json());

app.get('/', (req, res) => {
    res.send('Welcome to the MERN Stack Backend!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

4.Run the server:

node server.js

Visit http://localhost:5000 in your browser to see the message.

2. Connect to MongoDB

1.Install Mongoose, a library that simplifies MongoDB interactions

npm install mongoose

2. Update server.js to include MongoDB connection logic:

const mongoose = require('mongoose');

mongoose.connect('mongodb://127.0.0.1:27017/mernapp', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
}).then(() => {
    console.log('Connected to MongoDB');
}).catch((error) => {
    console.error('Error connecting to MongoDB:', error);
});

3. Define a Data Model

1.Create a new folder called models and inside it, a file named Item.js

2.Define a schema for your data:

const mongoose = require('mongoose');

const itemSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
    },
    quantity: {
        type: Number,
        default: 1,
    },
});

module.exports = mongoose.model('Item', itemSchema);

4.Create RESTful Endpoints

Add routes to handle API requests in server.js:

const Item = require('./models/Item');

app.post('/items', async (req, res) => {
   try {
       const newItem = new Item(req.body);
       await newItem.save();
       res.status(201).json(newItem);
   } catch (error) {
       res.status(500).json({ message: 'Error saving item', error });
   }
});

app.get('/items', async (req, res) => {
   try {
       const items = await Item.find();
       res.json(items);
   } catch (error) {
       res.status(500).json({ message: 'Error retrieving items', error });
   }
});

5. Test Your API

Use a tool like Postman or cURL to test your endpoints. You can create new items, retrieve the list of items, and ensure everything works smoothly.

With the backend set up, you’re ready to move to the frontend development phase!

Developing the Frontend with React

Now that your backend is ready, it’s time to build the frontend using React. In this section, we’ll create a simple React application, fetch data from the backend API, and display it in a user-friendly interface.

1. Create a React Application

1.Navigate to your project directory and run the following command to create a React app:

npx create-react-app client

This will create a new folder called client with the React app inside.

2.Move into the client directory and start the development server:

cd client
npm start

The app will open in your browser at http://localhost:3000, showing the default React template.

2.Set Up Axios for API Requests

1.Install Axios, a popular library for making HTTP requests:

npm install axios

2.In your React project, create a folder called services and add a file named api.js to centralize API calls:

import axios from 'axios';

const API = axios.create({
    baseURL: 'http://localhost:5000',
});

export default API;

3. Fetch Data from the Backend

1.Open the App.js file and replace its content with the following:

console.log("a")

import React, { useEffect, useState } from 'react';
import API from './services/api';

function App() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        const fetchItems = async () => {
            try {
                const response = await API.get('/items');
                setItems(response.data);
            } catch (error) {
                console.error('Error fetching items:', error);
            }
        };

        fetchItems();
    }, []);

    return (
        <div style={{ padding: '20px' }}>
            <h1>MERN Stack App</h1>
            <ul>
                {items.map((item) => (
                    <li key={item._id}>
                        {item.name} (Quantity: {item.quantity})
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

2.This code fetches data from the backend and displays it as a list in the React app.

4. Style Your Application

1.Enhance your app’s appearance by adding CSS styles. Create a file named App.css and import it into App.js:

import './App.css';

2.Example App.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background: #fff;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

5. Run and Test Your App

Start your backend server (if it’s not running) and ensure your React app fetches data correctly. You should see the items listed in the browser, fetched dynamically from your backend API.

Jackson S

Software Engineer

Specializing in React, Next.js, TypeScript, and the MERN stack. Passionate about building scalable web apps, clean code, and sharing knowledge through blogs and community contributions.