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