The MERN stack is one of the most popular and powerful tech stacks for building full-stack web applications. It comprises MongoDB (database), Express.js (back-end framework), React.js (front-end library), and Node.js (runtime environment). If you are a web developer looking to boost your skills, working on real-world projects is a great way to learn.

In this blog, we will explore 10 MERN stack project ideas that will help you enhance your coding skills. Each idea will include an overview, some features, and a snippet of code to get you started.

1. E-Commerce Website

An e-commerce platform is a classic full-stack project to develop with MERN. It includes user authentication, product catalogs, shopping carts, payment gateways, and order management.

• User login and registration.
• Product listing with filters.
• Add to cart, checkout, and payment.
• Admin dashboard to manage products and orders.

// Example of creating a product in MongoDB
const Product = require('../models/Product');

const createProduct = async (req, res) => {
   const { name, price, description, category } = req.body;
   
   const product = new Product({ name, price, description, category });

   try {
       await product.save();
       res.status(201).json(product);
   } catch (error) {
       res.status(400).json({ error: 'Unable to create product' });
   }
};

module.exports = createProduct;
       

2. Social Media Platform

A social media platform allows users to interact with each other through posts, likes, comments, and messaging. This project will sharpen your skills in handling real-time data and user interactions.

• User authentication with JWT tokens.
• Create, like, and comment on posts.
• Real-time chat using WebSockets.
• Profile management and follow/unfollow functionality.

// Socket.IO for real-time messaging
const io = require('socket.io')(server);

io.on('connection', (socket) => {
   console.log('New user connected');

   socket.on('chat_message', (msg) => {
       io.emit('chat_message', msg);
   });

   socket.on('disconnect', () => {
       console.log('User disconnected');
   });
});
       

3. Blog Website with Markdown Editor

A blogging platform where users can write and publish articles using a markdown editor. This is a good project to practice content management systems and CRUD operations.

• User authentication and role-based authorization.
• Markdown editor for writing posts.
• Commenting system for each post.
• Admin panel to manage users and posts.

// Example of saving a post to MongoDB
const Post = require('../models/Post');

const createPost = async (req, res) => {
   const { title, content, author } = req.body;

   const post = new Post({ title, content, author });

   try {
       await post.save();
       res.status(201).json(post);
   } catch (error) {
       res.status(400).json({ error: 'Unable to create post' });
   }
};
       

4. Task Management App (To-Do List)

Build a task management app to manage tasks with deadlines, priorities, and categories. It will help you get hands-on experience with CRUD operations and state management using React.

• Add, update, and delete tasks.
• Categorize tasks and set priorities.
• Mark tasks as completed.
• User-specific task management.

// Example of creating a new task
const Task = require('../models/Task');

const createTask = async (req, res) => {
   const { title, description, dueDate, priority } = req.body;
   
   const task = new Task({ title, description, dueDate, priority });

   try {
       await task.save();
       res.status(201).json(task);
   } catch (error) {
       res.status(400).json({ error: 'Unable to create task' });
   }
};
       

5. Real-Time Chat Application

A real-time chat app allows users to send and receive messages instantly. You can enhance your skills in using WebSockets, as well as integrating MongoDB for storing messages.

• Real-time chat messages.
• User authentication with JWT.
• Private and group chats.
• Message history stored in MongoDB.

// Express route for sending a message
const Message = require('../models/Message');

const sendMessage = async (req, res) => {
   const { sender, receiver, content } = req.body;

   const message = new Message({ sender, receiver, content });

   try {
       await message.save();
       io.emit('message', { sender, content });
       res.status(200).json(message);
   } catch (error) {
       res.status(400).json({ error: 'Unable to send message' });
   }
};
       

6. Online Learning Management System (LMS)

An online learning platform allows users to enroll in courses, view lessons, and take quizzes. This project is great for practicing authentication, role-based access control, and data storage.

• Course creation and management (for instructors).
• User enrollment and progress tracking.
• Video lessons, quizzes, and assignments.
• User dashboard with course progress.

// Route for enrolling a user in a course
const Course = require('../models/Course');
const User = require('../models/User');

const enrollInCourse = async (req, res) => {
   const { userId, courseId } = req.body;
   
   try {
       const course = await Course.findById(courseId);
       const user = await User.findById(userId);

       user.courses.push(course);
       await user.save();
       res.status(200).json({ message: 'Successfully enrolled in the course' });
   } catch (error) {
       res.status(400).json({ error: 'Unable to enroll in course' });
   }
};
       

7. Expense Tracker Application

An expense tracker helps users track their spending, categorize expenses, and manage budgets. It’s a great project for working with databases, handling forms, and integrating charts.

• Add and categorize expenses.
• View expense summary by category or time period.
• Set budget limits and get notifications.
• Data visualization with charts (e.g., Pie chart).

// Route to add an expense
const Expense = require('../models/Expense');

const addExpense = async (req, res) => {
   const { amount, category, date, description } = req.body;
   
   const expense = new Expense({ amount, category, date, description });

   try {
       await expense.save();
       res.status(201).json(expense);
   } catch (error) {
       res.status(400).json({ error: 'Unable to add expense' });
   }
};
       

8. Job Portal

Create a job portal where employers can post job listings and candidates can apply for jobs. This will teach you how to build complex forms and manage different types of users (employer vs. candidate).

• Job posting and searching.
• User registration for employers and job seekers.
• Job application management.
• Admin dashboard to manage users and jobs.

// Route to post a new job listing
const Job = require('../models/Job');

const postJob = async (req, res) => {
   const { title, description, location, company } = req.body;
   
   const job = new Job({ title, description, location, company });

   try {
       await job.save();
       res.status(201).json(job);
   } catch (error) {
       res.status(400).json({ error: 'Unable to post job' });
   }
};
       

9. News Aggregator

A news aggregator application collects and displays the latest news from various sources. It’s a good project for practicing API integration and handling external data.

• Fetch news articles from APIs like NewsAPI.
• Categorize news by topics (e.g., technology, sports).
• Save favorite articles for later reading.
• Pagination for article listings.

// Fetching latest news using NewsAPI
const axios = require('axios');

const getLatestNews = async (req, res) => {
   try {
       const response = await axios.get('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY');
       res.status(200).json(response.data);
   } catch (error) {
       res.status(400).json({ error: 'Unable to fetch news' });
   }
};
       

10. Recipe Finder App

A recipe finder app helps users discover recipes based on ingredients they have at home. It’s a fun project to work on, integrating external APIs and displaying dynamic content.

• Search recipes by ingredients.
• View detailed recipe instructions.
• Save favorite recipes.
• User authentication for saving preferences.

// Fetching recipes from an external API
const axios = require('axios');

const searchRecipes = async (req, res) => {
   const { ingredient } = req.query;
   
   try {
       const response = await axios.get(`https://api.spoonacular.com/recipes/findByIngredients?ingredients=${ingredient}&apiKey=YOUR_API_KEY`);
       res.status(200).json(response.data);
   } catch (error) {
       res.status(400).json({ error: 'Unable to fetch recipes' });
   }
};
       

Conclusion

The MERN stack offers endless opportunities for creating modern web applications. Whether you’re interested in building an e-commerce site, a social media platform, or even a task management app, the MERN stack can handle it all. By working on these 10 projects, you will gain a solid understanding of full-stack development and be able to showcase your skills to potential employers.

Happy coding!