JavaScript E-Commerce Checkout Practice App
This project is a vanilla JavaScript e-commerce checkout system built to practice front-end architecture, state management, and modular code organization. It simulates a simplified Amazon-style shopping and checkout experience using browser APIs, object-oriented JavaScript, and a mock backend.
The goal of this project is learning and demonstration, not production use.
Features
Shopping Cart
Add products to cart
Update quantities
Remove items
Persist cart data in localStorage
Delivery Options
Multiple shipping speeds
Dynamic delivery date calculation (skips weekends)
Shipping cost updates in real time
Order Summary
Displays cart items with images, prices, and quantities
Editable quantities with validation
Delivery option selection per item
Payment Summary
Subtotal, shipping, tax, and total calculation
“Place Order” flow
Orders stored locally after checkout
Object-Oriented Architecture
Product, Clothing, and Appliance classes
Cart class encapsulating cart behavior
Clear separation between data, UI rendering, and utilities
Mock Backend Integration
Fetches product and cart data from https://supersimplebackend.dev
Submits orders via fetch (POST request)
Tech Stack
JavaScript (ES Modules)
HTML & CSS
Browser APIs
localStorage
fetch
XMLHttpRequest (for learning comparison)
Day.js (for delivery date calculations)
No frameworks, no build tools — this project focuses on core JavaScript fundamentals.
Project Structure . ├── data/ │ ├── products.js # Product models and product loading │ ├── cart.js # Functional cart implementation │ ├── cart-class.js # OOP cart implementation │ ├── deliveryOptions.js # Shipping options and delivery logic │ ├── orders.js # Order storage and retrieval │ ├── scripts/ │ ├── checkout/ │ │ ├── orderSummary.js # Renders cart + delivery options │ │ ├── paymentSummary.js# Totals, tax, and order placement │ │ └── checkoutHeader.js# Header cart quantity display │ └── utils/ │ ├── money.js # Currency formatting │ └── isWeekend.js # Date utility │ ├── images/ # Product images, icons, ratings ├── amazon.html # Main storefront page ├── checkout.html # Checkout page ├── orders.html # Orders history page └── README.md
How It Works Products
Products are fetched from a remote API and mapped into class instances.
Special product types (Clothing, Appliance) extend the base Product class and render extra UI.
Cart
Cart state is stored in localStorage.
Two implementations exist:
Functional approach (cart.js)
OOP approach (cart-class.js) — this is the primary version used
Supports multiple carts using different storage keys.
Checkout Flow
User adds items to cart
Cart data persists across page reloads
Checkout page renders:
Order summary
Delivery options
Payment summary
Placing an order:
Sends data to mock backend
Saves order locally
Redirects to orders page
Running the Project
Because this project uses ES modules, you’ll need to serve it from a local server.
Option 1: VS Code Live Server
Install Live Server
Right-click amazon.html
Select Open with Live Server
Option 2: Simple HTTP Server npx serve .
Then open the provided local URL in your browser.
Educational Goals
This project was built to practice:
JavaScript modules
Object-oriented programming
State persistence with localStorage
DOM rendering patterns
Event delegation
Fetch API and async/await
Separation of concerns
Future Improvements (Ideas)
Product search and filtering
Quantity input validation UI
User authentication
Real backend integration
Payment gateway simulation
Unit tests
License
This project is for educational and portfolio use only.