Video summary

How to build mobile apps for local businesses with Claude Code - FULL COURSE

Main summary

Key takeaways

Technology

Course overview (what the tutorial builds)

This tutorial is a full course workflow for turning an idea into a published mobile app for a local business using AI coding assistants (Claude Code via VS Code Cloud) plus a stack of SaaS developer tools.

Demo app: “Dentify” (dentist clinic)

The example app includes:

  • Authentication + onboarding
  • Home with:
    • upcoming appointment display
    • booking actions
  • Bookings:
    • upcoming appointments
    • past appointments
  • Chat with the clinic:
    • real-time messaging
    • typing indicators
    • reactions/threads features (planned via Stream later)
  • AI assistant for dental/oral health Q&A
  • Video calls for urgent situations (Stream later)
  • Profile including:
    • sign out
    • required account deletion to avoid Apple rejection

Also built

  • A web dashboard using Next.js for the clinic
  • A landing page with:
    • Privacy Policy
    • Terms of Service

(Required for Apple approval.)

Key timeline / claims

  • The creator claims they built and published a similar calorie tracker app in 14 days using AI + a structured workflow.
  • The dentist app is developed iteratively:
    • plan → generate UI → wire backend → test on device → add real-time features → legal pages → final compliance

Technologies & product features emphasized (stack/tools)

Mobile app framework

  • Expo + React Native, with:
    • Dev Builds (for real features not supported by Expo Go)
    • NativeWind (Tailwind-style styling for React Native)
    • Expo native tabs to get “liquid glass” UI effects

Real-time chat & video

  • Stream:
    • real-time messaging with advanced chat UI behaviors
    • video calls
    • implementation accelerated using Stream Agent Skills

Backend / web dashboard

  • Next.js (web folder)
  • API routes (integrated backend within Next.js)
  • Drizzle for database access

Database

  • PostgreSQL hosted by Neon (cloud DB)
  • AI-generated schema.ts and seed.ts for test data

Auth

  • Clerk:
    • sign-in with Apple/Google
    • webhooks to sync created users from Clerk into the app DB

Monitoring / debugging

  • Sentry:
    • error monitoring + real-time alerts
    • structured logs and trace/performance insights
    • session replay to reproduce user issues
    • Sentry for React Native + Next.js
    • later: AI agent tracing (token usage, latency, tool usage, costs)

AI code review / security

  • CodeRabbit:
    • reviews large PRs automatically
    • security scanning prioritizes critical findings
    • supports automated fixes via prompts

Image handling / transformations

  • ImageKit:
    • image upload + optimization
    • URL-based transformations, including:
      • blur/reveal (privacy-style blurred images that unblur on interaction)
      • AI background removal
      • overlay (branding text/logo on images)

DevOps / build & distribution

  • Expo EAS:
    • build and distribute dev builds in the cloud
    • install on real iPhone via QR code
    • mentions TestFlight and OTAA conceptually (over-the-air updates)

Workflow (the core “tutorial strategy”)

1) Plan the product with AI (plan.md)

Before coding, the creator uses a “plan mode” prompt that acts like an interview:

  • defines goals and feature set
  • lists screens/pages
  • maps user flow
  • selects a tech stack
  • outputs a plan.md file as a single source of truth

Emphasis: if AI doesn’t know what to build, it will “guess” features.

2) Generate UI design + design system

Workflow:

  • collect reference styles (Pinterest + examples)
  • generate UI mockup images
  • create a design system (fonts, spacing, icons, components)

Progressive implementation loop:

  • screenshot the simulator output
  • compare to the design image
  • repeat until “identical or close enough”

3) Build mobile UI screen-by-screen (hard-coded first)

Process:

  • start from an Expo template
  • delete demo screens / reset project
  • use dev builds for “real app” features

Focus is initially on functional look/feel:

  • auth screens
  • onboarding screens
  • home screen (Expo native tabs + liquid glass effect)
  • booking screens (calendar logic validated later)
  • AI assistant UI
  • profile screens (including sub-screens like appointments/personal info)

4) Add auth wiring + onboarding logic (hard-coded → real later)

  • configure Clerk:
    • environment variables in the mobile env file
    • prompts to configure roles (patient vs staff)
  • fix issues via follow-up screenshots and AI prompts (examples):
    • text overflow
    • UI shadow/spacing
    • Apple sign-in issues in the simulator

5) Create PRs frequently and use CodeRabbit for review

Teaches a “branch + PR” process:

  • create a feature branch (or big change branch)
  • open a PR
  • CodeRabbit analyzes thousands of files/lines

CodeRabbit outputs:

  • categorized change stack
  • critical security issues with inline comments
  • recommendations/fixes via AI prompts

PRs can be merged after review, or fixed with additional agent runs.

6) Generate backend (Next.js API + DB schema)

AI uses plan.md to generate:

  • database schema (users/patients/dentists/appointments/etc.)
  • seed data for testing
  • API routes and endpoints

Key real-world backend concept:

  • Clerk webhooks
    • automatically sync “user created” events from Clerk into the database

7) Wire mobile UI to real backend data

  • replace hard-coded mobile UI data with DB-driven endpoints
  • validate critical flows like onboarding gating:
    • if onboarding isn’t completed, the user can’t proceed

8) Install and test on real device using EAS dev builds

Device-testing pipeline:

  • create eas.json
  • register device
  • build a dev build
  • scan QR code to install on iPhone

Also runs Expo tunnel/URL during dev-build testing.

9) Implement real-time chat + video calls (Stream skills)

Uses Stream Agent Skills:

  • install relevant skills (including React Native skill)
  • generate video calling + messaging features

On-device confirmations include:

  • typing indicators
  • real-time message delivery
  • image attachments and camera capture
  • incoming call + video call accept/leave

10) Add “last mile” production requirements: legal + deletion

  • generate Privacy Policy and Terms of Service pages using AI after scanning the codebase
  • add legal page assets (mockups/landing UI)
  • implement Delete Account:
    • confirmation dialog
    • sign out
    • deletes account in Clerk and cascades related DB data (noted in the tutorial)

Specific tutorial guidance / “how-to” calls out

Apple review requirements

  • must include account deletion
  • must provide privacy/terms pages and support links

Status bar + layout correctness

  • multiple fixes requested to ensure imagery/background spans the status bar region.

Expo Go vs Dev Build

  • Expo Go for learning/simple testing
  • Dev builds for real native modules/features

CodeRabbit setup

  • mentions free/pro trial options
  • integrates with GitHub PRs and automates security scanning

Sentry masking

  • masking can be disabled to view actual UI details during development

Stream skill vs “guessing”

  • agent skills provide correct up-to-date context
  • reduces integration errors

Main speakers / sources

  • Speaker: the video author/creator (speaks in first person; no explicit name provided in subtitles)

Tools/systems referenced

  • Claude Code (Claude/AI agent)
  • VS Code Cloud
  • Expo / EAS
  • Stream
  • Clerk
  • Neon (Postgres)
  • Sentry
  • CodeRabbit
  • ImageKit
  • GitHub
  • Next.js
  • NativeWind (Tailwind for React Native)

Original video