This project is a Full-Stack E-Commerce Application built using the MERN stack (MongoDB, Express.js, React.js, Node.js). It simulates a real-world webshop with essential features like user authentication, product management, shopping cart functionality, order management, and an admin dashboard. (This project is containerized using Docker.)
You can check out the live version of the app here: Live Demo on Render
- Project Overview
- Features
- Tech Stack
- Getting Started
- Installation and Setup
- Dockerizing the Application
- Running the Application
- Scripts
- File Structure
- Additional Notes
- License
- Fully functional e-commerce experience with product browsing, user authentication, and order placement.
- Responsive user interface for seamless navigation across devices.
- Built-in admin dashboard for managing data.
- Browse products with details (image, description, price, and reviews).
- Add products to a cart and follow a 4-step checkout process:
- Sign In (JWT authentication with secure token storage).
- Shipping: Enter shipping details.
- Payment: Mock payment integration (no real gateways used).
- Place Order: Finalize and view the order summary.
-
Review the order status (Paid, Delivered).
-
Rate and review products (each user can rate a product only once).
- Access an Admin Dashboard displaying:
- Total sales, product count, users, and orders.
- Manage the app:
- Products: Add, edit, or delete products (with image upload using Multer).
- Users: View, update, or delete users accounts.
- Orders: View orders and update statuses (Paid/Delivered).
Password Encryption: Passwords are encrypted using bcrypt.js.- Token-based authentication with
JWT.
- React.js: For building the user interface.
- React Bootstrap: For responsive styling and prebuilt UI components.
- Redux Toolkit: For global state management.
- React Router DOM: For routing between pages.
- React Toastify: For user notifications.
- SASS: For styling with extended CSS features.
- Node.js & Express.js: For creating the RESTful API and managing server-side logic.
- MongoDB (via Mongoose): For the database to store users, products, orders, and reviews.
- JWT: For user authentication.
- Multer: For handling image uploads.
Follow these steps to set up the project locally.
Ensure you have the following installed:
- Node.js and npm
- A MongoDB Atlas account (free tier is sufficient).
- Create a MongoDB Cluster
-
Sign in or sign up at mongodb.com
-
Create a new project and build a database cluster (choose free tier).
-
Set a username and password for the database.
-
Allow connections from your IP or enable access from anywhere.
- Configure .env File
- Rename example.env to .env in your project directory.
- Add your MongoDB connection string:
NODE_ENV=development
PORT=8000
MONGO_URI=<your_mongo_uri>
JWT_SECRET=<your_jwt_secret>
-
Import Sample Data
-
Import predefined sample data:
npm run data:import- To clear the database:
npm run data:destroy- Clone the repository:
git clone <https://github.com/ghezel1995/mern-shop.git>
cd mern-shop
npm install
npm install --prefix frontend- Install dependencies for both backend and frontend:
npm install
npm install --prefix frontend- Set up your MongoDB connection:
- Replace
MONGO_URIwith your MongoDB connection string.
- Replace
The JWT secret is simply a random string that you define in your .env file to sign and verify tokens. Just write a random string for it in the .env file for JWT_SECRET, like:
aaa111
The project is fully Dockerized to simplify setup and deployment. Using Docker ensures consistent environments for development and production.
-
Install Docker:
- Download Docker for your operating system.
-
Verify Installation: Run the following command to ensure Docker is installed:
docker --version-
Build the Docker Image: Navigate to the project directory and run:
docker build -t mern-shop .This command:
- Installs all dependencies for the backend and frontend.
- Builds the production-ready React app.
- Prepares the app for deployment.
-
Run the Docker Container: Start a container from the built image:
docker run -p 8000:8000 -p 3000:3000 --name mern-shop-container mern-shop
- The backend will be available at
http://localhost:8000. - The frontend will be available at
http://localhost:3000.
- The backend will be available at
-
Stop the Docker Container: To stop the running container, use:
docker stop mern-shop-container
-
Remove the Docker Container: To clean up the container:
docker rm mern-shop-container
Run the backend and frontend concurrently:
npm run devRun the app using the following commands:
-
Build the image:
docker build -t mern-shop . -
Run the container:
docker run -p 8000:8000 -p 3000:3000 mern-shop
The backend will be available at http://localhost:8000.
The frontend will be available at http://localhost:3000.
| Command | Description |
|---|---|
npm start |
Starts the backend server. |
npm run client |
Starts the React frontend. |
npm run dev |
Runs both the frontend and backend concurrently. |
npm run build |
Builds the React app for production. |
npm run data:import |
Imports initial sample data into MongoDB. |
npm run data:destroy |
Destroys all data in MongoDB. |
MERN-SHOP/
├── backend/
│ ├── config/ # Database connection with Mongoose
│ ├── controllers/ # Controller functions for handling request logic.
│ ├── data/ # Sample data files for initial database population.
│ ├── middleware/ # Custom middleware (e.g., authentication, error handling, asyncHandler).
│ ├── models/ # Mongoose models(Schemas) for MongoDB collections.
│ ├── routes/ # Express routes for API endpoints.
│ ├── utils/ # Generating Token(JWT)
│ ├── initialDataLoader.js # Script to import and destroy sample data.
│ └── server.js # Main server file to start the backend.
│
├── frontend/
│ ├── node_modules/ # Contains frontend dependencies.
│ ├── public/ # Static files and the `index.html` template.
│ ├── src/
│ │ ├── assets/ # Static assets such as images and styles.
│ │ ├── components/ # Reusable React components (e.g., Navbar, Footer).
│ │ ├── screens/ # React components representing pages/screens.
│ │ ├── slices/ # Redux slices for global state management.
│ │ ├── utils/ # Utility function for cart.
│ │ ├── App.js # Main app component for route management and provider setup.
│ │ ├── constants.js # Application-wide constants (API URLs).
│ │ ├── index.js # Entry point of the React app and Routers.
│ │ ├── Products.js # Component handling product-related logic.
│ │ ├── setupTests.js # Jest setup for testing.
│ │ └── store.js # Redux store configuration.
│
├── uploads/ # Directory for uploaded images (handled by Multer).
├── .env # Environment variables for backend configuration.
├── .gitignore # Git ignore file.
├── Dockerfile # Instructions for building a Docker image
├── .dockerignore # Specifies files and directories to ignore when building Docker images
├── package-lock.json # Lock file for package dependencies.
├── package.json # Project metadata and scripts.
└── README.md # Project documentation.
-
Frontend Proxy: The
proxyfield infrontend/package.jsonensures requests to/apiare proxied to the backend server during development. -
Mock Payment: The payment functionality is mocked and doesn't use real payment gateways.
This project is licensed under the MIT License - see the LICENSE file for details.