Architecture · Beginner
The MVP Architecture
Client-Side vs Full-Stack
Understanding the difference between a 'Browser-Only' prototype and a 'Full-Stack' application. Why your data disappears when you clear cache.
01
The 'Browser as Database' Concept
Many vibe-coded apps (like this one) start as Client-Side MVPs. This means there is no 'Server'. All data lives inside your browser's Local Storage.
- Pro: Zero cost. No database to configure. Insanely fast.
- Con: Data is trapped on one device. If you switch from Laptop to Phone, your data is gone.
- Risk: If you 'Clear Browsing History', you delete your entire database.
| Feature | Client-Side (Local) | Full-Stack (Cloud) |
|---|---|---|
| Data Storage | Browser Memory | Postgres Database |
| Persistence | Fragile (Cache clear wipes it) | Permanent |
| Multi-Device | Impossible | Standard |
| Cost | $0/mo | $5-25/mo |
02
The Upgrade Path
You typically start with Client-Side for speed, then upgrade when you have users.
1. MVP
Local Storage
Validate idea. User brings their own API Key.
2. Alpha
BaaS
Add Supabase/Firebase. Users can login and save data.
3. Beta
Backend
Move logic to a real server (Node/Python) for security.
03
Why No Backend Yet?
Adding a backend adds 'Friction'. You have to manage users, passwords, and server bills. Vibe coding prioritizes 'Speed to Reality' first.
“Don't build a server until you have a user.”