# 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.

**Level:** Beginner

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](https://claude.com/claude-code), [Codex](https://openai.com/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](https://andrey-markin.com/courses/vibe-coding/set-up-your-environment.md)
   Get 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](https://andrey-markin.com/courses/vibe-coding/tour-your-project.md)
   Open 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](https://andrey-markin.com/courses/vibe-coding/pages-and-components.md)
   Replace 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](https://andrey-markin.com/courses/vibe-coding/styling-and-shadcn.md)
   Decode 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 (planned)
   Put 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 (planned)
   Beyond 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 (planned)
   A 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 (planned)
   What 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 (planned)
   Store 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 (planned)
   Let 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.

## Links

- Course page: https://andrey-markin.com/courses/vibe-coding
- All courses: https://andrey-markin.com/courses.md
- Contact: https://andrey-markin.com/#contact