🌊 TechTide E-Commerce Storefront Prototype

Overview

TechTide is a modern, single-page, client-side e-commerce storefront prototype designed to showcase interactive product browsing, filtering capabilities, and a fully functional shopping cart experience.

This project is built using vanilla JavaScript, HTML5, and Tailwind CSS, focusing on a clean, responsive, and mobile-friendly user interface. All application logic, styling, and markup are contained within a single index.html file.

---

✨ Features

• Interactive Product Grid: Products are displayed in a clean, responsive grid layout.
• Real-Time Filtering: Users can filter products instantly by search term, category, and maximum price using a custom range slider.
• Product Quick View: Clicking a product card opens a detailed modal with a quantity selector and a two-step "Add to Cart" confirmation.
• Fully Functional Shopping Cart:
  • Items can be added and removed.
  • Quantity controls (+/-) allow real-time adjustments directly within the cart modal.
  • The cart counter updates dynamically in the header.
• Custom Modals: Uses custom-built message boxes to handle alerts and confirmations, avoiding disruptive native browser prompts.
• Checkout Simulation: A simulated checkout process that clears the cart and provides a final order summary.

---

💻 Technologies Used

• HTML5 / JavaScript (ES6+): Structure, logic, and state management.
• Tailwind CSS: Via CDN for rapid, utility-first styling and responsive layout.
• Swiper JS: Via CDN for dynamic product image displays in the detail modal.

No backend or build tools are required—everything runs directly in the browser.

---

🚀 Getting Started

1. Clone the repository or download the files to your local machine.
2. Open index.html directly in any modern web browser (Chrome, Firefox, Edge, etc.).
3. No additional installation or server setup is required.

---

💡 Usage Guide

Browsing & Filtering

• Use the Search Bar in the header to filter products by name.
• Use the Sidebar Filter to select a category or adjust the Max Price slider. The product grid updates instantly.
• Click Reset Filters to clear all active filters.

Adding Items to the Cart

1. Click any Product Card to open the detail modal.
2. Select the desired Quantity.
3. Click "Add [X] Item(s)" (Step 1).
4. Click "Confirm [X] Item(s] to Cart" (Step 2) to finalize.

Managing the Cart

• Click the Checkout Button (cart icon) in the header to open the shopping cart modal.
• Inside the cart:
  • Use + / - buttons to adjust quantities.
  • Click the Trash Icon to remove an item entirely (confirmation required).
  • Click Confirm Purchase to simulate checkout and view a summary.

---