# Vite + React + Supabase + Vercel
URL: https://wwadd.dev/stacks/vite-react-supabase-vercel
Last verified: 2026-09-28

A short path from idea to a real product with auth, a database, and a public URL.

## When to use it
- Solo dev or small team shipping an MVP in days, not months
- You need login, a relational database, and file storage without running servers
- Mostly client-rendered app behind a login screen, where SEO is not the priority

## How the pieces fit
Vite keeps the dev loop near-instant and emits a plain static bundle. Supabase covers the parts that normally require a backend team — Postgres, row level security, auth, storage, realtime — and is reached directly from the browser with a publishable key. Because the frontend is static, Vercel serves it from a CDN with zero server config. The seam between them is just HTTP, so you can later move privileged logic into edge functions without rewriting the UI.

## The tech and its role
- [Vite](https://wwadd.dev/tools/vite): Build tool and dev server
- [React + TypeScript](https://wwadd.dev/tools/react): UI layer
- [Tailwind CSS](https://wwadd.dev/tools/tailwind-css): Styling
- [Supabase (Postgres)](https://wwadd.dev/tools/supabase): Database, auth, storage, realtime
- [Row Level Security](https://wwadd.dev/tools/postgresql): Authorization at the data layer
- [Vercel](https://wwadd.dev/tools/vercel): Static hosting and CDN

## Real-world examples
- Mobbin: Migrated about 200,000 users from Firebase to Supabase after hitting Firestore's limits on indexing and relational queries for a read-heavy app — evidence the Supabase layer holds up past the prototype stage. (source: https://supabase.com/customers/mobbin)
- Atomic CRM (Marmelab): An open-source CRM from the makers of react-admin: a Vite + React single-page app talking directly to Supabase for auth and Postgres. It isn't tied to Vercel, which shows the frontend host is interchangeable. (source: https://github.com/marmelab/atomic-crm)

## Skip if
Skip if you need server-rendered marketing pages for SEO, or if your authorization rules are too complex to express as row policies.

## Testing and shipping
- [Test the behavior users depend on](https://wwadd.dev/moves/testing-shipping/test-user-behavior)
- [Check keyboard access and automated accessibility](https://wwadd.dev/moves/testing-shipping/keyboard-accessibility-check)
- [Investigate flaky browser tests](https://wwadd.dev/moves/testing-shipping/diagnose-flaky-tests)
- [Verify the production build before release](https://wwadd.dev/moves/testing-shipping/verify-built-release)
- [Keep secrets out of browser bundles](https://wwadd.dev/moves/testing-shipping/keep-secrets-server-side)
- [Make CI validate the same release inputs](https://wwadd.dev/moves/testing-shipping/ci-release-gates)
- [Capture errors with useful context](https://wwadd.dev/moves/testing-shipping/error-reporting-context)
- [Prepare rollback before publishing](https://wwadd.dev/moves/testing-shipping/plan-release-rollback)