A fully responsive, modern ecommerce website built with HTML5, CSS3, and JavaScript. This project demonstrates frontend development skills with interactive features, smooth animations, and a professional user interface.
- Shopping Cart: Add/remove items with localStorage persistence
- Wishlist: Save favorite products with heart icon animations
- Product Search: Real-time search functionality
- Product Filtering: Filter by categories and price
- Product Details: Detailed product pages with image gallery
- User Authentication: Login/Register forms
- Responsive Design: Mobile-first approach for all devices
- Modern Design: Clean, professional interface
- Smooth Animations: CSS transitions and hover effects
- Interactive Elements: Dynamic product cards and buttons
- Loading States: Visual feedback for user actions
- Notification System: Toast notifications for cart/wishlist actions
- Image Gallery: Product image carousel with Swiper.js
- Homepage: Hero section, featured products, categories
- Shop: Product catalog with filtering options
- Product Details: Individual product information
- Shopping Cart: Cart management and checkout preview
- Wishlist: Saved products management
- User Account: Profile management and order history
- Login/Register: User authentication forms
- Compare Products: Side-by-side product comparison
- Checkout: Order placement form
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure and accessibility |
| CSS3 | Styling, animations, and responsive design |
| JavaScript ES6+ | Interactive functionality and DOM manipulation |
| Swiper.js | Product carousels and image galleries |
| LocalStorage | Data persistence for cart and wishlist |
| CSS Grid & Flexbox | Modern layout techniques |
| CSS Variables | Consistent theming system |
ecommerce-website/
├── index.html # Homepage
├── shop.html # Product catalog
├── cart.html # Shopping cart
├── wishlist.html # Wishlist page
├── details.html # Product details
├── accounts.html # User account
├── login-register.html # Authentication
├── compare.html # Product comparison
├── checkout.html # Checkout form
├── assets/
│ ├── css/
│ │ └── styles.css # Main stylesheet
│ ├── js/
│ │ └── main.js # JavaScript functionality
│ └── img/
│ ├── favicon.ico # Site favicon
│ ├── site.webmanifest # Web app manifest
│ └── [product-images] # Product and UI images
└── README.md # Project documentation
-
Clone the repository
git clone https://github.com/yourusername/evara-ecommerce.git cd evara-ecommerce -
Open in browser
# Option 1: Direct file opening open index.html # Option 2: Using Live Server (recommended) # Install Live Server extension in VS Code # Right-click on index.html → "Open with Live Server"
-
For development
# No build process required - vanilla HTML/CSS/JS # Simply edit files and refresh browser
- Add/remove products with smooth animations
- Quantity management with real-time total calculation
- Persistent storage using localStorage
- Visual cart counter in header
- One-click add/remove with heart icon animation
- Color-coded heart icons (red for saved items)
- Dedicated wishlist page with management options
- Move items from wishlist to cart
- Real-time product search functionality
- Search by product name and category
- Instant results with smooth filtering animations
- Mobile-first approach
- Breakpoints for all device sizes
- Touch-friendly interface for mobile devices
- Optimized images and performance
This project showcases proficiency in:
- HTML5 Semantics: Proper use of semantic elements for accessibility
- CSS3 Advanced Features: Grid, Flexbox, animations, and responsive design
- JavaScript ES6+: Modern JavaScript features and DOM manipulation
- UI/UX Principles: User-centered design and interaction patterns
- Performance Optimization: Efficient code and fast loading times
- Project Organization: Clean, maintainable code structure
| Browser | Version | Support |
|---|---|---|
| Chrome | 70+ | ✅ Full Support |
| Firefox | 65+ | ✅ Full Support |
| Safari | 12+ | ✅ Full Support |
| Edge | 79+ | ✅ Full Support |
- Optimized Images: Compressed images for faster loading
- Minimal Dependencies: Only essential external libraries
- Efficient CSS: Optimized stylesheets with minimal redundancy
- Lazy Loading: Images load as needed for better performance
- LocalStorage: Client-side data storage for improved UX
- Color Scheme: Modern, professional color palette
- Typography: Clean, readable font choices
- Spacing: Consistent spacing system using CSS variables
- Icons: Flaticon integration for consistent iconography
- Animations: Subtle, purposeful animations for better UX
Potential improvements for full-stack development:
- Backend Integration: Node.js/Express API
- Database: MongoDB for product and user data
- Payment Processing: Stripe/PayPal integration
- User Authentication: JWT-based auth system
- Admin Dashboard: Product and order management
- Email Notifications: Order confirmations and updates
- Reviews System: Customer review and rating functionality
- Inventory Management: Stock tracking and management
Atul Kumar Rajak - Frontend Developer
- 💼 LinkedIn: Your LinkedIn Profile
- 🐙 GitHub: Your GitHub Profile
- 📧 Email: your.email@example.com
- 🌐 Portfolio: Your Portfolio Website
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
If you like this project, please give it a ⭐ on GitHub!
For any questions or collaboration opportunities, feel free to reach out:
- Email: your.email@example.com
- LinkedIn: Your LinkedIn Profile
- Twitter: @yourhandle
Made with ❤️ by Atul Kumar Rajak
This project demonstrates modern frontend development practices and responsive web design principles.