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!

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay