What is VSM Store?
VSM Store is a Progressive Web App (PWA) e-commerce platform for VSM (Vape Store Mexico), based in Xalapa, Veracruz, México. It offers a dual-section product catalog — Vape and 420 — with a full customer-facing storefront and an integrated admin panel, all running as a single React SPA backed by Supabase.Quickstart
Clone the repo, set up environment variables, and run your first dev server in minutes.
Architecture Overview
Understand the provider tree, data flow, code-splitting strategy, and hosting setup.
Storefront Features
Explore the product catalog, cart, checkout, loyalty program, and user accounts.
Admin Panel
Manage products, orders, customers, coupons, and store settings from the built-in admin panel.
Key features
Dual-section catalog
Browse and filter products across two sections: Vape (mods, liquids, coils) and 420 (vaporizers, edibles, concentrates), with 13 hierarchical categories.
Loyalty program
A 4-tier rewards system (Bronze → Silver → Gold → Platinum) where every $100 MXN spent earns 10 points redeemable on future orders.
WhatsApp + Mercado Pago checkout
Flexible checkout: send orders via auto-formatted WhatsApp message or process payments via Mercado Pago integration.
AI-powered admin tools
Google Gemini edge functions provide inventory predictions, dashboard business insights, customer intelligence, and AI-generated product copy.
Integrated admin panel
Full CRUD for products, categories, orders, customers, and coupons — all within the same SPA, code-split and lazy-loaded.
PWA with dark/light theme
Installable on mobile, with offline support via service worker, haptic feedback, and persistent theme preference.
Tech stack at a glance
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build tool | Vite 6 |
| Styling | Tailwind CSS |
| Backend / DB | Supabase (PostgreSQL + Auth + Storage) |
| Server state | TanStack React Query v5 |
| Client state | Zustand |
| Routing | React Router DOM v6 |
| Monitoring | Sentry + Google Analytics 4 |
| Hosting | Cloudflare Pages |
| AI functions | Google Gemini 2.0 Flash (Supabase Edge Functions) |
Getting started
Set up your environment
Configure your Supabase project and copy your credentials into
.env. See Environment Setup.Run the database migrations
Apply the 10 SQL migration files in
supabase/migrations/ to your Supabase project in order.Start the dev server
Run
npm install && npm run dev and open http://localhost:5173.VSM Store is designed for Mexican consumers. All prices are in MXN (Mexican Pesos), the locale is
es-MX, and the checkout supports WhatsApp-first ordering workflows common in Mexico.