Objective
Your mission
Identify your app's current data stage and plan the transition to the next stage. Output: transition_plan.md.
You need: A project you've built with AI (any tool).
Time: 20 minutes.
Step 1: learn the three stages of data (5 min)
Stage 1: Mock Data (Prototype)
const habits = [
{ id: 1, name: 'Drink water', streak: 5, completed: true },
{ id: 2, name: 'Exercise', streak: 3, completed: false },
]
Hardcoded in code. Same data every time. Good for: prototyping UI, testing layouts. Limitations: no persistence, can't add/edit/delete for real.
Stage 2: LocalStorage (Prototype+)
const habits = JSON.parse(localStorage.getItem('habits') || '[]')
localStorage.setItem('habits', JSON.stringify(habits))
Stored in browser. Persists across refreshes. Good for: single-user apps, personal tools. Limitations: device-specific, no multi-user, ~5MB limit.
Stage 3: Real Database (Production)
const { data, error } = await supabase.from('habits').select('*')
Stored on server. Good for: production, multi-user, cross-device sync. Limitations: requires setup, auth, async patterns, error handling.
Don't skip to Stage 3 too early
A common mistake: jumping straight to a real database before the UI is stable. Build with mock data first. Get the UI right. Then localStorage to test persistence. Then a real database when you need multi-user or cross-device. Each stage adds complexity — only add it when you need it.
Step 2: identify your current stage (3 min)
Look at a project you've built with AI. Which stage is it in?
Write in your file:
## Current Stage
Project: [name]
Stage: [mock / localStorage / real database]
Evidence: [e.g., "Data is hardcoded in a const array" or "Uses localStorage.getItem" or "Queries supabase.from()"]
Step 3: plan the transition (7 min)
What would change if you moved to the next stage?
Write in your file:
## Next Stage: [stage name]
### New Features Enabled
- [e.g., "Data persists across refreshes" or "Multiple users can have their own data"]
### New Complexity Added
- [e.g., "Need to handle async data loading" or "Need authentication"]
### New Patterns Needed
- [e.g., "Loading states (spinner while data loads)"]
- [e.g., "Error handling (what if the network is down?)"]
- [e.g., "Auth flow (login, signup, session)"]
### What Changes in the Code
[Describe the key difference — e.g., "Everything becomes asynchronous. Instead of `const habits = [data]`, it's `const [habits, setHabits] = useState(null)` with a useEffect that fetches from the database."]
Step 4: make the decision (5 min)
Write in your file:
## Decision: [Transition now / Stay at current stage]
## Reasoning
[Why? Reference the features you need vs. the complexity it adds.]
## If Transitioning — Spec for the AI
"Transition this app from [current stage] to [next stage]. Here's what needs to change:
1. [change 1]
2. [change 2]
3. [change 3]
Keep the existing UI and functionality. Only change the data layer."
Your UI is still changing daily and only you use the app. When should you move to a real database?
Each stage adds complexity: mock data, then localStorage, then a real database once you need several users or devices.