Phase 6: Building With Real Data · 30 min · Supabase · Any vibe coding tool

Data Patterns That Don't Break Production

Loading states, error handling, optimistic updates — the patterns that make your app feel professional instead of broken.

Hiring signal: What changes when you use this: your app handles slow networks and errors gracefully — which means users don't see blank screens or crashes.

What you will learn

Implement loading states (skeletons, spinners) while data loads
Handle errors gracefully with user-facing messages
Use optimistic updates for responsive UIs
Apply pagination and limits to avoid loading too much data
Implement basic caching for frequently accessed data

Your Mission

Audit and fix data-driven components with loading states, error handling, empty states, optimistic updates, and query limits. Output: data_patterns_audit.md.

You need: A Supabase-connected app with data-driven components.

Time: 30 minutes.

Step 1: Learn the Three-State Principle (5 min)

Every data-driven component has three possible states. Most AI-generated code only handles success.

The three-state principle
Every data-driven component has three possible states: loading, error, and success. Most AI-generated code only handles success — it assumes data arrives, is correct, and is non-empty. In production, loading and error states are more common than success states. Handle all three.

The pattern:

function HabitList() {
  const [habits, setHabits] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    async function fetchHabits() {
      const { data, error } = await supabase.from('habits').select('*')
      if (error) {
        setError(error.message)
      } else {
        setHabits(data)
      }
      setLoading(false)
    }
    fetchHabits()
  }, [])

  if (loading) return <LoadingSkeleton />
  if (error) return <ErrorMessage message={error} />
  if (habits.length === 0) return <EmptyState />
  return habits.map(h => <HabitCard key={h.id} habit={h} />)
}

Unlock the full lesson

You've read the first 2 sections. The rest of this lesson covers Step 2: Audit Each Data Component (10 min), Component Audit, Step 3: Fix Missing States (10 min), Fixes Applied, Step 4: Add Optimistic Updates (5 min), Optimistic Updates, Step 5: Add Query Limits (3 min), Query Limits, Step 6: Test Error Handling (2 min), Error Test, You're Done — plus a hands-on lab, quiz, and project artifact.

Create a free account to unlock Phase 0 and Phase 1 of every course — no credit card.

Related lessons

Browse all courses · View pricing · DeVenture Academy