keepUpAI
Start free

Vibe Coding · Module 4 of 14

Build the Interface

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

~15 min2 lessons1 matching tasks1 questions2 checklists1 click challenges1 sorting tasks
Start module

What you'll learn

  1. 1

    Loading, Empty, Success and Error

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

    Goal: Design and check the loading, empty, success and error states of a screen.

    • The four states of a screen
    • Match the message to the state
    • Which error message is best?
    • Project task: add all four states
    • Before you continue
  2. 2

    Phones, Keyboards and Clear Labels

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

    Goal: Check a screen on a phone-sized view and with only a keyboard, and fix missing labels.

    • Responsive and accessible
    • Review the AI's form
    • Accept or ask for changes?
    • Project task: phone and keyboard pass
    • Before you continue
What Vibe Coding Is (and Isn't)Programming Concepts You NeedTurn an Idea into a Clear PlanUnderstand and Review AI-Generated CodeSign-In with ClerkStore Data with SupabaseProduct Analytics with PostHogPayments and Receiving MoneyDebugging When AI Gets StuckSecurity, Privacy and QualityDeploy and LaunchImprove After LaunchOptional: From Web App to Mobile App