SHOPEASY - Modern E-Commerce Website

A fully interactive, responsive e-commerce website built with plain HTML, Tailwind CSS, and vanilla JavaScript.

---

Project Overview

SHOPEASY is a complete e-commerce solution featuring:

• Product Catalog with multiple categories
• Shopping Cart with localStorage persistence
• User Authentication simulation
• Live Chatbot with rule-based responses
• Responsive Design for all devices
• Smooth Animations and hover effects

---

Folder Structure

SHOPEASY/
├── index.html              # Landing page with CTA
├── homepage1.html          # Product showcase with hover animations
├── homepage2.html          # Coalition page (links to all pages)
├── dairy.html              # Dairy products category
├── vegetables.html         # Vegetables category
├── bread.html              # Bread & bakery category
├── cakes-desserts.html     # Cakes & desserts category
├── fruits.html             # Fresh fruits category
├── frozen-meat.html        # Frozen meat products
├── frozen-fish.html        # Frozen fish & seafood
├── faq.html                # FAQ with accordion
├── login.html              # User login page
├── signup.html             # User registration page
├── cart1.html              # Cart (card-based layout)
├── cart2.html              # Cart (table-based layout)
├── account.html            # User account dashboard
├── contact.html            # Contact form & info
├── checkout.html           # Checkout & payment
├── chatbot.html            # Live support chatbot
├── script.js               # All JavaScript functionality
├── README.md               # This file
└── Assets/                 # Images and media files
    └── (product images, icons, etc.)

---

Features List

Core Features

• Responsive design (mobile + desktop)
• Product catalog with 7 categories
• Shopping cart with localStorage
• User authentication (simulated)
• Form validation
• Interactive chatbot
• Smooth hover animations
• Professional UI/UX

Cart System

• Add to cart functionality
• Quantity increment/decrement
• Remove items
• Total price calculation
• Cart counter badge
• Persist across page refresh

Authentication

• User registration
• User login
• Session management
• Duplicate email prevention
• Account page with user info

Chatbot

• Rule-based keyword detection
• Predefined responses
• Auto-scroll chat window
• Timestamp messages
• Keywords: order, refund, delivery, account, help

Forms

• Contact form validation
• Login form validation
• Signup form validation
• Checkout form validation
• Email format validation
• Password length validation

---

How to Run Locally

Option 1: Direct File Open

1. Download/clone the project
2. Navigate to the SHOPEASY folder
3. Open index.html in your browser

Option 2: Local Server (Recommended)

Using Python:

cd SHOPEASY
python -m http.server 8000

Then open http://localhost:8000

Using Node.js (http-server):

cd SHOPEASY
npx http-server -p 8000

Then open http://localhost:8000

Using VS Code:

1. Install "Live Server" extension
2. Right-click on index.html
3. Select "Open with Live Server"

---

Deployment Guide

Netlify Deployment

1. Create a zip file of the SHOPEASY folder
2. Go to Netlify
3. Drag and drop the zip file to deploy
4. Or use GitHub integration:
   • Push code to GitHub
   • Connect repo to Netlify
   • Deploy automatically

GitHub Pages Deployment

1. Create a new repository on GitHub
2. Push the SHOPEASY folder to the repo
3. Go to Settings > Pages
4. Select source branch (main/master)
5. Your site will be live at https://username.github.io/repo-name

---

Technology Stack

• HTML5 - Semantic markup
• Tailwind CSS - Utility-first CSS framework (CDN)
• JavaScript (ES6+) - All interactivity
• localStorage - Client-side data persistence
• Font Awesome - Icons (CDN)

---

Color Scheme

Color	Hex Code	Usage
White	#FFFFFF	Main background
Orange	#F97316	Accents, highlights
Green	#22C55E	Buttons, success states
Black	#000000	Hover effects, shadows
Gray	#6B7280	Secondary text

---

Future Improvements

• Integration with real payment gateway (Stripe/PayPal)
• Backend API for user management
• Product search functionality
• Product filtering and sorting
• Wishlist feature
• Order history tracking
• Email notifications
• Product reviews and ratings
• Social media sharing
• Multi-language support
• Dark mode toggle
• Progressive Web App (PWA)

---

Browser Compatibility

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

---

License

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

---

Author

Built with by the SHOPEASY Development Team

---

Support

For support, email support@shopeasy.com or use our live chat feature.