MERN-Stack-Ecommerce-App

Fusion Electronics: A MERN-Stack E-commerce Application

Welcome to Fusion Electronics, a MERN-Stack E-commerce Application! This project is a working demo of a full-stack web application that was built using the MERN stack (MongoDB, Express.js, React.js, Node.js). It aims to provide a comprehensive example of building a modern e-commerce platform, covering frontend user interface, backend server logic, database management, and integration with third-party libraries.

Fusion Electronics Logo

Table of Contents

  1. Introduction
  2. Live Deployment
  3. User Interface
  4. Features
  5. Technologies Used
  6. Getting Started
  7. Project Structure
  8. Running the Application
  9. Testing the APIs
  10. Unit & Integration Testing
  11. Swagger API Documentation
  12. OpenAPI Specification
  13. Deployment
  14. Containerization
  15. Contributing
  16. License
  17. Creator

Introduction

This project is a demonstration of building an e-commerce application using the MERN stack, which consists of MongoDB (database), Express.js (server), React.js (frontend), and Node.js (runtime environment). The application allows users to browse products, add them to a shopping cart, proceed to checkout, and simulate the order processing. It includes basic validations for user inputs and simulates the checkout process on the backend.

React badge Node.js badge Express badge MongoDB badge Jest badge Material UI badge Vercel badge Render badge Swagger badge Docker badge Git badge Postman badge Axios badge React Router badge React Hook Form badge React Toastify badge

Live Deployment

The application is deployed live on Vercel. You can access it at the following URL: Fusion Electronics App.

The backend server is deployed on Render and can be accessed at the following URL: Fusion Electronics API.

[!IMPORTANT] Note: The backend server may take a few seconds to wake up if it has been inactive for a while. For your information, it is hosted on the free tier of Render, with 0.1 CPU and 512 MB of memory only, so it may take a bit longer to respond to requests, especially after periods of inactivity.

User Interface

Home Page

Fusion Electronics Homepage

Full Product List

Fusion Electronics Products List

Search Results

Fusion Electronics Search Results

Product Details Page

Fusion Electronics Product Details Page

Cart Page

Fusion Electronics Cart Page

Checkout Page

Fusion Electronics Checkout Page

Login Page

Fusion Electronics Login Page

Register Page

Fusion Electronics Register Page

Forgot Password Page

Fusion Electronics Forgot Password Page

Reset Password Page

Fusion Electronics Reset Password Page

Order Confirmation

Fusion Electronics Order Success Page

Fusion Electronics Footer

Features

Technologies Used

Project Structure

The project is organized into two main β€œstacks”: The backend is in the backend directory that hosts all product & order data and the frontend is in the root directory. Here is an overview of the project structure:

fullstack-ecommerce/
β”œβ”€β”€ backend/                       # Node.js server files
β”‚   β”œβ”€β”€ config/                    # Configuration files
β”‚   β”‚   └── db.js                  # Database connection
β”‚   β”œβ”€β”€ models/                    # Mongoose models
β”‚   β”‚   └── product.js             # Product schema
β”‚   β”œβ”€β”€ routes/                    # Route handlers
β”‚   β”‚   β”œβ”€β”€ products.js            # Product routes
β”‚   β”‚   β”œβ”€β”€ search.js              # Search routes
β”‚   β”‚   └── checkout.js            # Checkout routes
β”‚   β”œβ”€β”€ seed/                      # Database seed data
β”‚   β”‚   └── products.js            # Product seed data
β”‚   β”œβ”€β”€ .env                       # Environment variables
β”‚   └── index.js                   # Server entry point
β”œβ”€β”€ public/                        # Frontend public assets
β”‚   β”œβ”€β”€ index.html                 # HTML template
β”‚   β”œβ”€β”€ manifest.json              # Web app manifest
β”‚   └── favicon.ico                # Favicon
β”œβ”€β”€ src/                           # React.js frontend files
β”‚   β”œβ”€β”€ components/                # Reusable components
β”‚   β”‚   β”œβ”€β”€ CheckoutForm.jsx       # Checkout form component
β”‚   β”‚   β”œβ”€β”€ ProductCard.jsx        # Product card component
β”‚   β”‚   β”œβ”€β”€ NavigationBar.jsx      # Navigation bar component
β”‚   β”‚   β”œβ”€β”€ OrderConfirmation.jsx  # Order confirmation component
β”‚   β”‚   β”œβ”€β”€ ProductListing.jsx     # Product listing component
β”‚   β”‚   β”œβ”€β”€ SearchResults.jsx      # Search results component
β”‚   β”‚   └── ShoppingCart.jsx       # Shopping cart component
β”‚   β”œβ”€β”€ dev/                       # Development utilities
β”‚   β”‚   β”œβ”€β”€ index.js               # Development entry point
β”‚   β”‚   β”œβ”€β”€ palette.jsx            # Color palette
β”‚   β”‚   β”œβ”€β”€ preview.jsx            # Component preview
β”‚   β”‚   └── useInitials.js         # Initials hook
β”‚   β”œβ”€β”€ pages/                     # Page components
β”‚   β”‚   β”œβ”€β”€ Cart.jsx               # Cart page component
β”‚   β”‚   β”œβ”€β”€ Checkout.jsx           # Checkout page component
β”‚   β”‚   β”œβ”€β”€ Home.jsx               # Home page component
β”‚   β”‚   β”œβ”€β”€ ProductDetails.jsx     # Product details page component
β”‚   β”‚   β”œβ”€β”€ OrderSuccess.jsx       # Order success page component
β”‚   β”‚   β”œβ”€β”€ ProductDetails.jsx     # Product details page component
β”‚   β”‚   └── Shop.jsx               # Shop page component
β”‚   β”œβ”€β”€ App.jsx                    # Main application component
β”‚   β”œβ”€β”€ App.css                    # Main application styles
β”‚   └── index.js                   # React entry point
β”œβ”€β”€ build/                         # Frontend production build files
β”œβ”€β”€ tests/                         # Test files
β”œβ”€β”€ .gitignore                     # Git ignore file
β”œβ”€β”€ package.json                   # NPM package file
β”œβ”€β”€ jsconfig.json                  # JS config file
└── setupProxy.js                  # Proxy configuration

Getting Started

Prerequisites

Before running this project, ensure you have the following installed:

Installation

  1. Clone the repository:
    git clone https://github.com/hoangsonww/MERN-Stack-Ecommerce-App.git
    cd MERN-Stack-Ecommerce-App  # Fix the path if necessary
    
  2. Install project dependencies:
    # Install server (backend) dependencies
    cd backend
    npm install
    
    # Install client (frontend) dependencies
    cd ..
    npm install
    
  3. Set up the backend:

    • Create a .env file in the backend/ directory and add the following environment variable (replace the URI with your MongoDB connection string):
      MONGO_URI=mongodb://localhost:27017/Ecommerce-Products
      JWT_SECRET=your_secret_key
      

      For your information, I am using MongoDB Atlas for this project. You can create a free account and get your connection string from there if you want to deploy the application to the cloud.

    • Ensure that your MongoDB server is running. If you’re using Mac, you can start the MongoDB server with the following command:
        brew services start mongodb-community
      
    • Seed the database with sample data:
      cd backend/seed
      node productSeeds.js dev
      
    • Run the backend server: (first cd into the backend directory)
      cd ..
      npm start
      
  4. Set up the frontend:
    • First, cd into the root directory if you are not already there:
      cd ..
      

      Or

         cd fullstack-ecommerce
      
    • Start the frontend development server:
      npm start
      

      [!TIP] The frontend server will run on http://localhost:3000 by default. If you encounter any errors when starting related to the react-credit-cards-2 package, it is OK to just ignore them as the application will still run correctly.

Running the Application

Testing the APIs

Unit & Integration Testing

We have implemented unit and integration tests for the application using Jest and React Testing Library. To run the tests, follow these steps:

Backend Tests

cd backend

# Run backend tests (default mode)
npm run test

# Run frontend tests (watch mode - this will automatically re-run tests on file changes)
npm run test:watch

# Run frontend tests (coverage mode - this will generate a coverage report)
npm run test:coverage

Frontend Tests

cd .. # if you are still in the backend directory

# Run frontend tests (default mode)
npm run test

# Run frontend tests (watch mode - this will automatically re-run tests on file changes)
npm run test:watch

# Run frontend tests (coverage mode - this will generate a coverage report)
npm run test:coverage

[!NOTE] If you encounter any issues when running the tests, ensure that you have run npm install in both the backend and root (frontend) directories to install all necessary dependencies.

Also, if the issue persists, try removing the node_modules directory and the package-lock.json file in both directories, and then run npm install again to reinstall all dependencies.

Swagger API Documentation

The MovieVerse App Interface

OpenAPI Specification

Using the openapi.yaml File

  1. View the API Documentation
    • Open Swagger Editor.
    • Upload the openapi.yaml file or paste its content.
    • Visualize and interact with the API documentation.
  2. Test the API
    • Import openapi.yaml into Postman:
      • Open Postman β†’ Import β†’ Select openapi.yaml.
      • Test the API endpoints directly from Postman.
    • Or use Swagger UI:
      • Provide the file URL or upload it to view and test endpoints.
  3. Generate Client Libraries
    • Install OpenAPI Generator:
      npm install @openapitools/openapi-generator-cli -g
      
    • Generate a client library:
      openapi-generator-cli generate -i openapi.yaml -g <language> -o ./client
      
    • Replace <language> with the desired programming language.
  4. Generate Server Stubs
    • Generate a server stub:
      openapi-generator-cli generate -i openapi.yaml -g <framework> -o ./server
      
    • Replace <framework> with the desired framework.
  5. Run a Mock Server
    • Install Prism:
      npm install -g @stoplight/prism-cli
      
    • Start the mock server:
      prism mock openapi.yaml
      
  6. Validate the OpenAPI File
    • Use Swagger Validator:
      • Upload openapi.yaml or paste its content to check for errors.

This guide enables you to view, test, and utilize the API. You can generate client libraries, server stubs, and run a mock server using the OpenAPI Specification.

Deployment

To deploy the application:

Containerization

This project can be containerized using Docker. First, ensure that Docker Desktop is running on your system. Then, to create a Docker image, run the following command:

docker compose up --build

This command will create a Docker image for the frontend and backend, and run the application in a containerized environment.

Contributing

Contributions to this project are welcome! Here are some ways you can contribute:

License

This project is licensed under the MIT License - see the LICENSE file for details.

Creator


Thank you for exploring Fusion Electronics - a MERN Stack E-commerce Application! If you have any questions or feedback, feel free to reach out or open an issue.

Happy coding! πŸš€