CatalogScan

Foundation for the product catalog and barcode system, built with Astro, React, Tailwind CSS, and Supabase.

Setup

Dependencies are declared in package.json. Install them locally with:

npm install

Create .env from .env.example, then run the database migrations in order from supabase/migrations/ using the Supabase SQL Editor.

Migration 004_add_total_price_and_seed_catalog.sql adds the generated total_price_usd field and inserts or updates catalogue items 001 through 010. Products 008 through 010 intentionally reuse the public Storage object product-images/007.JPG with their own size, quantity, and price. Migration 005_use_storage_product_images.sql updates existing catalogue rows from local image paths to the public Storage URLs.

The app uses the Supabase publishable key only. Never put a secret or service-role key in a PUBLIC_ environment variable or browser code.

Commands

npm run dev
npm run build
npm run preview

npm run build regenerates item code assets under public/generated-codes/{code}/ from visible Supabase items. Each folder contains qr-{code}.png and barcode-{code}.svg. These generated files are ignored by Git.

Vercel deployment

Configure these variables in Vercel under Project Settings → Environment Variables for both Preview and Production:

• PUBLIC_SUPABASE_URL
• PUBLIC_SUPABASE_ANON_KEY (or PUBLIC_SUPABASE_PUBLISHABLE_KEY)
• PUBLIC_SITE_URL (use the production site origin, without a trailing path)

Vercel injects these values during the build. Do not upload or commit .env; the code generator loads that file only when it exists during local development.

Admin allowlist

After creating the admin user in Supabase Auth and running migration 002_admin_access.sql, add the user to the database allowlist:

insert into public.admin_users (user_id)
select id from auth.users where email = 'your-admin-email@example.com';