← Blog · · react · supabase · stack
Spinning up a React + Supabase project in under an hour: step by step
The stack I use to validate ideas fast: auth, DB, RLS, storage and deploy in less time than it takes to eat lunch. Reproducible.
React + Supabase is the modern equivalent of “Rails in 15 minutes”. But most tutorials leave you halfway: okay, you have the home page, what about auth? security policies? deploy?
I’ll show you the exact flow I follow when a client tells me “I want to validate an idea now”.
What you’ll have in 60 minutes
- Next.js 16 (App Router) or Astro 5 project with React islands
- Supabase: magic link auth, database with proper RLS, storage for images
- shadcn/ui installed and configured with your theme
- Vercel deployment with PR previews
- Documented
.env.examplefor next iterations
Minute 0-5: scaffold
npx create-next-app@latest my-mvp --typescript --tailwind --app. Immediately after: npx shadcn@latest init, pick the preset, and you have Button, Input, Card ready.
Minute 5-20: Supabase
Create a project at supabase.com (takes 2 minutes). Copy URL and anon key to .env.local. Install @supabase/ssr and @supabase/supabase-js.
Create necessary tables in the SQL Editor. Important: enable Row Level Security from minute one and write the policies. Don’t leave it “for later” because it opens your entire API to the internet.
Minute 20-35: Auth
Magic link is the fast and secure path. In Supabase Auth → Settings, define your site URL and redirect URLs.
On the client: a form that calls supabase.auth.signInWithOtp({ email }). In /auth/callback/route.ts you exchange the code for a session. Done.
Minute 35-45: the first feature
This is where the client sees magic. A table with CRUD: form to create, list to read, button to delete. Server Components to read, Server Actions to mutate. Total: ~80 lines if you stay focused.
Minute 45-55: storage
Client wants to upload images? Create a bucket in Supabase Storage, “owner can read and write” RLS policy, and supabase.storage.from('bucket').upload() from a client component with <input type="file">.
Minute 55-60: deploy
Connect the repo to Vercel, copy Supabase env vars, click. Every push to main deploys. Every PR generates a preview with its own URL.
Now what
You have an MVP working with auth, data, storage and deploy. What follows is iterating with real data: showing it to the client, seeing what happens, and adjusting.
Want to build your MVP this way? Let’s talk in 30 minutes.