🛍️ TechStoreX - Product Cards Showcase

🌐 Live Demo: Click here to visit site

📋 Overview

TechStoreX is a modern and responsive JavaScript-based product showcase that simulates a mini online electronics store. It allows users to explore, filter, and add products to a cart with real-time interactions and animations. Aimed at enhancing frontend development skills.

• 🖥️ Lists featured tech products with dynamic rendering
• 🛒 Add-to-cart system with quantity controls and toast notifications
• 🧹 Filter by category: Electronics, Accessories, and On Sale
• ⭐ Interactive star ratings for each product
• ❌ Remove individual cart items or clear entire cart
• 📦 Responsive UI with smooth transitions and modals

💻 Technologies Used

• HTML5 – Semantic structure
• CSS3 – Responsive grid layout, animations, modals, and gradient design
• Vanilla JavaScript – Dynamic rendering, DOM manipulation, filtering, cart logic, and UI feedback

🚀 How to Use

1. Clone the repository:

   git clone https://github.com/huzaifa-frontend/techstorex-javascript.git

2. Navigate to the project directory:

   cd techstorex-javascript

3. Open index.html in your browser to view the project locally.

🛠️ Features

• 🛍️ Render tech products dynamically from an object array
• 🧭 Filter by: All, Electronics, Accessories, Sale
• 🛒 Cart system with:
  • Quantity increase/decrease buttons
  • Subtotal calculation per item
  • Full total price update
  • Empty cart state with animation
• 📢 Animated "Add to Cart" toast
• ⭐ Star-based product ratings
• 🧼 Smooth modal open/close with outside click detection
• 📱 Fully responsive layout for mobile and desktop

📁 File Structure

📦 techstorex-javascript
 ┣ 📂 assets
 ┣ 📄 index.html
 ┣ 📄 style.css
 ┣ 📄 app.js
 ┣ 📄 README.md
 ┗ 📄 LICENSE

✨ Credits

• Designed & Developed by Muhammad Huzaifa Karim
• Product images sourced from Unsplash

📄 License

This project is licensed under the MIT License – feel free to use and modify with attribution.

✍️ Author

Muhammad Huzaifa Karim GitHub Profile

🔄 Deployment

This project is deployed using GitHub Pages. Any commit to the main branch automatically reflects on the live site.

📬 Contact

For ideas, feedback, or collaboration, feel free to reach out via GitHub.

---

© 2025 Muhammad Huzaifa Karim. All rights reserved.