keepUpAI
Start free

New course · for beginners

Vibe Coding: From Idea to a Working Website or App

Use AI coding tools to plan, build, understand, test, debug and launch a real web app, without a technical background.

~3.5 hours of lessons29 lessons · 154 interactive stepsFirst module free (3 lessons)
Start the first module free See the curriculum

Your course project

TinyTasks

A small task manager web app you plan, build, secure and launch yourself, step by step.

  • Works in the browser on desktop and phone
  • Private accounts: users only see their own tasks
  • Analytics that tell you if people get value
  • Deployed online, with a README explaining setup

Who it's for

Beginners, founders, designers and career-changers who want to build a real web product with AI coding tools, and understand it well enough to fix it.

What you need

A computer, a browser, curiosity and access to an AI coding tool of your choice. No programming experience required: you'll learn the concepts you need along the way. Free tiers of Clerk, Supabase and PostHog are enough for the project.

Honest time estimate

About 3.5 hours of interactive lessons, plus roughly 10–20 hours building your own project, depending on your experience and the tools you choose.

What you'll build and launch

The main outcome is a working, responsive web app, launched as a first version. Along the way you'll add:

A responsive interface with clear loading, empty, success and error states

Sign-up, sign-in and sign-out with Clerk

A Supabase database for your app's data

Access rules so users can't see each other's data

A small set of useful PostHog events

A safe test-mode payment exercise, plus a way to check which providers support your country

A debugging routine for when AI gets stuck

A deployed demo and a README explaining setup

Your project is a responsive web app: it works in the browser on phones, but it isn't a native iOS or Android app. An optional module explains the paths to mobile apps; app store publishing isn't covered.

You'll learn to protect secrets and user data, and use payments in test mode only. Finishing the course doesn't automatically make an app secure or ready for business; real products need proper review.

How every lesson works

Short, practical lessons. No long videos and no code to copy blindly: you'll practice reading, reviewing and fixing what AI writes.

  1. 1A clear goal and a plain-language explanation
  2. 2Interactive exercises with instant feedback and step-by-step hints
  3. 3A prompt to try in your AI tool, and what to check in its answer
  4. 4"If AI gets stuck" tips and security notes where they matter
  5. 5A short checklist before you move on, and Keepy to help any time

The first module is free (3 lessons). The full course is included in every keepUp AI plan.

Same plans and prices as always: Monthly $9, Yearly $49 or Lifetime $69. No extra charge for this course.

See plans

Curriculum

1

What Vibe Coding Is (and Isn't)

What AI coding tools are great at, where they fail, and the habits that keep your project safe.

  1. 1

    Vibe Coding, HonestlyFree

    What AI coding tools can really do for you, where they go wrong, and why you still need to review their work.

    sortquizchecklist
  2. 2

    Small Steps You Can CheckFree

    Why one small, testable change at a time beats asking AI for the whole app at once.

    orderquizchecklist
  3. 3

    Keep Secrets SecretFree

    Which keys are safe in the browser, which never are, and how to keep passwords and private data out of AI chats and code.

    sortclickchecklist
2

Programming Concepts You Need

Just enough programming to understand what AI writes: files, components, front end and back end, APIs, state and errors.

  1. Files, Components, Functions and VariablesPro

    How a web app's code is organized, so you can find the file behind any feature.

    matchclickchecklist

  2. Front End, Back End, APIs and JSONPro

    Follow a click from the browser to the database and back, and read the JSON that travels in between.

    orderclickmatchchecklist

  3. State, Conditions and Error MessagesPro

    How the screen decides what to show, and how to read an error message instead of panicking.

    fillmatchclickchecklist
3

Turn an Idea into a Clear Plan

Decide who it's for, what the first version does, and write instructions an AI can't misunderstand.

  1. Who, What and What Not YetPro

    Pin down the user, the problem and the one main feature, then decide what waits for version two.

    sortchecklist

  2. Requirements AI Can't MisunderstandPro

    Turn features into testable acceptance criteria, then into precise, step-sized instructions.

    sortquizchecklist
4

Build the Interface

Build screens step by step, handle loading, empty and error states, and make it work on phones and keyboards.

  1. Loading, Empty, Success and ErrorPro

    Every screen has four moods. Handle all of them so users are never left staring at a blank page.

    matchquizchecklist

  2. Phones, Keyboards and Clear LabelsPro

    Make TinyTasks work on small screens and without a mouse, and review AI-built interfaces with a critical eye.

    clicksortchecklist
5

Understand and Review AI-Generated Code

Read changes before you keep them, follow data through the code, and always have a working version to go back to.

  1. Follow the Data, Ask Before ApplyingPro

    Find the files behind a feature, trace inputs to outputs, and make the AI explain its plan before it edits.

    orderchecklist

  2. Review a Change and Undo It SafelyPro

    Read a diff, spot risky lines, and use Git checkpoints to get back to a working version.

    clickmatchchecklist
6

Sign-In with Clerk

Add sign-up, sign-in and sign-out, protect private pages, and connect each user to their own data.

  1. Who Are You, and What May You Do?Pro

    Authentication versus authorization, and what Clerk's keys are for.

    sortmatchchecklist

  2. Add Clerk to TinyTasksPro

    Create a Clerk app, add sign-in and sign-out, protect the task page and handle signed-out and expired sessions.

    orderclickchecklist
7

Store Data with Supabase

Design a small database, save and load tasks, and lock it down with Row Level Security so users only see their own data.

  1. Tables, Rows, Columns and KeysPro

    Design the TinyTasks table: what to store, which column identifies each task, and which links it to its owner.

    matchsortchecklist

  2. Save, Load, Update and DeletePro

    Connect TinyTasks to Supabase with Clerk's native integration, then create, read, update and delete tasks.

    fillchecklist

  3. Row Level Security: Lock It DownPro

    Write access rules in the database so no user can read or change another user's tasks, then prove it with two accounts.

    quizclickorderchecklist
8

Product Analytics with PostHog

Measure whether people actually use TinyTasks, with a few useful events and no sensitive data.

  1. Track What Matters, Nothing MorePro

    Choose a handful of events that show whether users get value, and keep private data out of them.

    sortchecklist

  2. A Simple Dashboard and Respecting PrivacyPro

    Build an activation funnel, read it carefully, and think about consent without pretending to give legal advice.

    quizchecklist
9

Payments and Receiving Money

How checkout, subscriptions and webhooks work, practiced safely in test mode, plus how to check which providers can pay you.

  1. Checkout, Subscriptions and WebhooksPro

    Why a "payment successful" page proves nothing, and how webhooks confirm payments, all in test mode.

    quizorderchecklist

  2. Can This Provider Pay You?Pro

    Check a payment provider's real requirements for your country and business, compare options honestly, and know your legitimate alternatives.

    sortmatchchecklist
10

Debugging When AI Gets Stuck

A repeatable process for real bugs: reproduce, read the error, check the last change, fix one thing at a time.

  1. The Eight-Step Debugging RoutinePro

    Stop asking AI to rewrite everything. Follow a routine that finds the cause and keeps your working version safe.

    orderquizchecklist

  2. Real Bugs, Real CausesPro

    Diagnose realistic TinyTasks bugs across the interface, data, sign-in, env variables, analytics and webhooks.

    matchclickquizsortchecklist
11

Security, Privacy and Quality

Least privilege, server-side checks, input validation, backups and monitoring, and an honest view of what "secure" means.

  1. Least Privilege and Server-Side ChecksPro

    Give every key and user only the access they need, check permissions where users can't bypass them, and think like an abuser.

    sortchecklist

  2. Backups, Updates, Monitoring and an Exposure CheckPro

    Keep TinyTasks healthy after launch, inspect it for exposed data, and be honest about what the course does and doesn't guarantee.

    clickchecklist
12

Deploy and Launch

Put TinyTasks online with the right settings for every service, then launch a first version with an honest README.

  1. Deploy with the Right SettingsPro

    Choose a host, set environment variables there, and switch Clerk, Supabase, PostHog and payments to production settings, carefully.

    sortchecklist

  2. Launch Day: Checklist and READMEPro

    Run a final check on mobile, sign-in, permissions and error states, write a README, and publish an honest first version.

    checklist
13

Improve After Launch

Read analytics and feedback carefully, pick the next improvement, and keep working features working.

  1. Feedback, Focus and Knowing When to Get HelpPro

    Turn analytics and user feedback into one clear next step, ship it safely, and recognize when you need a developer or security specialist.

    sortchecklist
14

Optional: From Web App to Mobile AppOptional

The difference between a responsive website and a native app, and the common paths from one to the other.

  1. Responsive Site, Installable Web App or Native App?Pro

    Understand the options for bringing a successful web product to phones, and what each one really involves.

    matchchecklist
Start the first module free