Vibe Coding: Build Real Apps with AI Agents
A beginner-friendly path to building and shipping real web apps using AI coding agents like Claude Code and Codex — no prior experience required. You'll set up your machine, learn the fundamentals as you go, and deploy something real.
This course is for people who want to build real software but have never written much code — or any at all. Instead of spending months on syntax first, you'll learn to work alongside an AI coding agent (like Claude Code and Codex) from day one, and pick up the fundamentals as you actually need them.
What you'll be able to build
By the end of this course you'll be shipping real things, not toy examples. You'll walk away as a builder who can take an idea and turn it into something live on the internet:
- Launch your first website and put it on the internet under your own domain
- Build a Telegram or Slack bot people can actually message
- Restyle and reshape your app or bot until it looks and feels the way you want
- Turn that bot into an AI bot — give it a brain by wiring up an AI SDK
- Connect your app to real data: a Postgres database for things you want to keep, Redis for things you want to keep fast
- Let users sign in so their data stays theirs
- Package the same project as a desktop app, and see how mobile fits in too
What you'll learn along the way
You'll pick up the technical foundations as you build, in roughly this order:
- TypeScript — the language you and your AI agent will write together
- React — the way modern UIs are built out of small, reusable pieces
- Next.js — the framework that turns React into a real, deployable web app
- Tailwind CSS and shadcn/ui — styling and ready-made components
- Telegram and Slack APIs — how to make your code talk to chat platforms
- AI SDK — the toolkit for adding AI features to anything you build
- Postgres — the database where your app's data lives
- Drizzle ORM — a clean, typed way to read and write that database from TypeScript
- Redis — fast in-memory storage for caching, queues, and short-lived data
How it works
Every lesson is free and open — work through them in order, or jump around. Your progress is saved automatically in your browser as you complete lessons, so you can pick up where you left off. No account needed.
The full roadmap is below. Lessons marked Planned are on the way — start with lesson one and you'll be building in minutes.
Lessons
- 01
Set Up Your Environment
90 minGet your Mac or Windows PC ready to build and ship real apps — install the essential tools, create your first project from a template, and run it locally with an AI coding agent.
- 02
Find Your Way Around Your Project
25 minOpen up the app you just created and make sense of it: the monorepo at a glance, what each folder is for, where your code lives versus the shared UI, and how the Next.js App Router turns folders into pages and URLs.
- 03
Pages and Components: Make It Yours
45 minReplace the demo home page with your own. Learn what a component is, how files import and export them, and build your first pieces by hand — a Hero and a Card — wired together and passed real data through props.
- 04
Make It Look Good: Styling, Components, and Themes
40 minDecode the Tailwind classes you already wrote, meet shadcn/ui's ready-made components and swap your hand-built Card for one, then learn the design tokens and themes that let you restyle the whole site at once.
- 05
Deploying Your App to the Web
PlannedPut your app online so anyone can visit it — and understand how serverless platforms like Vercel differ from a traditional long-running server.
- 06
Apps and Interfaces: Bots, Desktop, and Mobile
PlannedBeyond the web page — wire up a Telegram bot, package a desktop app, and peek at mobile, all from the same monorepo template you already have.
- 07
Where Apps Store Data: Files, Key-Value, and Databases
PlannedA plain-language overview of the ways an app remembers things — the file system, key-value stores, and databases — and when each one is the right tool.
- 08
Fast, Temporary Storage with Redis
PlannedWhat a key-value store is good for — caching, sessions, rate limits — and how to add Redis to your app for data that needs to be fast.
- 09
Adding a Database
PlannedStore and retrieve structured data that lasts: what a relational database does, why Postgres is a safe default, and how to wire one into your app with your agent's help.
- 10
Adding Authentication
PlannedLet people sign in and keep their data private — what auth actually is, how sessions work, and how to add login to your app with your agent's help.