Book A Meeting
About Me
Subscribe
MoontowerMeta Public Notion/
🤖
Resources to get more out of AI/
👩🏾‍💻
Building a Voting App/
🔍
Detailed tutorial
🔍

Detailed tutorial

📖 Complete Tutorial

The following sections provide detailed step-by-step instructions with code examples.

💾 1) Database Setup with Supabase

🎯 YOUR ROLE: You'll manually set up the Supabase database by pasting SQL code into their editor. This is a one-time setup that creates the foundation for storing votes.

Step 1: Create Supabase Project

✋ YOU DO THIS:
  1. Go to and create an account (if needed)
      2. com
  1. Click "New Project"
  1. Choose a name, password, and region
  1. IMPORTANT: Copy and save your Project URL and anon/public key (found in Settings → API)

Step 2: Create Database Tables

✋ YOU DO THIS:
  1. In your Supabase dashboard, click "SQL Editor" in the left sidebar
  1. Click "New Query"
  1. Paste the SQL code below
  1. Click "Run" (or press Ctrl+Enter)
SQL CODE TO PASTE:
-- Create items table
CREATE TABLE items (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
label text NOT NULL,
description text,
likes_count integer DEFAULT 0
);
-- Create likes table
CREATE TABLE likes (
id serial PRIMARY KEY,
item_id uuid REFERENCES items(id) ON DELETE CASCADE,
session_id text NOT NULL,
created_at timestamp with time zone DEFAULT now()
);

Step 3: Set Up Security Policies

✋ YOU DO THIS:
In the same SQL Editor, paste and run this code:
-- Enable Row Level Security
ALTER TABLE items ENABLE ROW LEVEL SECURITY;
ALTER TABLE likes ENABLE ROW LEVEL SECURITY;
-- Create policies
CREATE POLICY "Allow read access on items"
ON items FOR SELECT USING (true);
CREATE POLICY "Allow insert access on likes"
ON likes FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow delete own likes"
ON likes FOR DELETE USING (true);

Step 4: Insert the 50 Items

✋ YOU DO THIS:
Paste and run the INSERT statement with all 50 items from the blog post (provided in the original tutorial document).
✅ DONE! Your database is now ready. Supabase will handle all data storage, security, and real-time updates automatically.

⚛️ 2) Building the Frontend

🤖 TERRAGON'S ROLE: Terragon will write all the code for you. You simply describe what you want, and it generates the React components, TypeScript files, and configuration.

Creating the Terragon Task

✋ YOU DO THIS:
  1. Open Terragon and click "New Task"
  1. In the task description box, paste your requirements (example provided below)
  1. Click "Execute"
🤖 TERRAGON DOES:
  • Creates .env.local with your Supabase credentials
  • Creates src/lib/supabase.ts (Supabase client configuration)
  • Creates/updates src/App.tsx (main voting interface)
  • Installs required packages (adds @supabase/supabase-js to package.json)
  • Commits all changes to your GitHub repository

What Terragon Creates

Environment Variables (.env.local)
VITE_SUPABASE_URL=your_project_url
VITE_SUPABASE_ANON_KEY=your_anon_key
Supabase Client (src/lib/supabase.ts)
Sets up the connection between your React app and Supabase database.
Main App Component (src/App.tsx)
Terragon creates a React component with:
  • Session ID generation (stored in browser localStorage)
  • Fetching all 50 items from Supabase
  • Vote toggle functionality (click to vote/un-vote)
  • Real-time vote count updates
  • Tailwind CSS styling for a clean interface
✅ DONE! Your code is now in GitHub. Terragon handled all the technical implementation.

🚀 3) Deployment with Vercel

🤝 SHARED WORK: You'll do the initial Vercel setup (connecting to GitHub, adding env vars, configuring domain). After that, Vercel automatically handles all future deployments when you push code.

Step 1: Connect GitHub Repository

✋ YOU DO THIS:
  1. Go to and sign in with GitHub
      2. com
  1. Click "Add New Project"
  1. Find your GitHub repository in the list
  1. Click "Import"
🤖 VERCEL DOES:
  • Auto-detects it's a Vite project
  • Sets build command to npm run build
  • Sets output directory to dist

Step 2: Add Environment Variables

✋ YOU DO THIS:
  1. Before clicking "Deploy", scroll down to "Environment Variables"
  1. Add: VITE_SUPABASE_URL = (paste your Supabase project URL)
  1. Add: VITE_SUPABASE_ANON_KEY = (paste your anon key)
  1. Click "Deploy"
🤖 VERCEL DOES:
  • Clones your GitHub repo
  • Runs npm install
  • Runs npm run build
  • Deploys to CDN (worldwide distribution)
  • Gives you a live URL (e.g., your-app.vercel.app)

Step 3: Connect Custom Domain

✋ YOU DO THIS:
  1. In Vercel dashboard, go to your project → Settings → Domains
  1. Type your domain (e.g., sasha.moontowermeta.com) → Add
  1. Vercel shows DNS instructions → copy the CNAME value
  1. Go to your domain registrar (where you bought the domain)
  1. Add a CNAME record pointing to the value Vercel provided
  1. Wait 5-60 minutes for DNS propagation
✅ DONE! Your app is now live at your custom domain. Every time you or Terragon push code to GitHub, Vercel will automatically rebuild and redeploy.

❓ Frequently Asked Questions

Database & Supabase

Does every Supabase project have its own API key?

Yes! Each Supabase project has its own unique:
  • Project URL (e.g., https://xyz.supabase.co)
  • Anon/Public Key (safe to expose in frontend code)
  • Service Role Key (secret, for backend/admin operations only)
The anon key is scoped to your project and respects Row Level Security (RLS) policies. You cannot use one project's keys to access another project's data.

How do I reset my database to zero votes?

Run this SQL in your Supabase SQL Editor:
DELETE FROM likes;
UPDATE items SET likes_count = 0;

Why use Row Level Security (RLS)?

RLS ensures that even with your public anon key exposed, users can only perform operations you've explicitly allowed through policies. Without RLS enabled, your database would be wide open to anyone with your anon key.

Frontend & Development

What is Terragon and how does it work?

Terragon is an AI-powered task automation tool that connects to your GitHub repository. You describe what you want in plain English, and Terragon's AI writes the code, commits it to your repo, and triggers your Vercel deployment automatically.

Why do environment variables need the VITE_ prefix?

Vite only exposes environment variables that start with VITE_ to your frontend code. This is a security feature to prevent accidentally exposing sensitive backend variables. Variables without the prefix are only available during build time.
Example: VITE_API_KEY is accessible, but SECRET_KEY is not.

How do I prevent someone from voting multiple times?

The app uses a combination of strategies:
  • Session ID stored in localStorage (can vote once per browser)
  • Database constraint preventing duplicate (item_id, session_id) pairs
  • Local state tracking which items the user has voted for
Note: Determined users can clear localStorage or use incognito mode to vote again. For stricter controls, you'd need user authentication.

Deployment & Hosting

Can I deploy multiple apps from one GitHub repo?

Yes! You can create multiple Vercel projects from the same GitHub repository. Each project can:
  • Deploy from different branches
  • Have independent environment variables
  • Use different custom domains
  • Deploy from different subdirectories (monorepo)

How long does DNS propagation take?

Typically 5-60 minutes, but can take up to 48 hours in rare cases. You can check propagation status using tools like whatsmydns.net.

What happens when I push to GitHub?

Vercel automatically:
  1. Detects the push via webhooks
  1. Runs npm install to install dependencies
  1. Runs npm run build to build your app
  1. Deploys the dist/ folder to their CDN
  1. Makes your app live at your domain (usually within 30-60 seconds)