Welcome to the E-Commerce Web Application! This repository contains a fully-featured mock shopping platform featuring product catalog search, a live cart drawer with custom delivery fee calculations, detailed payment breakdown, order generation, and shipping status tracking.
🔗 Live Demo: http://ecommerce-project-react-env.eba-euxpdgmw.ap-southeast-2.elasticbeanstalk.com/
The project is split into two main components:
- Frontend Component (React + Vite): A responsive single-page application built with React, styled using Vanilla CSS.
- Backend Component (Node.js + Express + Sequelize): A RESTful API server powered by Express and Sequelize.
Here is a visual walk-through of the main application interfaces:
ecommerce-project/
├── README.md # Root Project Overview (This file)
├── ecommerce-backend/ # Node.js Server & Sequelize Models
│ ├── README.md # Backend Documentation & Developer Guide
│ ├── backend/ # Route Controllers (products, cart, orders, etc.)
│ ├── models/ # Sequelize database models
│ ├── defaultData/ # Mock dataset seeds
│ └── server.js # Backend API application server
├── ecommerce-frontend/ # React Single Page Application (SPA)
│ ├── README.md # Frontend Documentation & Developer Guide
│ ├── public/ # Favicon & assets
│ ├── src/
│ │ ├── components/ # Reusable layouts (Header)
│ │ ├── pages/ # Page components & styles (home, checkout, orders)
│ │ ├── utils/ # Helpers (currency formatting)
│ │ ├── App.jsx # Routing configuration
│ │ └── main.jsx # Entry point
│ ├── index.html # Document Template
│ └── vite.config.js # Dev server API reverse proxies
| Component | Technology | Description |
|---|---|---|
| Frontend | React 19 | Declarative UI library |
| Routing | React Router v7 | Seamless client-side navigation |
| Styling | Vanilla CSS | Flexbox, grid, and media-query responsive layout |
| Backend | Express (Node.js) | Light, fast RESTful API web server framework |
| ORM / DB | Sequelize | ORM used against SQLite locally and MySQL in production |
| Testing | Vitest | Extremely fast unit/integration testing framework |
Both the frontend and backend are deployed together on AWS Elastic Beanstalk, with the database running on Amazon RDS (MySQL).
- Hosting: AWS Elastic Beanstalk (Node.js 24 on 64-bit Amazon Linux 2023), region
ap-southeast-2(Sydney) - Database: Amazon RDS for MySQL (
db.t4g.micro, free tier), same region as the app, connected privately via a VPC security group — not exposed to the public internet - Backend/DB connection: the backend uses Sequelize and automatically switches from a local SQLite file to the RDS MySQL database when
RDS_HOSTNAME,RDS_USERNAME, andRDS_PASSWORDenvironment variables are present (seeecommerce-backend/models/index.js) - Build: the frontend is built with Vite and served as static files by the Express backend, so a single Elastic Beanstalk environment serves both the API and the client
- Environment variables set on Elastic Beanstalk:
RDS_HOSTNAME,RDS_PORT,RDS_DB_NAME,RDS_USERNAME,RDS_PASSWORD,DB_TYPE=mysql
Live app: http://ecommerce-project-react-env.eba-euxpdgmw.ap-southeast-2.elasticbeanstalk.com/
To run the application locally, you will need to start both the backend API server and the frontend client.
- Node.js (version 22+) installed on your machine.
cd ecommerce-backend
npm install
npm run devNote
The backend server runs at http://localhost:3000. Locally, without RDS environment variables set, it falls back to an in-memory SQLite database automatically.
In a new terminal window:
cd ecommerce-frontend
npm install
npm run devNote
The frontend client runs at http://localhost:5173. Open this URL in your browser.
For more detailed information, guides, and API parameters, check out: