Skip to main content

​
Installation Guide

This comprehensive guide covers everything you need to install, configure, and run Music Store on your local machine or production environment.

​
System Requirements

Before installing Music Store, ensure your system meets these requirements:

​
Required Software

  • Node.js: Version 18.0.0 or higher (LTS recommended)
  • Package Manager: npm 9+, yarn 1.22+, or pnpm 8+
  • Git: Latest version for cloning the repository
  • Modern Browser: Chrome 90+, Firefox 88+, Safari 14+, or Edge 90+
  • RAM: 4GB minimum, 8GB recommended
  • Storage: 500MB free space for dependencies
  • Display: 1920x1080 or higher for optimal viewing
Music Store uses WebGL for 3D graphics. Ensure your system has GPU acceleration enabled for the best performance.

​
Installation Steps

1

Clone the Repository

First, clone the Music Store repository from GitHub:
git clone https://github.com/yourusername/music-store.git
cd music-store
Verify the clone was successful:
ls -la
You should see the project structure with package.json, src/, and other directories.
2

Install Dependencies

Install all required npm packages. Music Store has been tested with npm, yarn, and pnpm:
npm install
This will install all dependencies from package.json:Core Dependencies:Development Dependencies:
Installation typically takes 2-3 minutes depending on your internet connection. The total size of node_modules will be approximately 400MB.
3

Set Up Supabase Project

Music Store uses Supabase as its backend. Follow these steps to set up your Supabase project:

​
Create a Supabase Account

  1. Go to supabase.com
  2. Sign up for a free account
  3. Create a new project
  4. Choose a project name and database password
  5. Select a region closest to your users

​
Create Database Tables

Navigate to the SQL Editor in your Supabase dashboard and run this schema:
-- Create productos table
CREATE TABLE productos (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  nombre TEXT NOT NULL,
  descripcion TEXT,
  precio NUMERIC(10, 2) NOT NULL,
  categoria TEXT NOT NULL,
  imagen_url TEXT,
  stock INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add RLS (Row Level Security) policies
ALTER TABLE productos ENABLE ROW LEVEL SECURITY;

-- Allow public read access
CREATE POLICY "Enable read access for all users" ON productos
  FOR SELECT USING (true);

-- Create index for faster queries
CREATE INDEX idx_productos_categoria ON productos(categoria);

​
Seed Sample Data (Optional)

Add some sample products to test the application:
INSERT INTO productos (nombre, descripcion, precio, categoria, imagen_url, stock)
VALUES 
  ('Fender Stratocaster', 'Classic electric guitar', 1299.99, 'Guitarras', 'https://example.com/strat.jpg', 15),
  ('Gibson Les Paul', 'Legendary electric guitar', 2499.99, 'Guitarras', 'https://example.com/lespaul.jpg', 8),
  ('Yamaha P-125', 'Digital piano 88 keys', 649.99, 'Pianos', 'https://example.com/p125.jpg', 12),
  ('Pearl Export Series', 'Complete drum kit', 899.99, 'Baterias', 'https://example.com/drums.jpg', 5);
4

Configure Environment Variables

Create a .env file in the project root directory:
touch .env
Add your Supabase credentials to the .env file:
.env
# Supabase Configuration
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_KEY=your-anon-public-key-here

​
Finding Your Supabase Credentials

  1. Open your Supabase project dashboard
  2. Navigate to Settings > API
  3. Copy the Project URL to VITE_SUPABASE_URL
  4. Copy the anon public key to VITE_SUPABASE_KEY
Security Best Practices:
  • Never commit .env to version control
  • Add .env to your .gitignore file
  • Use the anon key, not the service_role key
  • Rotate keys if accidentally exposed

​
Verify Environment Variables

The Supabase client is configured in backend/supabaseClient.js:
backend/supabaseClient.js
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL; 
const supabaseKey = import.meta.env.VITE_SUPABASE_KEY; 
export const supabase = createClient(supabaseUrl, supabaseKey);
This client is imported throughout the app to fetch and manage data.
5

Configure Tailwind CSS (Optional)

Tailwind CSS is pre-configured, but you can customize it:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        'bebas': ['Bebas Neue', 'sans-serif'],
      },
    },
  },
  plugins: [],
}
The application uses custom fonts loaded in index.html:
index.html
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
6

Start Development Server

Launch the Vite development server:
npm run dev
You should see output similar to:
VITE v8.0.0-beta.13  ready in 432 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help
The development server features:
  • Hot Module Replacement (HMR) - Instant updates without page reload
  • Fast Refresh - Preserves component state during edits
  • Error Overlay - In-browser error messages
  • Optimized Deps - Pre-bundled dependencies for speed

​
Verify Installation

Confirm that Music Store is working correctly:

​
1. Check the Homepage

Navigate to http://localhost:5173 and verify:
  • Hero section displays with animated text
  • Grainient background renders smoothly
  • Navigation bar appears with glassmorphic effect
  • No console errors in browser DevTools

​
2. Test Supabase Connection

Open browser DevTools (F12) and check the Network tab:
  • Successful request to Supabase API
  • Products data loads without errors
  • Response status is 200 OK

​
3. Test Cart Functionality

  • Cart icon appears in navigation
  • Clicking cart opens the panel
  • Adding products updates cart count
  • Cart total calculates correctly

​
4. Test Navigation

  • Category links work without page reload
  • Product detail pages load
  • Browser back/forward buttons work
  • URL updates correctly

​
Build for Production

When you’re ready to deploy, create an optimized production build: 
npm run build
This creates a dist/ directory with:
  • Minified JavaScript bundles
  • Optimized CSS files
  • Compressed assets
  • Static HTML files

​
Preview Production Build

Test the production build locally: 
npm run preview

​
Troubleshooting

​
Common Issues

If port 5173 is occupied, Vite will automatically try the next available port. You can also specify a custom port:
npm run dev -- --port 3000
Ensure your .env file:
  • Is in the project root directory
  • Uses VITE_ prefix for all variables
  • Has no quotes around values
  • Is not in .gitignore during development
Restart the dev server after changing environment variables.
Verify:
  • Supabase URL is correct (should end in .supabase.co)
  • Using the anon key, not service_role
  • RLS policies are configured correctly
  • Project is not paused (free tier limitation)
Check:
  • GPU acceleration is enabled in browser settings
  • Graphics drivers are up to date
  • Browser supports WebGL 2.0
  • No browser extensions blocking WebGL
Test WebGL support at: https://get.webgl.org/webgl2/
Try:
# Clear npm cache
npm cache clean --force

# Delete node_modules and package-lock.json
rm -rf node_modules package-lock.json

# Reinstall
npm install

​
Next Steps

Component Documentation

Learn about all available components and how to use them

Supabase Setup

Configure your Supabase database and schema

Styling Guide

Customize colors, fonts, and animations with Tailwind

Deployment

Deploy to Vercel, Netlify, or other platforms
For production deployments, remember to set environment variables in your hosting platform’s dashboard, not in a .env file.

Build docs developers (and LLMs) love

Get started for freeTalk to us