DEV Community

Cover image for How to Build Your First Full-Stack MERN App: A Beginner’s Guide
Ravindra Kumar
Ravindra Kumar

Posted on

2 1

How to Build Your First Full-Stack MERN App: A Beginner’s Guide

Content:
Introduction:

↪ If you're new to full-stack development, the MERN stack is one of the best ways to dive in. MERN stands for MongoDB, Express.js, React.js, and Node.js—a powerful stack for building modern web apps.

In this guide, we’ll create a simple MERN app step-by-step. Whether you’re a beginner or just looking to sharpen your skills, you’ll learn the fundamentals of building a full-stack application.

Step 1: Setting Up Your Development Environment
Before diving into the code, make sure you have the following installed:

1.Node.js and npm: Download Here
2.MongoDB: Install Locally or Use MongoDB Atlas
3.Code Editor: VS Code is recommended (Download Here)

Step 2: Initializing Your MERN Project
Backend Setup:
1.Create a new folder:

mkdir mern-app
cd mern-app

Enter fullscreen mode Exit fullscreen mode

2. Initialize a Node.js project:

npm init -y
Enter fullscreen mode Exit fullscreen mode

3.Install Express and Mongoose:

npm install express mongoose cors
Enter fullscreen mode Exit fullscreen mode

4.Create a basic server in server.js:

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

const app = express();
app.use(cors());
app.use(express.json());

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

Enter fullscreen mode Exit fullscreen mode

Frontend Setup:
1.Navigate to your project folder and create a React app:

npx create-react-app client
Enter fullscreen mode Exit fullscreen mode

2.Start the React app

cd client
npm start
Enter fullscreen mode Exit fullscreen mode

Step 3: Building the MERN App
Connect Frontend and Backend:
↦ Set up a simple API in your backend to fetch and post data.
↦ Use Axios in React to call your backend API.
Example Axios Call in React:

import axios from 'axios';

const fetchData = async () => {
  const response = await axios.get('http://localhost:5000/api/data');
  console.log(response.data);
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Deploy Your MERN App
Host your frontend on Visit Vercel.
Host your backend on Host on Render or any platform of your choice.
Use MongoDB Atlas for the database.

Conclusion
Congratulations! 🎉 You’ve just built your first full-stack MERN app. With the basics in place, you can now explore more features like authentication, state management, and advanced deployment techniques.

Got questions or feedback? Drop a comment below or share your experience with building a MERN app!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more