{"id":20271916,"url":"https://github.com/hoangsonww/mern-stack-ecommerce-app","last_synced_at":"2025-04-11T04:32:43.034Z","repository":{"id":245690975,"uuid":"818956248","full_name":"hoangsonww/MERN-Stack-Ecommerce-App","owner":"hoangsonww","description":"🛒 Welcome to Fusion Electronics -  a sample full-stack, lightweight, and modern online e-commerce application, built with the MERN (MongoDB, Express, React, Node.js) stack!","archived":false,"fork":false,"pushed_at":"2024-10-23T16:38:09.000Z","size":25371,"stargazers_count":23,"open_issues_count":0,"forks_count":12,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-23T19:51:06.976Z","etag":null,"topics":["express","full-stack-web-development","fullstack-development","javascript","mern","mern-project","mern-stack","mern-stack-development","mongodb","nodejs","react","reactjs"],"latest_commit_sha":null,"homepage":"https://hoangsonww.github.io/MERN-Stack-Ecommerce-App/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoangsonww.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-23T11:06:54.000Z","updated_at":"2024-10-23T16:38:13.000Z","dependencies_parsed_at":"2024-06-26T06:41:05.409Z","dependency_job_id":"14dcc4db-4c60-422a-b875-1dc22126f95b","html_url":"https://github.com/hoangsonww/MERN-Stack-Ecommerce-App","commit_stats":null,"previous_names":["hoangsonww/fullstack-ecommerce-website","hoangsonww/mern-stack-ecommerce-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FMERN-Stack-Ecommerce-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FMERN-Stack-Ecommerce-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FMERN-Stack-Ecommerce-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FMERN-Stack-Ecommerce-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangsonww","download_url":"https://codeload.github.com/hoangsonww/MERN-Stack-Ecommerce-App/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345202,"owners_count":21088231,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","full-stack-web-development","fullstack-development","javascript","mern","mern-project","mern-stack","mern-stack-development","mongodb","nodejs","react","reactjs"],"created_at":"2024-11-14T12:40:00.923Z","updated_at":"2025-04-11T04:32:43.000Z","avatar_url":"https://github.com/hoangsonww.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fusion Electronics: A MERN-Stack E-commerce Application\n\nWelcome 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.\n\n## Table of Contents\n\n1. [Introduction](#introduction)\n2. [Live Deployment](#live-deployment)\n3. [User Interface](#user-interface)\n   - [Home Page](#home-page)\n   - [Full Product List](#full-product-list)\n   - [Cart Page](#cart-page)\n   - [Checkout Page](#checkout-page)\n4. [Features](#features)\n5. [Technologies Used](#technologies-used)\n6. [Getting Started](#getting-started)\n    - [Prerequisites](#prerequisites)\n    - [Installation](#installation)\n7. [Project Structure](#project-structure)\n8. [Running the Application](#running-the-application)\n9. [Testing the APIs](#testing-the-apis)\n10. [Swagger API Documentation](#swagger-api-documentation)\n11. [OpenAPI Specification](#openapi-specification)\n    - [Using the `openapi.yaml` File](#using-the-openapiyaml-file)\n12. [Deployment](#deployment)\n13. [Containerization](#containerization)\n14. [Contributing](#contributing)\n15. [License](#license)\n16. [Creator](#creator)\n\n## Introduction\n\nThis 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.\n\n## Live Deployment\n\nThe application is deployed live on Vercel. You can access it at the following URL: [Fusion Electronics](https://fusion-ecommerce-app.vercel.app).\n\nThe backend server is deployed on Render and can be accessed at the following URL: [Fusion Electronics API](https://mern-stack-ecommerce-app-h5wb.onrender.com/).\n\n\u003e **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.\n\n## User Interface\n\n### Home Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/home-ui.png\" alt=\"Fusion Electronics Homepage\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Full Product List\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/products-ui.png\" alt=\"Fusion Electronics Products List\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Search Results\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/search-results-ui.png\" alt=\"Fusion Electronics Search Results\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Product Details Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/product-details-ui.png\" alt=\"Fusion Electronics Product Details Page\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Cart Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/cart-ui.png\" alt=\"Fusion Electronics Cart Page\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Checkout Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/checkout-ui.png\" alt=\"Fusion Electronics Checkout Page\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Login Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/login-ui.png\" alt=\"Fusion Electronics Login Page\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Register Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/register-ui.png\" alt=\"Fusion Electronics Register Page\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Forgot Password Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/forgot-password-ui.png\" alt=\"Fusion Electronics Forgot Password Page\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Reset Password Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/reset-password-ui.png\" alt=\"Fusion Electronics Reset Password Page\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Order Confirmation\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/order-ui.png\" alt=\"Fusion Electronics Order Success Page\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n### Footer\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/footer.png\" alt=\"Fusion Electronics Footer\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n## Features\n\n- **Product Management:**\n    - View a list of products.\n    - View detailed product information.\n    - Add products to the shopping cart.\n\n- **Shopping Cart:**\n    - View items in the shopping cart.\n    - Remove items from the cart.\n    - Calculate total amount of items in the cart.\n\n- **Checkout Process:**\n    - Enter billing, shipping, and payment information.\n    - Simulate the order creation process on the backend.\n    - Receive confirmation of order success.\n\n## Technologies Used\n\n- **Frontend:**\n    - React.js\n    - Material-UI for styling\n    - Axios for API requests\n    - `react-credit-cards-2` for credit card visualization\n    - `react-router-dom` for routing\n    - `react-hook-form` for form validation\n    - `react-toastify` for toast notifications\n    - Jest and React Testing Library for testing\n\n- **Backend:**\n    - Node.js\n    - Express.js\n    - MongoDB (with Mongoose ODM)\n    - Axios for external API requests\n    - JsonWebToken for user authentication\n    - Bcrypt for password hashing\n    - Dotenv for environment variables\n    - Cors for cross-origin resource sharing\n    - Swagger for API documentation\n    - Nodemon for server hot-reloading\n    - **Middleware**: JWT for securing API endpoints\n\n- **Development Tools:**\n    - Jetbrains WebStorm (IDE)\n    - Postman (for API testing)\n    - Git (version control)\n    - npm (package manager)\n\n## Project Structure\n\nThe project is organized into two main \"stacks\": The backend is in the `backend` directory that hosts all product \u0026 order data and the frontend is in the `root` directory. Here is an overview of the project structure:\n\n```\nfullstack-ecommerce/\n├── backend/                       # Node.js server files\n│   ├── config/                    # Configuration files\n│   │   └── db.js                  # Database connection\n│   ├── models/                    # Mongoose models\n│   │   └── product.js             # Product schema\n│   ├── routes/                    # Route handlers\n│   │   ├── products.js            # Product routes\n│   │   ├── search.js              # Search routes\n│   │   └── checkout.js            # Checkout routes\n│   ├── seed/                      # Database seed data\n│   │   └── products.js            # Product seed data\n│   ├── .env                       # Environment variables\n│   └── index.js                   # Server entry point\n├── public/                        # Frontend public assets\n│   ├── index.html                 # HTML template\n│   ├── manifest.json              # Web app manifest\n│   └── favicon.ico                # Favicon\n├── src/                           # React.js frontend files\n│   ├── components/                # Reusable components\n│   │   ├── CheckoutForm.jsx       # Checkout form component\n│   │   ├── ProductCard.jsx        # Product card component\n│   │   ├── NavigationBar.jsx      # Navigation bar component\n│   │   ├── OrderConfirmation.jsx  # Order confirmation component\n│   │   ├── ProductListing.jsx     # Product listing component\n│   │   ├── SearchResults.jsx      # Search results component\n│   │   └── ShoppingCart.jsx       # Shopping cart component\n│   ├── dev/                       # Development utilities\n│   │   ├── index.js               # Development entry point\n│   │   ├── palette.jsx            # Color palette\n│   │   ├── preview.jsx            # Component preview\n│   │   └── useInitials.js         # Initials hook\n│   ├── pages/                     # Page components\n│   │   ├── Cart.jsx               # Cart page component\n│   │   ├── Checkout.jsx           # Checkout page component\n│   │   ├── Home.jsx               # Home page component\n│   │   ├── ProductDetails.jsx     # Product details page component\n│   │   ├── OrderSuccess.jsx       # Order success page component\n│   │   ├── ProductDetails.jsx     # Product details page component\n│   │   └── Shop.jsx               # Shop page component\n│   ├── App.jsx                    # Main application component\n│   ├── App.css                    # Main application styles\n│   └── index.js                   # React entry point\n├── build/                         # Frontend production build files\n├── tests/                         # Test files\n├── .gitignore                     # Git ignore file\n├── package.json                   # NPM package file\n├── jsconfig.json                  # JS config file\n└── setupProxy.js                  # Proxy configuration\n```\n\n## Getting Started\n\n### Prerequisites\n\nBefore running this project, ensure you have the following installed:\n\n- Node.js (with npm)\n- MongoDB (with either local or remote instance)\n- Git\n\n### Installation\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/hoangsonww/MERN-Stack-Ecommerce-App.git\n   cd MERN-Stack-Ecommerce-App  # Fix the path if necessary\n   ```\n\n2. Install project dependencies:\n   ```bash\n   # Install server (backend) dependencies\n   cd backend\n   npm install\n\n   # Install client (frontend) dependencies\n   cd ..\n   npm install\n   ```\n   \n3. Set up the backend:\n\n   - Create a `.env` file in the `backend/` directory and add the following environment variable (replace the URI with your MongoDB connection string):\n     ```\n     MONGO_URI=mongodb://localhost:27017/Ecommerce-Products\n     JWT_SECRET=your_secret_key\n     ```\n     \n     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.\n \n    - Ensure that your MongoDB server is running. If you're using Mac, you can start the MongoDB server with the following command:\n     ```bash\n     brew services start mongodb-community\n     ``` \n\n   - Seed the database with sample data:\n     ```bash\n     cd backend/seed\n     node productSeeds.js dev\n     ```\n     \n   - Run the backend server: (first `cd` into the backend directory)\n     ```bash\n     cd ..\n     npm start\n     ``` \n     \n4. Set up the frontend:\n   - First, `cd` into the `root` directory if you are not already there:\n     ```bash\n     cd ..\n     ```\n     Or\n        ```bash\n        cd fullstack-ecommerce\n        ```\n   - Start the frontend development server:\n     ```bash\n     npm start\n     ```\n   - **Note:** 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.\n\n## Running the Application\n\n- Open your browser and navigate to `http://localhost:3000` to view the application.\n\n## Testing the APIs\n\n- Simply open your browser and navigate to `http://localhost:5000/api/products` to view the list of products.\n- You can also change the sample data by navigating to `backend/seed/productSeeds.js` and modifying the data there.\n\n## Swagger API Documentation\n\n- The backend server includes Swagger API documentation that can be accessed at `http://localhost:5000/api-docs`.\n- Before accessing the above URL, ensure that the backend server is running.\n- The Swagger UI provides a detailed overview of the API endpoints, request/response schemas, and example requests.\n- If you have everything set up correctly, you should see the Swagger UI documentation page:\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/swagger-ui.png\" alt=\"The MovieVerse App Interface\" style=\"border-radius: 10px\" width=\"100%\"/\u003e\n\u003c/p\u003e\n\n## OpenAPI Specification\n\n### Using the `openapi.yaml` File\n\n1. **View the API Documentation**\n- Open [Swagger Editor](https://editor.swagger.io/).\n- Upload the `openapi.yaml` file or paste its content.\n- Visualize and interact with the API documentation.\n\n2. **Test the API**\n- Import `openapi.yaml` into [Postman](https://www.postman.com/):\n  - Open Postman → Import → Select `openapi.yaml`.\n  - Test the API endpoints directly from Postman.\n- Or use [Swagger UI](https://swagger.io/tools/swagger-ui/):\n  - Provide the file URL or upload it to view and test endpoints.\n\n3. **Generate Client Libraries**\n- Install OpenAPI Generator:\n  ```bash\n  npm install @openapitools/openapi-generator-cli -g\n  ```\n- Generate a client library:\n  ```bash\n  openapi-generator-cli generate -i openapi.yaml -g \u003clanguage\u003e -o ./client\n  ```\n- Replace `\u003clanguage\u003e` with the desired programming language.\n\n4. **Generate Server Stubs**\n- Generate a server stub:\n  ```bash\n  openapi-generator-cli generate -i openapi.yaml -g \u003cframework\u003e -o ./server\n  ```\n- Replace `\u003cframework\u003e` with the desired framework.\n\n5. **Run a Mock Server**\n- Install Prism:\n  ```bash\n  npm install -g @stoplight/prism-cli\n  ```\n- Start the mock server:\n  ```bash\n  prism mock openapi.yaml\n  ```\n\n6. **Validate the OpenAPI File**\n- Use [Swagger Validator](https://validator.swagger.io/):\n  - Upload `openapi.yaml` or paste its content to check for errors.\n\nThis 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.\n\n## Deployment\n\nTo deploy the application:\n\n- Configure deployment settings for both frontend (React) and backend (Node.js) according to your chosen hosting provider (e.g., AWS, Heroku, Netlify).\n\n## Containerization\n\nThis 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:\n```bash\ndocker compose up --build\n```\n\nThis command will create a Docker image for the frontend and backend, and run the application in a containerized environment.\n\n## Contributing\n\nContributions to this project are welcome! Here are some ways you can contribute:\n\n- Report bugs and request features by opening issues.\n- Implement new features or enhancements and submit pull requests.\n- Improve documentation and README files.\n\n## License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n## Creator\n\n- **Son Nguyen** - [hoangsonww](https://github.com/hoangsonww)\n- **Email:** [hoangson091104@gmail.com](mailto:hoangson091104@gmail.com).\n\n---\n\nThank 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.\n\n**Happy coding! 🚀**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fmern-stack-ecommerce-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangsonww%2Fmern-stack-ecommerce-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fmern-stack-ecommerce-app/lists"}