ShopEase - E-Commerce Platform

A modern, responsive e-commerce web application built with HTML, CSS, and JavaScript. ShopEase provides a complete online shopping experience with user authentication, product browsing, cart management, and an admin dashboard.

🚀 Features

Customer Features

• User Authentication: Login, Register, and Profile Management
• Product Browsing: View products with filtering, sorting, and search
• Shopping Cart: Add/remove items, update quantities
• Wishlist: Save favorite products
• Checkout Process: Complete order placement
• Order Tracking: View order history and status
• Product Details: Detailed product information with reviews and ratings
• Responsive Design: Mobile-friendly interface

Admin Features

• Dashboard: Overview of sales, orders, and analytics
• Product Management: Add, edit, delete products
• Category Management: Manage product categories
• Order Management: View and update order status
• Customer Management: View customer information
• Reports & Analytics: Sales reports and statistics

📁 Project Structure

Ecommerce/
├── index.html                 # Home page
├── README.md                  # Project documentation
│
├── css/                       # Stylesheets
│   ├── style.css             # Main styles for customer-facing pages
│   └── admin.css             # Admin panel specific styles
│
├── js/                        # JavaScript files
│   ├── app.js                # Main application logic
│   ├── auth.js               # Authentication functionality
│   ├── cart.js               # Shopping cart management
│   ├── products.js           # Product display and filtering
│   ├── data.js               # Sample data and API calls
│   ├── utils.js              # Utility functions
│   ├── admin.js              # Admin panel functionality
│   └── admin-dashboard.js    # Admin dashboard logic
│
├── images/                    # Image assets
│   ├── products/             # Product images
│   ├── categories/           # Category images
│   └── icons/                # Icons and logos
│
├── pages/                     # Customer pages
│   ├── products.html         # Product listing page
│   ├── product-detail.html   # Single product details
│   ├── cart.html             # Shopping cart
│   ├── checkout.html         # Checkout process
│   ├── login.html            # User login
│   ├── register.html         # User registration
│   ├── profile.html          # User profile
│   └── orders.html           # Order history
│
└── admin/                     # Admin panel pages
    ├── dashboard.html        # Admin dashboard
    ├── products.html         # Product management
    ├── categories.html       # Category management
    └── orders.html           # Order management

🛠️ Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling with Flexbox and Grid
• JavaScript (ES6+): Client-side functionality
• Font Awesome: Icons
• LocalStorage: Data persistence
• Chart.js: Admin dashboard charts

🎨 Design Features

• Modern UI: Clean and intuitive interface
• Responsive Design: Works on all devices (mobile, tablet, desktop)
• CSS Variables: Easy theme customization
• Smooth Animations: Enhanced user experience
• Accessible: WCAG compliant

📦 Key Components

CSS Architecture

• Global Styles: Variables, typography, reset
• Layout: Container, grid, flexbox utilities
• Components: Buttons, cards, forms, tables
• Sections: Header, hero, products, footer
• Admin Panel: Sidebar, dashboard, data tables
• Responsive: Mobile-first approach

JavaScript Modules

• Authentication: User login/register, session management
• Cart Management: Add to cart, update quantities, checkout
• Product Display: Dynamic rendering, filtering, sorting
• Admin Functions: CRUD operations for products and orders
• Utilities: Helper functions, data formatting

🚦 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Text editor or IDE
• Local development server (optional)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/ecommerce.git
   cd ecommerce

2. Open the project

   • Simply open index.html in your browser
   • Or use a local development server:

     # Using Python
     python -m http.server 8000
     
     # Using Node.js (http-server)
     npx http-server

3. Access the application

   • Customer site: http://localhost:8000/index.html
   • Admin panel: http://localhost:8000/admin/dashboard.html

Default Credentials

• Customer Account:

  • Email: user@example.com
  • Password: password123

• Admin Account:

  • Email: admin@shopease.com
  • Password: admin123

📱 Pages Overview

Customer Pages

1. Home (index.html): Hero section, featured products, categories
2. Products (pages/products.html): Product grid with filters
3. Product Detail (pages/product-detail.html): Single product view
4. Cart (pages/cart.html): Shopping cart management
5. Checkout (pages/checkout.html): Order placement
6. Login/Register (pages/login.html, pages/register.html): Authentication
7. Profile (pages/profile.html): User account management
8. Orders (pages/orders.html): Order history

Admin Pages

1. Dashboard (admin/dashboard.html): Analytics and overview
2. Products (admin/products.html): Product CRUD operations
3. Categories (admin/categories.html): Category management
4. Orders (admin/orders.html): Order management

🎯 Features in Detail

Product Filtering & Sorting

• Filter by category, price range, rating
• Sort by price, name, popularity, newest
• Search functionality
• Grid/List view toggle

Shopping Cart

• Add/remove items
• Update quantities
• Calculate totals with tax and shipping
• Persistent storage (LocalStorage)
• Cart count badge

Admin Dashboard

• Sales overview charts
• Order statistics
• Top-selling products
• Low stock alerts
• Recent orders table

🔧 Customization

Colors

Edit CSS variables in css/style.css:

:root {
    --primary-color: #2563eb;
    --secondary-color: #10b981;
    /* Add your colors */
}

Content

• Update product data in js/data.js
• Modify text content in HTML files
• Replace images in images/ folder

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

This project is open source and available under the MIT License.

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Contact

For questions or support, please contact:

• Email: support@shopease.com
• Website: www.shopease.com

🙏 Acknowledgments

• Font Awesome for icons
• Unsplash for sample images
• Chart.js for admin dashboard charts

---

Made with ❤️ by ShopEase Team