"# 🛒 TechNova - Premium Electronics Store
A fully responsive, feature-rich online electronics store built with vanilla JavaScript, HTML5, and Tailwind CSS
- ✨ Features
- 🎯 Demo
- 🛠️ Technologies Used
- 🚀 Quick Start
- 📁 Project Structure
- 🎨 Pages & Views
- 💾 Data Management
- 📱 Responsive Design
- 🔧 Configuration
- 🤝 Contributing
- 📄 License
- Product Catalog with real-time API integration (FakeStore API)
- Advanced Search & Filtering with intelligent suggestions
- Shopping Cart with persistent storage
- Secure Checkout Process with form validation
- Price Range Filtering and multiple sorting options
- User Registration & Authentication (Demo available)
- Profile Management with editable user information
- Order History with detailed tracking
- Account Settings with preferences
- Secure Login/Logout with session persistence
- Modern Dark Theme with professional design
- Interactive Image Slider with Unsplash API integration
- Responsive Navigation with mobile hamburger menu
- Toast Notifications for user feedback
- Product Modals with detailed information
- Loading States and error handling
- Fully Responsive design for all devices
- Touch-Friendly interactions
- Mobile-Optimized navigation
- Progressive Web App ready architecture
- Multi-page Architecture (Login, Signup, Support, etc.)
- Local Storage Integration for data persistence
- API Error Handling with fallback states
- SEO Optimized structure
- Accessibility Features (ARIA labels, keyboard navigation)
You can view the live website by opening index.html in your browser or hosting it on any web server.
- Click the green "Demo Login" button (bottom-left corner)
- Explore all features with the demo account
- Add products to cart and complete checkout
- Check your order history in the account section
| Technology | Purpose | Version |
|---|---|---|
| HTML5 | Structure & Semantics | Latest |
| CSS3 | Styling & Animations | Latest |
| JavaScript (ES6+) | Functionality & Logic | Vanilla JS |
| Tailwind CSS | Utility-First Styling | v3.x |
| FakeStore API | Product Data | REST API |
| Unsplash API | Dynamic Images | REST API |
| LocalStorage | Data Persistence | Browser API |
| Inter Font | Typography | Google Fonts |
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Local web server (optional, for development)
-
Clone the repository
git clone https://github.com/yourusername/technova-ecommerce.git cd technova-ecommerce -
Open the project
# Option 1: Direct file opening open index.html # Option 2: Using Python server python -m http.server 8000 # Option 3: Using Node.js server npx serve . # Option 4: Using Live Server (VS Code extension) # Right-click index.html → "Open with Live Server"
-
Start exploring!
- Use the demo login feature for full functionality
- Browse products, add to cart, and complete checkout
- Explore account management features
technova-ecommerce/
├── 📄 index.html # Main homepage with all views
├── 🎨 style.css # Custom styles and animations
├── ⚡ script.js # Application logic and functionality
├── 🔐 login.html # Login page
├── 📝 signup.html # Registration page
├── 🎉 promotions.html # Deals and promotions
├── 🆘 support.html # Customer support
├── 🔒 privacy.html # Privacy policy
├── 📜 terms.html # Terms of service
└── 📖 README.md # Project documentation
- Shop View - Product catalog with filtering and search
- Cart View - Shopping cart management
- Checkout View - Secure checkout process
- Profile View - User profile management
- Orders View - Order history and tracking
- Settings View - Account preferences
- About View - Company information
- Contact View - Contact form
- Terms View - Terms of service
- Login Page - User authentication
- Signup Page - New user registration
- Promotions Page - Special offers and deals
- Support Page - Help and customer service
- Privacy Page - Privacy policy details
// User data persistence
localStorage.setItem('techNovaUser', userData);
localStorage.setItem('techNovaCart', cartData);
localStorage.setItem('techNovaOrders', ordersData);// Product data from FakeStore API
const API_URL = 'https://fakestoreapi.com/products';
// Dynamic slider images from Unsplash
const UNSPLASH_API = 'https://source.unsplash.com/';- Products → Fetched from FakeStore API
- Cart → Stored in localStorage
- User Account → Managed in localStorage
- Orders → Saved locally with full tracking
- Full navigation with all features
- 4-column product grid
- Sidebar filters and sorting
- Adapted navigation
- 3-column product grid
- Optimized spacing
- Hamburger menu navigation
- Single/double column layout
- Touch-optimized interactions
- Swipe-friendly carousel
// API Configuration
const API_URL = 'https://fakestoreapi.com/products';
// UI Configuration
const ITEMS_PER_PAGE = 20;
const SLIDER_INTERVAL = 5000; // 5 seconds
const TOAST_DURATION = 3000; // 3 seconds
// Search Suggestions
const searchSuggestions = [
'laptop', 'phone', 'headphones', 'watch', 'tablet'
];/* Color Variables (Tailwind CSS) */
:root {
--primary-color: #6366f1; /* Indigo */
--secondary-color: #10b981; /* Emerald */
--background-color: #111827; /* Gray-900 */
--text-color: #f9fafb; /* Gray-50 */
}We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- 🐛 Bug fixes and improvements
- ✨ New features and enhancements
- 📖 Documentation updates
- 🎨 UI/UX improvements
- 🧪 Testing and quality assurance
- Use ES6+ JavaScript features
- Follow consistent indentation (2 spaces)
- Add comments for complex logic
- Ensure responsive design compatibility
This project is licensed under the MIT License - see the LICENSE file for details.
- ✅ Commercial use
- ✅ Modification
- ✅ Distribution
- ✅ Private use
- ❌ Liability
- ❌ Warranty
Made with ❤️ by the TechNova Team
© 2025 TechNova. All rights reserved.