Flows category icon
Debugging
Beginner

Add Database Persistence

Your app forgets everything on refresh: move state into a real database with working CRUD.

5 steps17 verify checks45-75 minutesWorks with: emergent · chatgpt · claude · cursor
Start Guided Walkthrough

The Route

0/5 verified

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack
PROJECT CONTEXT:
My AI-built app holds data in component state or localStorage, so everything disappears on refresh or differs between devices.

GOAL:
Persist all meaningful app data in the database with real create/read/update/delete flows.

REQUIREMENTS:
- Inventory of every piece of state that should persist
- Database models and endpoints for each
- UI wired to load from and write to the backend
- Loading/empty/error states on every read
- Refresh-proof and multi-device-consistent data

CONSTRAINTS:
- localStorage is not the database for shared or important data
- Do not lose users' current in-memory data during migration if avoidable

DEFINITION OF DONE:
- Every important entity survives refresh
- Creates, edits, and deletes persist
- Lists load from the backend with proper states
- Two sessions see consistent data

COMMON FAILURES TO AVOID:
- Todo/items arrays living only in useState
- Saves that update state but never call an API
- Reads that never fetch, showing stale hardcoded data
- Missing loading states causing flash-of-empty bugs

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.

Related routes

More Debugging flows that share ground with this one.

Flows category icon
Debugging

Add Loading/Error States

Eliminate silent failures and frozen screens: add loading, empty, and error states across the whole app.

01Inventory async surfaces
02Add loading states
03Add error states with retry

+2 more steps to Done

Best foryour first pass at this - no prior setup assumed

5 steps30-60 minutesBeginner
Flows category icon
Debugging

Fix App That Looks Good But Does Not Work

The systematic recovery flow for beautiful-but-broken AI builds: audit honestly, then fix by functional priority.

01Run a brutal functional audit
02Prioritize the fix order
03Fix the core value action

+3 more steps to Done

Best forbuilders who have shipped a basic app before

6 steps60-120 minutesIntermediate
Flows category icon
Debugging

Fix Broken Buttons

Hunt down every dead button in your AI-built app and wire each one to real, verified behavior.

01Inventory every interactive control
02Fix dead buttons
03Fix fake buttons

+2 more steps to Done

Best foryour first pass at this - no prior setup assumed

5 steps30-60 minutesBeginner

Made with Emergent