A fully functional Amazon-inspired e-commerce web app built with vanilla JavaScript. No frameworks. No shortcuts. Just raw JS doing real work.
| Main Page | Checkout |
|---|---|
 |
 |
| Orders | Tracking |
|---|---|
 |
 |
- Product Listing — Dynamically rendered product grid with ratings, prices, and quantity selectors
- Search — Filter products in real time from the product list
- Add to Cart — Add any product with a selected quantity, persisted via localStorage
- Cart Header — Live cart count updates across all pages
- Checkout Page — Full order review with delivery option selection per item
- Delivery Options — Three shipping tiers with dynamic date calculation and pricing
- Update & Delete — Inline quantity editing and item removal from cart
- Order Summary — Real-time price calculation including shipping and 10% tax
- Place Order — Posts order to backend API, saves to order history, resets cart
- Orders Page — Full order history with items, dates, totals, and order IDs
- Buy it Again — Re-adds any past order item directly to cart
- Package Tracking — Track delivery status per item with a visual progress bar
- Empty States — Clean UI feedback when cart or orders are empty
- HTML5 — Semantic structure across 4 pages
- CSS3 — Custom styling, responsive layout
- Vanilla JavaScript (ES6+) — Modules, classes, async/await, fetch API
- localStorage — Cart and order persistence across sessions
- Day.js — Delivery date formatting and calculation
- REST API — Live backend integration for products, cart, and orders (
supersimplebackend.dev)
| Page | Description |
|---|---|
index.html |
Product listing with search and add to cart |
checkout.html |
Cart review, delivery options, order placement |
orders.html |
Order history with buy again and tracking links |
tracking.html |
Per-item delivery status and progress |
├── data/
│ ├── cart.js # Cart logic, localStorage, API calls
│ ├── products.js # Product data and fetch logic
│ ├── orders.js # Order management
│ └── deliveryOptions.js # Delivery tiers and date calculation
├── scripts/
│ ├── amazon.js # Main page rendering and search
│ ├── checkout/
│ │ ├── orderSummary.js # Cart rendering and interactions
│ │ ├── paymentSummary.js# Price calculation and order placement
│ │ └── checkoutHeader.js# Dynamic checkout header
│ ├── orders.js # Orders page logic
│ └── tracking.js # Tracking page logic
├── styles/ # CSS per page and shared components
├── tests/
├── images/ # Product images and icons
├── index.html
├── checkout.html
├── orders.html
└── tracking.html
This project was built as part of a deep JavaScript learning journey — not just following along, but understanding every line.
Key concepts applied hands-on:
- ES6 Modules — Import/export across a multi-file architecture
- Classes & OOP — Product and Clothing classes with inheritance and polymorphism
- Async/Await & Fetch API — Real API calls for products, cart, and orders
- DOM Manipulation — Dynamic rendering without any framework
- localStorage — Persistent cart and order state across sessions
- Event Delegation — Efficient event handling across dynamically rendered elements
- Error Handling — try/catch with meaningful user-facing feedback
Clone the repo and open index.html in your browser — or just use the live demo.
git clone https://github.com/Kishik-K/Amazon-Clone.git
cd Amazon-CloneNo installs. No build step. Just open and run.
Kishik — @Kishik-K
Built from scratch as part of a self-directed full stack learning journey.
This is a learning project built for educational purposes. Amazon branding and assets belong to Amazon.com, Inc.
Product data, cart, and order API provided by SuperSimpleBackend — a learning-focused backend built for projects like this.