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 and have written little code, or none. Instead of months of syntax first, you work with an AI coding agent (Claude Code, Codex) from day one and learn the fundamentals when you need them.
What you'll be able to build
- Your first website, live under your own domain
- A Telegram or Slack bot people can message
- Your app or bot, restyled and reshaped until it looks and feels right
- A brain for the bot, wired up with an AI SDK
- Real data: Postgres for what you keep, Redis for what you need fast
- Sign-in, so users' data stays theirs
- The same project as a desktop app, plus where mobile fits in
What you'll learn along the way
Roughly in this order:
- TypeScript, the language you and your agent write together
- React, UIs built from small, reusable pieces
- Next.js, the framework that turns React into a deployable web app
- Tailwind CSS and shadcn/ui, styling and ready-made components
- Telegram and Slack APIs, how your code talks to chat platforms
- AI SDK, for adding AI features to anything you build
- Postgres, where your app's data lives
- Drizzle ORM, a 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. Take them in order or jump around. Your progress saves in your browser, so you can pick up where you left off. No account needed.
The roadmap is below. Lessons marked Planned are on the way. Start with lesson one.
Lessons
- 01
Set Up Your Environment
1 hour 30 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.