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). Additionally, it also includes features such as user authentication, checkout process, product recommendations with vector search, and more! 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.
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 comprehensive validations for user inputs and simulates the checkout process on the backend.
The application is designed to be user-friendly and responsive, providing a seamless shopping experience. It also includes features such as product search, user authentication, and order confirmation. Additionally, it uses Weaviate for product recommendations based on vector search, enhancing the user experience by suggesting relevant products.
The application is deployed live on Vercel. You can access it at the following URL: Fusion Electronics App.
The primary backend server is deployed on Vercel and can be accessed at the following URL: Fusion Electronics API.
The backup 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.
[!CAUTION] Warning: We are currently on the free trial of Weaviate. Once we run out of the free credits, the product recommendations feature will not work until we upgrade to a paid plan (but Iβm a college student, so I donβt have the budget to do that right nowβ¦) However, you can still run the application locally and set up your own Weaviate instance to enable product recommendations - please refer to the Product Recommendations with Vector Database section for more details.
react-credit-cards-2
for credit card visualizationreact-router-dom
for routingreact-hook-form
for form validationreact-toastify
for toast notificationsThe 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
β βββ docs/
β β βββ swagger.js # Swagger API documentation setup
β βββ models/ # Mongoose models
β β βββ user.js # User schema
β β βββ product.js # Product schema
β βββ routes/ # Route handlers
β β βββ products.js # Product routes
β β βββ search.js # Search routes
β β βββ checkout.js # Checkout routes
β βββ middleware/ # Middleware functions
β β βββ auth.js # Authentication middleware
β βββ scripts/ # Scripts for various tasks
β β βββ build-faiss-index.js # Script to build FAISS index
β β βββ search-faiss-index.js # Script to search FAISS index
β β βββ query-weaviate.js # Script to query Weaviate
β β βββ weaviate-upsert.js # Script to upsert products to Weaviate
β β βββ sync-weaviate.js # Script to synchronize products with Weaviate
β βββ seed/ # Database seed data
β β βββ productSeeds.js # Product seed data
β βββ weaviateClient.js # Weaviate client setup
β βββ faiss.sh # FAISS index setup script
β βββ .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
(... and more files not listed here ...)
Before running this project, ensure you have the following installed:
git clone https://github.com/hoangsonww/MERN-Stack-Ecommerce-App.git
cd MERN-Stack-Ecommerce-App # Fix the path if necessary
# Install server (backend) dependencies
cd backend
npm install
# Note: If you encounter any issues with the backend/package-lock.json not updating, run the following command from root directory:
npm install --no-workspaces --prefix backend
# Install client (frontend) dependencies
cd ..
npm install
Set up the backend:
.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.
brew services start mongodb-community
cd backend/seed
node productSeeds.js dev
cd
into the backend directory)
cd ..
npm start
cd
into the root
directory if you are not already there:
cd ..
Or
cd fullstack-ecommerce
npm start
[!TIP] The frontend server will run on
http://localhost:3000
by default. If you encounter any errors when starting related to thereact-credit-cards-2
package, it is OK to just ignore them as the application will still run correctly.
http://localhost:3000
to view the application.The application uses Weaviate & FAISS as vector databases/stores to provide product recommendations based on vector search. The product data is indexed in Weaviate, allowing for efficient similarity searches and recommendations.
To set up Weaviate for product recommendations, follow these steps:
.env
file in the backend/
directory with your Weaviate API endpoint and API key:
WEAVIATE_HOST=https://your-weaviate-instance.weaviate.network
WEAVIATE_API_KEY=your_weaviate_api_key
cd backend
npm run weaviate-upsert
npm run sync-weaviate
npm start
Additionally, to set up FAISS & LangChain for efficient similarity search, you can run the following commands in the backend/scripts/
directory:
cd backend
node build-faiss-index.js
npm run faiss-search -- "your search text" 5
Replace "your search text"
with the text you want to search for, and 5
with the number of results you want to retrieve. It should return something like:
π Top 5 results for "your search text 5":
1. id=6874a44ee237afdff3374d27 distance=1.2893
2. id=6874a44ee237afdff3374d25 distance=1.3328
3. id=6874a44ee237afdff3374d23 distance=1.3522
4. id=6874a44ee237afdff3374d2e distance=1.3739
5. id=6874a44ee237afdff3374d28 distance=1.3753
Now, the application will use Weaviate & FAISS & LangChain to provide product recommendations based on vector search. When users view a product, they will see recommended products based on similarity to the viewed product. Try going to the product details page of any product, and you will see a list of recommended products based on the current product!
[!TIP] For now, the free trial of Weaviate would suffice for testing purposes. However, if you want to run your own Weaviate instance, you can follow the Weaviate documentation to set it up locally or on a cloud provider.
http://localhost:5000/api/products
to view the list of products.backend/seed/productSeeds.js
and modifying the data there.We have implemented unit and integration tests for the application using Jest and React Testing Library. To run the tests, follow these steps:
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
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 thebackend
androot
(frontend) directories to install all necessary dependencies.Also, if the issue persists, try removing the
node_modules
directory and thepackage-lock.json
file in both directories, and then runnpm install
again to reinstall all dependencies.
http://localhost:5000/api-docs
.
openapi.yaml
Fileopenapi.yaml
file or paste its content.openapi.yaml
into Postman:
openapi.yaml
.npm install @openapitools/openapi-generator-cli -g
openapi-generator-cli generate -i openapi.yaml -g <language> -o ./client
<language>
with the desired programming language.openapi-generator-cli generate -i openapi.yaml -g <framework> -o ./server
<framework>
with the desired framework.npm install -g @stoplight/prism-cli
prism mock openapi.yaml
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.
To deploy the application:
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.
This project includes a GitHub Actions workflow for continuous integration and deployment. The workflow is defined in the .github/workflows/ci.yml
file and will automatically run tests and build the application on every push or pull request.
Contributions to this project are welcome! Here are some ways you can contribute:
This project is licensed under the MIT License - see the LICENSE file for details.
Fusion Electronics was created with β€οΈ by:
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! π