Building a Voting App: One-Page Guide
Vite + React + Supabase + Vercel | Total Time: <20 Minutes
What You're Building
A voting web app where visitors click items from "50 Things Sasha Knows" to vote. Real-time vote counts. Live at: sasha.moontowermeta.com
The Three Systems
1. Supabase | 2. GitHub + Terragon | 3. Vercel |
PostgreSQL database storing items and votes | Code repository with AI that writes your React app | Auto-deploys from GitHub and hosts your live site |
5-Step Setup Process
Step 1: Supabase Database (5 min)
✋ YOU: Create project at supabase.com → SQL Editor → Paste SQL (creates tables, policies, data) → Run
✅ RESULT: Database ready with 50 items, security policies enabled
Step 2: Create Code with Terragon (2 min)
✋ YOU: Terragon → New Task → Paste description of what you want → Execute
🤖 TERRAGON: Writes React app, Supabase config, env files → Commits to GitHub
✅ RESULT: Complete voting app code in your repo
Step 3: Connect Vercel to GitHub (5 min)
✋ YOU: vercel.com → Add New Project → Import your repo → Deploy
🤖 VERCEL: Auto-detects Vite, builds app, gives you live URL
✅ RESULT: App is live at your-app.vercel.app
Step 4: Add Environment Variables (2 min)
✋ YOU: Vercel Settings → Env Variables → Add VITE_SUPABASE_URL & VITE_SUPABASE_ANON_KEY
✅ RESULT: App can now talk to your database
Step 5: Custom Domain (5 min + wait)
✋ YOU: Vercel → Domains → Add domain → Copy DNS instructions → Add CNAME at domain registrar
✅ RESULT: App live at your custom domain (after 5-60 min DNS propagation)
How It Works (User Journey)
- User visits domain → Vercel serves React app
- App loads 50 items → Fetched from Supabase
- User clicks items → Stored locally
- User clicks Submit → Saved to Supabase
- Counts update → Real-time for all users
Key Technologies
React + TypeScript
Vite
Tailwind CSS | User interface
Build tool (faster than CRA)
Styling framework |
Supabase
Vercel
Terragon | PostgreSQL + real-time features
Auto-deploy from GitHub
AI that writes code |