🎵 Soundwave — Classical Indian Music Instrument Store

Soundwave is a premium, feature-rich e-commerce web application dedicated to Indian classical musical instruments. Built with React and styled with modern CSS layouts, Soundwave provides music enthusiasts, students, and professionals with a seamless shopping experience for traditional instruments.

---

✨ Features

• Interactive Catalog: Explore a curated collection of authentic Indian musical instruments (Sitar, Harmonium, Tabla, Shehnai, Santoor, Flute).
• Product Tiers: Browse beginner, concert, and professional models with varying configurations, pricing, and materials.
• Detailed Product Sheets: Check specifications (materials, weights, lengths, includes), watch performance/demo links, and select your preferred model.
• Dynamic Shopping Cart: Manage item quantities, calculate real-time totals, and experience a smooth cart flow.
• Checkout & Payment Flow: Complete orders via a mockup checkout form and process payment methods.
• Order Tracking: Keep track of purchased instruments and order history in the orders management panel.
• Responsive Navigation: Access all pages seamlessly from desktop and mobile devices.

---

🛠️ Tech Stack & Libraries

• Frontend Library: React (v19)
• Routing: React Router DOM (v7)
• Styling: Vanilla CSS (modular stylesheets matching each page component)
• Tooling: Built with Create React App and powered by Webpack

---

📁 Directory Structure

Soundwave/
├── public/                 # Static assets (images, icons, index.html)
└── src/
    ├── components/         # UI Components and Page Stylesheets
    │   ├── AboutUs.css
    │   ├── AboutUs.js      # About page detailing Soundwave's vision
    │   ├── Cart.css
    │   ├── Cart.js         # Cart summary and management
    │   ├── Contact.css
    │   ├── Contact.js      # User inquiries form
    │   ├── FeaturesSection.js
    │   ├── Footer.js
    │   ├── HeroSection.js  # Main landing area with interactive hooks
    │   ├── Instruments.css
    │   ├── Instruments.js  # Main catalog listing and categorization
    │   ├── InstrumentsDetails.css
    │   ├── InstrumentsDetails.js # Detailed specification sheet & model selector
    │   ├── Navigation.js   # Global header/navbar
    │   ├── Orders.css
    │   ├── Orders.js       # User order history
    │   ├── Payment.css
    │   ├── Payment.js      # Checkout and payment details form
    │   └── StatsSection.js
    ├── data/               # Local databases/mock data
    │   └── InstrumentsData.js # Catalog metadata & instrument specification objects
    ├── App.css             # Base global overrides
    ├── App.js              # Application routing and layout entry point
    ├── index.css           # Global CSS variables & typography imports
    └── index.js            # React root rendering entry point

---

🚀 Getting Started

Prerequisites

Make sure you have Node.js installed (v16.x or newer is recommended).

Installation

1. Clone the repository:

   git clone https://github.com/Maxwell343/Soundwave_Final.git
   cd Soundwave

2. Install dependencies:

   npm install

Running Locally

To run the application in development mode:

npm start

If port 3000 is occupied, you can run the app on a custom port (such as 3001):

• Windows (PowerShell):

  $env:PORT=3001; npm start

• macOS / Linux (Bash):

  PORT=3001 npm start

Open http://localhost:3001 (or the port specified) to view it in your browser.

Build for Production

To compile and optimize the app for production:

npm run build

This builds the static files in the build directory, ready to be deployed to Netlify, Vercel, or GitHub Pages.