Learning Kit (Vite + React + Supabase)

An e-commerce web app for browsing educational AI/robotics learning kits, adding them to a cart, and placing orders with Razorpay or Cash on Delivery (COD). Includes authentication and an admin dashboard for managing users, orders, and payments.

Tech Stack

• Frontend: React 18 + TypeScript
• Build tool: Vite
• Styling/UI: Tailwind CSS + shadcn/ui (Radix UI primitives)
• Routing: React Router
• Server state: TanStack React Query
• Backend: Supabase (Auth + Postgres + Edge Functions)
• Payments: Razorpay

What’s Included

• Public site: Home, Shop, Kit details, Blog, About, Contact
• Cart: add/remove/update quantity (persisted to localStorage)
• Auth: sign up / sign in via Supabase
• Checkout: address + buyer details, Razorpay or COD
• Orders & Payments: stored in Supabase tables
• Admin dashboard: metrics, user list, order status updates, payments list

Project Structure (high level)

• src/pages/ – route pages (Home, Shop, Checkout, Admin, etc.)
• src/components/ – UI sections + reusable components
• src/components/ui/ – shadcn/ui components
• src/contexts/ – AuthContext and CartContext
• src/integrations/supabase/ – Supabase client + generated DB types
• src/supabase/migrations/ – SQL migrations for tables/RLS
• src/supabase/functions/ – Supabase Edge Functions (Razorpay integration)

Requirements

• Node.js 18+ (recommended)
• A Supabase project (URL + anon/publishable key)

Package manager: the repo includes a bun.lockb, but you can use npm as well.

Environment Variables

Create a file named .env.local in the project root:

VITE_SUPABASE_URL="https://YOUR_PROJECT_ID.supabase.co"
VITE_SUPABASE_PUBLISHABLE_KEY="YOUR_SUPABASE_ANON_KEY"

Notes:

• These names are required because the Supabase client is initialized from import.meta.env in src/integrations/supabase/client.ts.
• .env* files are gitignored by default.

Install & Run (Windows / PowerShell)

Option A: npm

npm install
npm run dev

Option B: bun

bun install
bun run dev

Then open:

• http://localhost:8080

Build

npm run build
npm run preview

Supabase Setup

1) Create the database tables + RLS policies

This repo includes SQL migrations under:

• src/supabase/migrations/

They define (at minimum):

• profiles (role: customer or admin)
• orders (items stored as JSON)
• payments

How you apply them depends on how you manage Supabase:

• If you use the Supabase CLI, link your project and apply migrations.
• Or run the SQL manually in the Supabase SQL editor.

2) Auth

Auth is handled by Supabase. A profiles row is auto-created on user signup via a database trigger defined in migrations.

3) Admin access

Admin access is controlled via the profiles.role field (admin vs customer) enforced by Row Level Security policies.

To make a user an admin, update their profile row in Supabase:

update public.profiles
set role = 'admin'
where email = 'admin@example.com';

Razorpay / Payments

Frontend key

The frontend currently uses a Razorpay key value in the code (see src/pages/Checkout.tsx).

For production, you should move it to an environment variable (for example VITE_RAZORPAY_KEY) and load it via import.meta.env.

Server-side secret

A Supabase Edge Function creates Razorpay orders:

• src/supabase/functions/create-order/index.ts

That function expects the Razorpay secret key to be set as an environment variable in the Supabase Functions environment:

• RAZORPAY_SECRET_KEY

Do not put Razorpay secret keys in .env.local for the frontend.

Common Commands

• Dev server: npm run dev
• Lint: npm run lint
• Build: npm run build
• Preview build: npm run preview

Troubleshooting

• Blank page / Supabase errors: verify .env.local values and that your Supabase project is reachable.
• Admin page not accessible: ensure your user has profiles.role = 'admin'.
• Razorpay error “secret key not configured”: set RAZORPAY_SECRET_KEY in Supabase Edge Function environment.

License

Add your license information here.