MERN Product Store

A full-stack MERN application for creating, updating and managing products through a React frontend backed by an Express REST API and MongoDB.

MERN Product Store

Project Overview

MERN Product Store is a full-stack web application built during my software development internship as a practical exercise in modern React and JavaScript backend development.

The frontend is built with React and Vite, with Chakra UI for the interface, React Router for navigation and Zustand for application state. Users can create, edit and delete products, choose sample product images or provide their own image URL, and switch between light and dark modes.

The backend is a REST API built with Node.js and Express. Product data is persisted in MongoDB through Mongoose, with server-side input validation, JSON error handling, request size limits and API rate limiting.

The application also handles loading, error and empty states, including sample products that can be added to quickly explore the application. Production deployment serves the Vite-built React application through the Express server, with MongoDB Atlas providing the database.

The project was originally based on a MERN tutorial, but was updated and expanded using current tooling and practices while focusing on understanding how the frontend, REST API and database work together.

Demo note: The application uses free hosting and may take up to a minute to start on the first visit after a period of inactivity.

Technologies Used

  • React
  • JavaScript
  • Node.js
  • Express.js
  • MongoDB
  • Mongoose
  • Zustand
  • Chakra UI
  • Vite
  • REST API