Full Stack Development with MERN Stack: Complete Tutorial

The MERN stack (MongoDB, Express, React, Node.js) is one of the most popular technology stacks for building modern web applications. This comprehensive tutorial will guide you through building a complete full-stack application.

What is MERN Stack?

MERN is an acronym for:

• MongoDB: NoSQL database
• Express: Web framework for Node.js
• React: Frontend JavaScript library
• Node.js: JavaScript runtime environment

Why Choose MERN?

• JavaScript Everywhere: Use one language for entire stack
• Fast Development: Rapid prototyping and development
• Large Community: Extensive support and resources
• Scalable: Handles growth well
• Modern: Uses latest web technologies

Project Setup

Backend Setup (Node.js + Express)

# Create project directory
mkdir mern-app
cd mern-app

# Initialize backend
mkdir backend
cd backend
npm init -y
npm install express mongoose cors dotenv
npm install -D nodemon

Frontend Setup (React)

# Create React app
cd ..
npx create-react-app frontend
cd frontend
npm install axios

Building the Backend

Express Server Setup

// backend/server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();

// Middleware
app.use(cors());
app.use(express.json());

// MongoDB Connection
mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
.then(() => console.log('MongoDB Connected'))
.catch(err => console.log(err));

// Routes
app.use('/api/users', require('./routes/users'));
app.use('/api/posts', require('./routes/posts'));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

MongoDB Schema

// backend/models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
}, {
  timestamps: true,
});

module.exports = mongoose.model('User', userSchema);

API Routes

// backend/routes/users.js
const express = require('express');
const router = express.Router();
const User = require('../models/User');

// Get all users
router.get('/', async (req, res) => {
  try {
    const users = await User.find();
    res.json(users);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Create user
router.post('/', async (req, res) => {
  const user = new User(req.body);
  try {
    const newUser = await user.save();
    res.status(201).json(newUser);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

module.exports = router;

Building the Frontend

React Components

// frontend/src/components/UserList.jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const response = await axios.get('http://localhost:5000/api/users');
      setUsers(response.data);
    } catch (error) {
      console.error('Error fetching users:', error);
    }
  };

  return (
    <div>
      <h2>Users</h2>
      <ul>
        {users.map(user => (
          <li key={user._id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Connecting Frontend and Backend

API Service

// frontend/src/services/api.js
import axios from 'axios';

const API_URL = 'http://localhost:5000/api';

export const userService = {
  getAllUsers: () => axios.get(`${API_URL}/users`),
  createUser: (userData) => axios.post(`${API_URL}/users`, userData),
  updateUser: (id, userData) => axios.put(`${API_URL}/users/${id}`, userData),
  deleteUser: (id) => axios.delete(`${API_URL}/users/${id}`),
};

Best Practices

Security

• Use environment variables for sensitive data
• Implement authentication and authorization
• Validate and sanitize user input
• Use HTTPS in production
• Implement rate limiting

Performance

• Use indexing in MongoDB
• Implement pagination for large datasets
• Optimize React components
• Use code splitting
• Implement caching strategies

Code Organization

• Separate concerns (models, routes, controllers)
• Use consistent naming conventions
• Write reusable components
• Implement error handling
• Write tests

Deployment

Backend Deployment

• Deploy to platforms like Heroku, AWS, or DigitalOcean
• Set environment variables
• Configure MongoDB Atlas for production
• Set up CI/CD pipeline

Frontend Deployment

• Build React app: npm run build
• Deploy to Vercel, Netlify, or AWS S3
• Configure API endpoints
• Set up custom domain

Conclusion

The MERN stack provides a powerful foundation for building modern web applications. By mastering MongoDB, Express, React, and Node.js, you can create scalable, full-stack applications that meet today's web development needs.

Start building your MERN application today and join the community of full-stack developers!