Skip to main content

​
Overview

Music Store is a React-based e-commerce application built with Vite, Supabase, and Tailwind CSS. The project follows a modern component-based architecture with clear separation of concerns.

​
Directory Structure

music-store/
├── backend/
│   ├── supabaseClient.js      # Supabase client configuration
│   ├── package.json           # Backend dependencies (Express, CORS)
│   └── server.js              # Optional Express server
├── public/
│   ├── brands/                # Brand logo images
│   └── img/                   # Product and UI images
├── src/
│   ├── components/            # Reusable React components
│   │   ├── Body/
│   │   ├── Brands/
│   │   ├── CartPanel/         # Shopping cart sidebar
│   │   ├── CircularGallery/
│   │   ├── Grainient/
│   │   ├── GuitarOfTheMth/
│   │   ├── Hero/
│   │   ├── Loader/
│   │   ├── Navbar/
│   │   ├── ShinyText/
│   │   ├── Squares/
│   │   └── productos/         # Product display components
│   ├── context/
│   │   └── CartContext/       # Global cart state management
│   ├── pages/
│   │   ├── Home.jsx           # Landing page
│   │   └── Categoria.jsx      # Category browsing page
│   ├── App.jsx                # Main app component & routing
│   ├── main.jsx               # React entry point
│   └── index.css              # Global styles
├── index.html                 # HTML entry point
├── package.json               # Frontend dependencies
├── vite.config.js             # Vite configuration
└── tailwind.config.js         # Tailwind CSS configuration

​
Key Directories

Contains all reusable React components organized by feature:
  • CartPanel/ - Shopping cart sidebar with add/remove functionality
  • Navbar/ - Navigation with glass morphism effect
  • productos/ - Product display and detail components
  • Loader/ - Loading animation component
  • Hero/ - Homepage hero section
  • Brands/ - Brand showcase section
  • CircularGallery/ - Interactive product gallery
  • GuitarOfTheMth/ - Featured product section
Each component is self-contained with its own JSX file and typically uses Tailwind for styling.
Global state management using React Context API:
  • CartContext/ - Manages shopping cart state, including:
    • Cart items array
    • Add/remove/update quantity methods
    • Cart total calculation
    • Cart panel visibility state
The CartProvider wraps the entire app in main.jsx to provide global cart access.
Top-level route components:
  • Home.jsx - Landing page (/)
  • Categoria.jsx - Category filtering page (/categoria/:nombre)
  • Product detail pages are handled by ProductosDetalle.jsx component
Backend utilities and configuration:
  • supabaseClient.js - Supabase client initialization
  • server.js - Optional Express server for additional backend logic
  • package.json - Backend-specific dependencies (Express, CORS)
The main data layer uses Supabase directly from the frontend.

​
Core Files

1

main.jsx - Application Entry Point

Renders the React app and wraps it with providers:
main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { CartProvider } from './context/CartContext/CartContext.jsx'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <CartProvider>
        <App />
    </CartProvider>
  </StrictMode>,
)
The CartProvider wraps the app to provide global cart state.
2

App.jsx - Main Component & Router

Defines routes and fetches products from Supabase:
App.jsx
import { useEffect, useState } from "react";
import { supabase } from "../backend/supabaseClient.js";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  const [productos, setProductos] = useState([]);
  const [cargando, setCargando] = useState(true)

  useEffect(() => {
    async function fetchProductos() {
      const { data, error } = await supabase.from("productos").select("*");
      if (error) console.error("Error al traer productos:", error);
      else setProductos(data);
      setCargando(false);
    }
    fetchProductos();
  }, []);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home productos={productos} />} />
        <Route path="/categoria/:nombre" element={<Categoria productos={productos} />} />
        <Route path="/producto/:id" element={<ProductoDetalle productos={productos} />} />
      </Routes>
      <CartPanel/>
    </BrowserRouter>
  );
}
Products are fetched once on mount and passed down to child components.
3

package.json - Dependencies

Key dependencies include:
package.json
{
  "dependencies": {
    "@supabase/supabase-js": "^2.98.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-router-dom": "^7.13.1",
    "gsap": "^3.14.2",
    "motion": "^12.35.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^5.1.1",
    "tailwindcss": "^4.2.1",
    "vite": "^8.0.0-beta.13"
  }
}

​
Configuration Files

vite.config.js

Vite build configuration with React plugin

tailwind.config.js

Tailwind CSS configured to scan all JSX/TSX files

backend/supabaseClient.js

Supabase client initialization and configuration

package.json

Project metadata and npm scripts (dev, build, preview)

​
Data Flow

1

Supabase Connection

App connects to Supabase using environment variables defined in .env.local
2

Product Fetching

App.jsx fetches all products from the productos table on mount
3

Props Distribution

Products array is passed to page components via props
4

Cart Management

CartContext provides global cart state accessible from any component
The application fetches all products on initial load. For large catalogs, consider implementing pagination or lazy loading.

​
Next Steps

Set up Supabase

Configure your Supabase project and database

Environment Variables

Set up required environment variables

Build docs developers (and LLMs) love

Get started for freeTalk to us