Quick Start

Get Music Store running on your local machine in minutes

Quick Start

Get Music Store up and running in less than 5 minutes. This guide will take you from clone to running application with minimal configuration.

Prerequisites

Before you begin, ensure you have:

• Node.js 18+ installed on your machine
• npm, yarn, or pnpm package manager
• A Supabase account (free tier works perfectly)
• Basic knowledge of React and environment variables

We recommend using the latest LTS version of Node.js for optimal compatibility with React 19 and Vite 8.

Getting Started

1. Clone the Repository

   Clone the Music Store repository to your local machine:

   git clone https://github.com/yourusername/music-store.git
   cd music-store
   
2. Install Dependencies

   Install all required packages using your preferred package manager:

   npm

   npm install
   

   This will install all dependencies including:

   • React 19.2.0 and React DOM
   • Supabase client
   • GSAP for animations
   • OGL for WebGL graphics
   • Tailwind CSS for styling
   • Vite for development and building
3. Configure Environment Variables

   Create a .env file in the root directory and add your Supabase credentials:

   .env

   VITE_SUPABASE_URL=your_supabase_project_url
   VITE_SUPABASE_KEY=your_supabase_anon_key
   

   Never commit your .env file to version control. Add it to .gitignore to keep your credentials secure.

   You can find these values in your Supabase project dashboard under Settings > API.

4. Start the Development Server

   Launch the Vite development server:

   npm

   npm run dev
   

   The application will start at http://localhost:5173 (default Vite port).

5. Open in Browser

   Navigate to http://localhost:5173 in your web browser. You should see the Music Store homepage with:

   • Animated hero section with grainient background
   • Glassmorphic navigation bar
   • Product categories and circular galleries
   • Interactive shopping cart

Verify Installation

Once the application is running, verify everything works correctly:

1. Homepage loads - You should see the animated “Music Store” hero text
2. Products display - Product data should load from Supabase
3. Cart functionality - Try adding items to the cart
4. Navigation works - Click through categories and product details
5. Animations run smoothly - GSAP animations should be fluid

Your First Component

Now that Music Store is running, let’s explore how to use components. Here’s an example of importing and using the Hero component:

src/pages/Home.jsx

import Body from "../components/Body/Body";
import Hero from "../components/Hero/Hero";
import NavbarGlass from "../components/Navbar/NavbarGlass";

function Home(){
    return(
        <div>
            <NavbarGlass/>
            <Hero/> 
            <Body/>
        </div>
    )
}

export default Home

The Hero component features:

• GSAP-powered entrance animations
• Grainient animated background
• ShinyText effect for the tagline
• Responsive typography using clamp()

Using the Cart Context

Music Store uses React Context for global cart state. Here’s how to access cart functionality in your components:

import { useCart } from './context/CartContext/CartContext';

function ProductCard({ producto }) {
  const { agregarProducto, carrito } = useCart();
  
  const handleAddToCart = () => {
    agregarProducto(producto);
  };
  
  return (
    <div className="product-card">
      <h3>{producto.nombre}</h3>
      <p>${producto.precio}</p>
      <button onClick={handleAddToCart}>
        Add to Cart
      </button>
    </div>
  );
}

The cart context provides:

• carrito - Current cart items array
• agregarProducto(producto) - Add item to cart
• quitarProducto(id) - Remove item from cart
• cambiarCantidad(id, delta) - Update item quantity
• total - Calculated cart total
• carritoAbierto - Cart panel visibility state
• setCarritoAbierto(boolean) - Toggle cart panel

Expected Output

When everything is set up correctly, you should see:

• Hero Section: Animated title with grainient background
• Navigation: Glassmorphic navbar with cart icon
• Product Grid: Musical instruments loaded from Supabase
• Circular Gallery: WebGL-powered 3D product showcase
• Cart Panel: Slide-in cart with add/remove functionality

Available Scripts

Music Store comes with several npm scripts:

package.json

{
  "scripts": {
    "dev": "vite",              // Start development server
    "build": "vite build",      // Build for production
    "lint": "eslint .",         // Run ESLint
    "preview": "vite preview"   // Preview production build
  }
}

Next Steps

Detailed Installation

Learn about advanced configuration options and Supabase setup

Component Library

Explore all available components and their props

Supabase Schema

Set up your database tables and relationships

Deployment

Deploy Music Store to production

If you encounter any issues during setup, check the Installation guide for detailed troubleshooting steps.