Skip to main content
1

Clone the repository

git clone https://github.com/ventasdoodles/vsm-store.git
cd vsm-store
2

Install dependencies

npm install
This installs all runtime and dev dependencies including React 18, Vite 6, Supabase JS, TanStack Query, Zustand, Tailwind CSS, and Sentry.
3

Configure environment variables

Copy the example env file and fill in your Supabase credentials:
cp .env.example .env
Then edit .env:
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...
VITE_SENTRY_DSN=https://[email protected]/xxxxx    # Optional
Without VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY, the app renders a configuration error screen instead of loading. These two variables are mandatory.
Find your credentials in the Supabase dashboard under Project Settings → API.
4

Run database migrations

The schema lives in supabase/migrations/. Execute the SQL files against your Supabase project in order.
# Link your project first
npx supabase link --project-ref <your-project-ref>

# Push all migrations
npx supabase db push
There are 52 migration files. The earliest files (001_, 002_, 003_) establish the core schema. Later files add features incrementally. Always run them in filename order.
5

Start the development server

npm run dev
Vite starts a dev server at http://localhost:5173 with HMR enabled.
VITE v6.x  ready in 500ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://0.0.0.0:5173/
6

Access the admin panel

Navigate to http://localhost:5173/admin.The AdminGuard component checks the admin_users table in Supabase. To grant admin access, insert a row:
INSERT INTO admin_users (id, role)
VALUES ('your-auth-user-uuid', 'admin');
Replace your-auth-user-uuid with the UUID from auth.users for the account you want to elevate.

​
Available Scripts

ScriptCommandDescription
Dev servernpm run devStarts Vite dev server at localhost:5173
Production buildnpm run buildRuns tsc && vite build && generate-sitemap
Preview buildnpm run previewServes the production build locally
Type checknpm run typecheckRuns tsc --noEmit — no output means no errors
Lintnpm run lintESLint over src/
Lint (auto-fix)npm run lint:fixESLint with --fix
Generate sitemapnpm run generate-sitemapOutputs sitemap.xml to dist/

​
Verify your setup

After starting the dev server, confirm:
  1. The homepage loads at http://localhost:5173/ without a red error screen
  2. npm run typecheck exits with no errors
  3. Navigating to /admin either shows the dashboard (if you have an admin row) or redirects to login
Run npm run typecheck && npm run lint before every commit. The build step also runs tsc, so catching type errors early saves time.

Build docs developers (and LLMs) love

Get started for freeTalk to us