The channel’s day-by-day series, from your first app to a planner for workflows and real projects. Learn by doing: a lean plan, phases with checklists, and guided building.
Day 1–2 · lean plan, Lovable
Day 3 · agent swarms
Day 4–5 · building the tool
Day 6–9 · Supabase, 21st.dev
Day 10–11 · interfaces and bots
Day 13 · custom-built tools
Horse Auction · PETS system
The starting point for the series: build a real app from scratch with Claude Code. The golden rule for Day 1 — describe WHAT, not HOW. A plan .md lean is better than locking in libraries too early.
Most people get stuck because they give too much technical detail ("use Framer Motion X") instead of stating a requirement ("cards with a smooth hover effect"). Defining visual/UX requirements and letting Claude choose the libraries reduces hallucinations and rework. People coming from Lovable can migrate their project and gain real control over the code.
Plan .md lean: what, not how — enable the plan mode (Shift+Tab) before editing
Build in short phases; each phase ends with: build ok · screenshot · commit · 5-line summary
Did it break “out of nowhere”? Run a git diff from the last known good state and isolate by bisection
# script de resgate no package.json "rescue": "rimraf node_modules .next dist && npm i"
O Claude Flow is a framework for running agent swarms (agent swarms) that work in parallel. Two architectures: Swarm (independent agents in parallel) and Hive Mind (shared memory between them).
Splitting a build among competing agents (UI, API, storage, tests) speeds things up a lot—but it only works with plan and validation checklist. The difference between a “vibe coder” (iterates without a plan) and an “agentic engineer” (process + architecture) is what produces a working system, not a simulation.
npx claude-flow@alpha init --force # inicializa o Flow # rode o swarm com UI interativa: claude-flow swarm "..." --cloud # depurar MCP: claude mcp list --debug claude mcp remove FlowNexus claude mcp add FlowNexus "npx -y flow-nexus mcp"
Terminal aliases (e.g., dsp) so you don't have to type long commands
Supabase Realtime instead of Redis; Vite.js for rapid prototyping
Add -y to the npx to resolve path/permission issues
Ask it to document before implementing; checklist before the final build
💡 Tip: Using Supabase locally in dev saves costs, and policies RLS + signed/expiring links prevent data leaks through public links.
From Days 4 and 5: build a workflow planner — a tool with a UI, persistence, and logic—and then iterate with “major updates” on top of the stable foundation.
It’s the leap from a “demo app” to a tool you’d actually use. It shows how improve an existing project without breaking what already works—commits by phase, a consistently green baseline, and major updates made with a plan.
| Step | What to do |
|---|---|
| Base | CRUD + minimal UI working, committed |
| Plan | Plan mode (Shift+Tab) to sketch out the "big update" |
| Iterate | One feature at a time, with a green build at every step |
| Rescue | Diff/bisection when something regresses |
Starting on Day 6, the project gets MCP servers — the protocol that gives Claude external tools. Supabase MCP (database/auth/storage) and 21st.dev MCP ("magic" UI components) appear in the series.
With MCP, Claude queries the real database schema, creates tables, and generates UI from component libraries — without you leaving the terminal. That's what turns a prototype into a connected app. (Track 5 covers MCP in more depth.)
# listar / adicionar / remover MCP servers claude mcp list claude mcp add supabase "npx -y @supabase/mcp-server" claude mcp add magic "npx -y @21st-dev/magic" # dentro da sessão: /mcp # ver status dos servers conectados
Default: connect the MCP, ask Claude to “read the current schema” before generating code, and configure RLS in Supabase before any public link.
Day 10 builds a dashboard (data visualization with charts and metrics); Day 11 shows how Claude Code helps you build GPTs / custom assistants based on your content.
Dashboard is the use case that comes up most often in real products—and a great UI + data exercise. GPTs, meanwhile, show Claude Code as a tool for authorship: it structures instructions, the knowledge base, and the bot workflow.
Real source (API/Supabase), not a mock
Metric cards + charts; describe the UX
Screenshot → adjustment → commit by phase
Day 13 is the turning point: instead of paying for several "superapps"/SaaS tools, you builds the custom tool with Claude Code — exactly the features you use, nothing else.
This is the course’s economic thesis: much of what you subscribe to can become a small app of your own. You control the data, pay only for the infrastructure, and make changes whenever you want. Claude Code cuts the cost of "building your own".
Simple, repetitive use, your own data, integration with your stack
Heavy compliance requirements, massive scale, features that change every week
Two complete projects guided by the community: a horse auction and one PETS system (sign-up/management). From the database schema to the UI, showing the end-to-end flow.
See an entire app come to life — data modeling, screens, business rules — bringing together everything from the previous tracks. These make good “anchor projects” for you to rebuild with your own theme.
| Layer | 🐎 Auction | 🐾 PETS |
|---|---|---|
| Data | batches, bids, users | tutors, pets, customer service |
| Rule | minimum bid, auction time | scheduling, history, safeguards |
| UI | listing + live bidding screen | pet profile + dashboard |
💡 Next step: take the structure from these examples and swap in your domain. Same skeleton, different content—that’s the fastest way to learn.