Modern Bilingual E-Commerce Platform (ecommerce-platform)

Live Demo: https://reda1472.github.io/ecommerce-platform/

---

1. Project Title

Aura Commerce: Modern Bilingual E-Commerce Platform (ecommerce-platform)

2. One-Line Description

A production-ready e-commerce web platform featuring real-time category filtering, reactive shopping cart state, discount coupon validation, and streamlined multi-step checkout with full Arabic RTL support.

3. Project Purpose

This repository demonstrates consumer-facing e-commerce architecture. It highlights reactive state management in vanilla web standards, client-side pricing and VAT calculations, promotional coupon engine, customer wishlist persistence, and bidirectional (LTR/RTL) layout design.

4. Live Demo

• Live URL: https://reda1472.github.io/ecommerce-platform/
• Demo Promo Code: Use code PROMO2026 in the shopping cart for 15% instant discount.

5. Screenshots

(Real interface captures from the running application)

Modern Product Showcase	Interactive Cart Drawer & Coupon Engine
Category pills, star ratings, discount tags, and quick-view actions	Live subtotal, coupon discount calculation, tax, and free shipping tracker

Multi-Step Checkout Modal	Arabic RTL Mode & Cairo Typography
Shipping address validation, payment selector, and printable receipt	Native right-to-left layout with Arabic typography and dark theme

6. Features

• Dynamic Product Catalog: Multi-field instant search, category filtering, and sorting (Price Low/High, Rating, Featured).
• Reactive Shopping Cart Drawer: Real-time quantity adjustments, stock cap protection, subtotal/tax/shipping calculations.
• Promotional Coupon System: Automatic discount application with code validation (PROMO2026, REDA10).
• Product Quick View Modal: Instant preview modal with full specifications, SKU details, and direct cart actions.
• Multi-Step Checkout Flow: Shipping address validation, payment method selection, and digital order receipt confirmation with printable invoice format.
• Customer Wishlist: LocalStorage-persisted favorite products toggle.
• First-Class Arabic RTL & Theming: Native bidirectional layout using CSS logical properties with Dark and Light mode toggles.
• 100% Synthetic Data: All products, prices, SKUs, and reviews use fictional demonstration data.

7. Tech Stack

• Frontend Layer: Semantic HTML5, CSS Custom Properties & Grid/Flexbox, Vanilla JavaScript (ES6+ Modules).
• Typography: Inter (Latin), Cairo (Arabic), JetBrains Mono (Financials & SKUs).
• Storage & State: Reactive state engine with LocalStorage synchronization.

8. Architecture

┌────────────────────────────────────────────────────────┐
│                   Storefront UI Layer                  │
│       (index.html, css/ecommerce.css, css/rtl.css)     │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│                 Application Controller                 │
│              (js/app.js, js/i18n.js)                   │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│     Reactive Cart, Wishlist & Financial Calculations   │
│         (js/store.js - Totals, Taxes, Discounts)       │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│             Synthetic Product Catalog Data             │
│                     (js/data.js)                       │
└────────────────────────────────────────────────────────┘

9. Project Structure

ecommerce-platform/
├── index.html                  # Main Storefront & Checkout Application
├── css/
│   ├── themes.css              # Dark & light design system tokens
│   ├── main.css                # Base reset and fluid typography
│   ├── ecommerce.css           # Product grid, cart drawer, checkout modal
│   └── rtl.css                 # Dedicated Arabic RTL alignments
├── js/
│   ├── data.js                 # 100% synthetic product catalog & coupons
│   ├── i18n.js                 # English / Arabic translation engine
│   ├── theme.js                # Theme switcher & OS listener
│   ├── store.js                # Reactive shopping cart, wishlist, and orders
│   └── app.js                  # Storefront controllers, quick view, and checkout
├── LICENSE                     # MIT License
├── .gitignore
└── README.md                   # Full 17-point standard documentation

10. Installation

# Clone the repository
git clone https://github.com/reda1472/ecommerce-platform.git

# Navigate into the project directory
cd ecommerce-platform

11. Environment Variables

This web application runs directly in any modern browser without external API keys or configuration files.

12. Development Commands

Preview locally with Python or PHP built-in servers:

# Using Python:
python -m http.server 8082

# Using PHP:
php -S localhost:8082

Open http://localhost:8082 in your browser.

13. Production Build

Zero build steps required. The codebase is production-ready and can be served directly from GitHub Pages, Vercel, Netlify, or Apache/Nginx.

14. Usage

• Browse & Filter: Click category pills or use the search bar to filter items.
• Quick View: Click Quick View on any product card for detailed specifications.
• Add to Cart: Click Add to Cart to trigger the reactive cart drawer.
• Apply Coupon: Enter PROMO2026 in the cart drawer and click Apply for a 15% discount.
• Checkout: Click Proceed to Secure Checkout, complete the shipping form, and submit to generate an order invoice.

15. Roadmap

• Initial release with full storefront and cart drawer.
• Full bilingual (EN / AR RTL) support.
• Multi-step checkout simulation and order confirmation.
• Wishlist and discount coupon engine.
• Add customer review submission modal.

16. Known Limitations

• Orders and cart state persist in the browser's localStorage for the live client demo.

17. License

Distributed under the MIT License. See LICENSE for details.