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 learn
You start by setting up your computer so you can run an AI agent and ship code. From there we cover the building blocks of a modern web app in plain language:
- How a Next.js App Router project is structured and how pages work
- How React components fit together to build a UI
- Styling with Tailwind CSS and shadcn/ui
- Deploying your app to the web (and how serverless differs from a long-running server)
- Building different interfaces — a Telegram bot, a desktop app, and a look at mobile — from one monorepo
- Where apps store data: the file system, key-value stores like Redis, and databases like Postgres
- Adding authentication so people can sign in and keep their data private
- Adding AI features, and the client/server basics behind it all
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
How the Next.js App Router Works
PlannedMake sense of your project's folders: how pages map to URLs, what the App Router is, and where your code actually lives — explained in plain terms.
- 03
React Components, Explained Simply
PlannedWhat components are, how they nest, and how props pass data between them — the mental model that makes every UI click into place.
- 04
Styling with Tailwind and shadcn/ui
PlannedHow CSS works at a glance, how Tailwind's utility classes make styling fast, and how shadcn/ui gives you polished components to build from.
- 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.