Build Your First AI App

From Idea to Working Product — March 7, 2026

Scoping Architecture Data Scraping Full-Stack Deployment

press arrow to begin

01 — Overview

What We're Building Today

Session Arc

Problem

Define scope

PRD

Feature spec

Architecture

Frontend + Backend

Data

Scraping

Build

AI-assisted

Deploy

Live on web!

What You'll Walk Away With

A live, deployed web app you built
Understanding of full-stack architecture
Skills to scope and spec products
AI-powered development workflow

This workshop is for non-technical builders. No coding experience required. AI does the heavy lifting — you do the thinking.

Source Code

Live App

02 — Problem

Start With the Problem

"What is the 1 thing that you want to solve?"

Everything else is feature creep until this works perfectly.

Good Problem Statements

"I can't remember which games I own"
"We waste 20 min deciding what to play"
"I want to track who wins the most"

Common Mistakes

"I want to build the next BoardGameGeek"
Trying to solve 10 problems at once
Building features nobody asked for

Our problem: We have a board game collection but can't easily browse it, decide what to play tonight, or remember past games. Let's build an app for that.

03 — PRD

Writing a Product Spec

Feature Breakdown — MVP vs. Nice-to-Have

Feature	MVP	Post-MVP
Browse game collection with search	Must
Game details (players, time, description)	Must
Tonight's Picks with voting	Must
YouTube tutorial embeds	Must
Play session history & scores		Later
Add custom games via photo		Later
Player leaderboards		Later

A PRD (Product Requirements Doc) is your blueprint. Write it before you write code. AI tools like Claude or ChatGPT can help you draft one from a problem statement.

View our PRD on GitHub →

PRD Template

Problem statement (1 sentence)
Must-have features (3-5 max)
Nice-to-have features
Data model (what are you storing?)
Tech stack choices

04 — Architecture

Frontend vs. Backend

Frontend

What users see — buttons, pages, layout, colors. Built with React / Next.js.

React

Next.js

Tailwind

Backend

Where data is stored, processed & served. Database, APIs, auth. Built with Supabase.

Supabase

Database

APIs

Auth

Next.js blurs the line — it handles both frontend (React pages) and backend (API routes, server components) in one project. That's why we chose it.

Our Architecture

Full-Stack Framework

Next.js (App Router)

React frontend + server-side rendering + API routes. One framework, full stack.

Styling

Tailwind CSS

Utility-first CSS. Fast, responsive, no custom CSS needed.

Database

Supabase

Hosted Postgres with instant APIs, auth, and real-time subscriptions. Free tier is generous.

Hosting

Vercel

Deploy from GitHub in one click. Built by the Next.js team. Free for personal projects.

Data Seed

Go Scraper

CLI tool + browser-use to scrape BoardGameGeek for game data.

05 — Data

Getting Data Is the Hard Part

Most apps are useless without data. Accessing, cleaning, and structuring data is often 50%+ of the work. Plan for this early.

Where Does Data Come From?

Option 1

Public APIs

Best case. Structured, documented, rate-limited. Not always available.

Option 2

Web Scraping

When there's no API. Extract data from websites. This is what we're doing.

Option 3

Manual Entry

Sometimes the simplest option. Works for small datasets.

Our Data: BoardGameGeek

Game name, player count, play time
Box art images & descriptions
YouTube tutorial links
Ratings & year published

13 Games Scraped

+ For Sale, Startups, ito, Salt & Pepper & more

Example Output

{
  "name": "Catan",
  "bgg_id": "13",
  "min_players": 3, "max_players": 4,
  "play_time_minutes": 120,
  "image_url": "https://cf.geekdo-images...",
  "tutorial_url": "https://youtube.com/...",
  "rating": 7.1
}

Example Output Data

games_output.json — scraped game data with all fields

View

Examples README

Data format docs — input/output schema & usage

View

06 — Scraping

AI-Powered Scraping

Traditional Scraping vs. Browser Use

Aspect	Python / BeautifulSoup	Browser Use (AI Agent)
Setup difficulty	Write CSS selectors by hand	Describe what you want in English
Dynamic content	Breaks on JS-rendered pages	Uses a real browser, handles JS
Site changes	Selectors break constantly	AI adapts to layout changes
Anti-bot measures	CAPTCHAs block you	Navigates like a human
Speed	Fast for simple pages	Slower (10-12 min per batch)

CLI-Driven Development

Build a Go CLI tool that orchestrates the scraper. Input JSON list of games, output structured data. Repeatable, scriptable, version-controlled.

Go CLI browser-use API JSON in/out

Why Not Just Python?

Python scraping scripts are fragile and break when sites change. Browser Use sends an AI agent to browse the site like a human — it understands context, not just HTML selectors.

Browser Use

AI agents that interact with live websites — navigate, click, extract data

Visit

Show Live Example — Agent scraping BoardGameGeek

Browser Use agent scraping BoardGameGeek

07 — Philosophy

Why a Go CLI for Scraping?

Inspired by Peter Steinberger, founder of OpenClaw — one of the most prolific AI-native builders. His approach: "Whatever you want to build, start as CLI."

The CLI-First Approach

Agents call CLIs directly, verify output, and close the feedback loop
Go’s simple types make AI-generated code more reliable with fast linting
CLIs are repeatable, scriptable, version-controlled — no UI needed
Text in, text out — the simplest interface for humans and AI

Why Go Specifically?

Peter found that AI agents write excellent Go code. Go compiles to a single binary, has fast linting, and its straightforward syntax means fewer AI hallucinations. TypeScript for web, Go for CLIs — pick the right tool for the job.

Single binary Fast compilation Simple types AI-friendly

Peter Steinberger — Shipping at Inference-Speed

How one of the most productive AI-native engineers builds software with CLI-first tools

Read

07 — Build

Building with AI Assistance

The AI-Assisted Development Flow

PRD

Your spec

Get Data

Scrape & structure

Claude Code

AI builds it

Review

Refine & ship

Why CLI Tools?

Terminal-based AI tools (Claude Code) can read, write, and run your code
You describe what you want in plain English
AI generates code, runs it, fixes errors
You stay in control — approve every change

Tools We're Using

Claude Code — AI coding in your terminal
Cursor — AI-native code editor

The key insight: you don't need to know how to code — you need to know how to describe what you want.

08 — Database

Supabase & Database Setup

Setup Pipeline

Sign Up

supabase.com

New Project

Free tier

Create Tables

SQL migrations

Seed Data

Import JSON

Connect

API keys

Our Data Model

-- Core tables
games        -- name, players, time, image, description
votes        -- game_id, voter_name, created_at
tonights_picks -- game_id, pinned_by, pinned_at
play_sessions -- game_id, played_at, notes
players      -- name, email

Why Supabase?

Free hosted Postgres — no server to manage
Auto-generated REST API from your tables
Built-in auth (if you need it later)
Dashboard to view/edit data visually

Supabase

Open source Firebase alternative — Postgres database, auth, real-time, storage

Visit

09 — Deploy

Deploy with Vercel

From Code to Live URL in 3 Steps

Environment Variables

Add your Supabase keys in Vercel's settings:

NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbG...

Auto-Deploy on Push

Every git push triggers a new deploy
Preview URLs for branches & PRs
Rollback to any previous deploy instantly

Our live app: daydreamer-boardgames.vercel.app — deployed from GitHub, connected to Supabase, zero server management.

10 — Demo

What We Built

DayDreamers Board Games — Live App

Browse the collection, vote on tonight’s picks, watch tutorials

Open

Game Collection

Browse 13 games with search, box art, and ratings

Tonight’s Picks

Vote for games, enter your name, real-time results

Game Details

Description, rating, and YouTube tutorial embeds

The Full Stack

Next.js + React

Supabase

Vercel

Go Scraper

Browser Use

GitHub

Beyond board games: These same tools work for any project. Use Browser Use to order your favorite boba, scrape Amazon for price tracking, pull healthcare data, aggregate real estate listings — if it’s on the web, an AI agent can get it for you.

11 — Next Steps

Your Homework

Build Your Own App

Pick a problem you care about
Write a 1-page PRD (use AI to help!)
Set up Supabase + Next.js project
Use Claude Code / Cursor to build the UI
Deploy to Vercel and share the link

Resources to Explore

Next.js Tutorial — official learn path
Supabase Docs — quick starts
Tailwind CSS — utility-first styling
Browser Use — AI web scraping
Vercel Docs — deployment

Connect

chinat-yu

DayDreamers Newsletter

Substack

GitHub Repo

Source code

You don't need to be a developer to build software anymore. You need to be a clear thinker who can describe problems well. Go build something.