💾 CHEAT SHEET: DATA STORAGE DECISION GUIDE powered by eMOBIQ AI

Quick Reference for Choosing the Right Storage

---

QUICK DECISION TREE

START HERE
    ↓
Do multiple people need to access this data?
    ↓                              ↓
   YES                            NO
    ↓                              ↓
    ↓                       USE LOCAL STORAGE
    ↓
Does the data already exist in another system?
    ↓                              ↓
   YES                            NO
    ↓                              ↓
 USE API                     USE SUPABASE

---

STORAGE TYPE COMPARISON

Feature	Local Storage	Supabase	External API
Speed	⚡⚡⚡ Fastest	⚡⚡ Fast	⚡ Varies
Offline	✅ Yes	❌ No	❌ No
Share Data	❌ No	✅ Yes	✅ Yes
Multi-Device	❌ No	✅ Yes	✅ Yes
Backup	❌ No	✅ Auto	✅ Yes
Setup	⭐ Easy	⭐⭐ Medium	⭐⭐⭐ Complex
Cost	💰 Free	💰 Free tier	💰💰 Varies
Control	🎯 Full	🎯 Full	🔒 Limited
Storage Size	~5-10MB	Several GB	Unlimited
Best For	Learning, Single-user	New apps, Multi-user	Integration

---

1️⃣ LOCAL STORAGE

What Is It?

A notebook in your pocket - data stays on your device.

When to Use

• ✅ Learning and practice
• ✅ Single-user apps
• ✅ Offline functionality
• ✅ Settings/preferences
• ✅ Draft content
• ✅ Quick prototypes

When NOT to Use

• ❌ Need to share data
• ❌ Multiple devices
• ❌ Important data (no backup)
• ❌ Large amounts of data
• ❌ Collaborative features

Examples

• Personal to-do list
• Calculator history
• Note-taking app (offline)
• Game settings
• Theme preferences

Sample Prompt

Store the form data in local storage.

When form is submitted:
- Save data with key: "registrations"
- Format: JSON.stringify(dataArray)
- Log: "Saved to local storage"

When app loads:
- Load from key: "registrations"
- Parse: JSON.parse(storedData)
- If null, use empty array: []
- Display loaded data

How It Works

USER INPUT → VALIDATE → localStorage.setItem() → DATA SAVED
                                                      ↓
PAGE REFRESH → localStorage.getItem() → PARSE → DISPLAY

Pros & Cons

Pros: - 🚀 Instant (no network delay) - 💾 Works offline - 🎯 Simple to implement - 💰 Free - 🔒 Private to device

Cons: - ❌ Lost if app deleted - ❌ Can’t sync between devices - ❌ Limited storage (~5MB) - ❌ Not backed up - ❌ Single user only

---

2️⃣ SUPABASE (Cloud Database)

What Is It?

Like Google Sheets meets Database - shared storage in the cloud.

When to Use

• ✅ Multi-user apps
• ✅ Data needs to sync
• ✅ New app from scratch
• ✅ Need backup/security
• ✅ Collaborative features
• ✅ Important data

When NOT to Use

• ❌ Just learning basics
• ❌ Need offline-first
• ❌ Data in other system already
• ❌ Very simple personal app

Examples

• Student management system
• Team task manager
• Inventory tracker
• Attendance system
• Customer database

Sample Prompt

Connect to Supabase and store data there.

Credentials:
- URL: [YOUR_SUPABASE_URL]
- Key: [YOUR_ANON_KEY]
- Table: registrations

When form is submitted:
1. Validate data
2. Save to Supabase:
   const { data, error } = await supabase
     .from('registrations')
     .insert([formData])
     .select()

3. If successful:
   - Show success message
   - Refresh list
   - Clear form

4. If error:
   - Show error message
   - Log error to console
   - Keep form data

How It Works

USER INPUT → VALIDATE → SEND TO CLOUD → SUPABASE SAVES
                                              ↓
PAGE LOAD → REQUEST DATA → SUPABASE RETURNS → DISPLAY

Setup Quick Steps

1. Go to supabase.com
2. Create account (free)
3. Create new project
4. Create table with columns
5. Set up RLS policies
6. Get URL and API key
7. Connect from app

Pros & Cons

Pros: - ☁️ Cloud-based (access anywhere) - 👥 Multi-user support - 💾 Automatic backups - 🔄 Real-time sync - 📊 Visual dashboard - 🔐 Built-in security (RLS) - 💰 Free tier available

Cons: - 🌐 Requires internet - ⏱️ Network latency - 🎓 Learning curve - ⚙️ Setup required

---

3️⃣ EXTERNAL API

What Is It?

Connecting to data that lives in another company’s system.

When to Use

• ✅ Data exists in ERP/CRM
• ✅ Company requirement
• ✅ Integration needed
• ✅ Third-party service
• ✅ Don’t control data structure

When NOT to Use

• ❌ Building new app
• ❌ Need full control
• ❌ Data doesn’t exist yet
• ❌ Learning basics

Examples

• Inventory from Business Central
• Customers from Salesforce
• Weather from OpenWeather
• Orders from Shopify
• Products from company ERP

Sample Prompt

Connect to external API and fetch data.

API Details:
- Endpoint: https://api.example.com/v1/items
- Method: GET
- Authentication: Bearer Token
- Token: [PROVIDED_BY_IT]

Fetch data:
1. Make API request with auth header
2. Show loading indicator
3. If successful:
   - Parse response data
   - Display in list
   - Show count
4. If error:
   - Show error message
   - Log error details
   - Provide retry button

Log all API calls for debugging.

How It Works

YOUR APP → API REQUEST → EXTERNAL SYSTEM
              ↓
         PROCESSES
              ↓
YOUR APP ← API RESPONSE ← RETURNS DATA
    ↓
 DISPLAY

Common API Methods

• GET: Read data (fetch items)
• POST: Create data (add customer)
• PUT/PATCH: Update data (edit order)
• DELETE: Remove data (delete record)

Pros & Cons

Pros: - 🔗 Access existing data - 🏢 Enterprise integration - 📊 Live data (always current) - 🔐 Secure (managed by IT) - 📈 Scalable

Cons: - 🔒 Limited control - 🎫 Need credentials/permissions - 📋 Fixed data structure - 🐛 Harder to debug - ⏱️ Depends on their uptime - 💰 May have costs

---

SWITCHING BETWEEN STORAGE TYPES

From Local Storage to Supabase

Step 1: Set up Supabase - Create account and project - Create table matching your data structure - Get credentials

Step 2: Update Save Operation

Change from:
localStorage.setItem('key', JSON.stringify(data))

To:
await supabase.from('table').insert([data])

Step 3: Update Load Operation

Change from:
JSON.parse(localStorage.getItem('key'))

To:
const { data } = await supabase.from('table').select('*')

Step 4: Update Delete

Change from:
// Remove from local array and save back

To:
await supabase.from('table').delete().eq('id', itemId)

From Supabase to API

Use when: Company requires using their existing system

Changes needed: 1. Replace Supabase endpoints with API endpoints 2. Add authentication headers 3. Handle different response format 4. Can’t create/modify data structure

---

DATA STORAGE PATTERNS

Pattern 1: Read-Only (Display)

Best: External API or Supabase
- Just displaying existing data
- No user modifications
- Example: Product catalog

Pattern 2: Create & Read (Add + View)

Best: Local Storage or Supabase
- Add new items
- View all items
- Example: Notes app, visitor log

Pattern 3: Full CRUD (Create, Read, Update, Delete)

Best: Supabase
- Complete data management
- Multiple operations
- Example: Student management

Pattern 4: Hybrid (Mixed Sources)

Use: Supabase + API
- Store app data in Supabase
- Fetch reference data from API
- Example: Order app (orders in Supabase, products from API)

---

TROUBLESHOOTING BY STORAGE TYPE

Local Storage Issues

Problem: Data disappears

Fix:
- Verify key name is consistent
- Check data is stringified before save
- Ensure save happens before app closes

Problem: Data not loading

Fix:
- Check key name matches
- Handle null case (no data yet)
- Parse JSON correctly

Supabase Issues

Problem: Can’t connect

Fix:
- Verify URL format (https://xxx.supabase.co)
- Check API key (starts with eyJ)
- Confirm RLS policies allow access
- Test internet connection

Problem: Data not appearing

Fix:
- Check table name spelling
- Verify column names match
- Review RLS policies
- Check browser console for errors

API Issues

Problem: 401/403 errors

Fix:
- Verify API key/token is correct
- Check authentication header format
- Confirm permissions with IT team
- Token may have expired

Problem: CORS errors

Fix:
- Contact IT team (server-side fix needed)
- Cannot be fixed in client app alone
- May need proxy or different approach

---

QUICK REFERENCE: PROMPT TEMPLATES

For Local Storage

Store data in local storage:
- Key: "[YOUR_KEY]"
- Format: JSON array
- Save after: [TRIGGER]
- Load on: page load
- Handle empty case: use []

For Supabase

Connect to Supabase:
- URL: [YOUR_URL]
- Key: [YOUR_KEY]
- Table: [TABLE_NAME]

CRUD Operations:
- Create: .insert([data])
- Read: .select('*')
- Update: .update(changes).eq('id', id)
- Delete: .delete().eq('id', id)

For API

Connect to API:
- Endpoint: [URL]
- Method: [GET/POST/PUT/DELETE]
- Auth: [Bearer/API Key/Basic]
- Headers: [REQUIRED_HEADERS]

Handle response:
- Success: [ACTION]
- Error: [ERROR_HANDLING]

---

DECISION FLOWCHART

┌─────────────────────────────┐
│  What are you building?     │
└──────────┬──────────────────┘
           │
    ┌──────┴──────┐
    │             │
Practice/      Real App
Learning          │
    │             │
LOCAL         Is it for
STORAGE    multiple users?
              │
         ┌────┴────┐
         │         │
        NO        YES
         │         │
    LOCAL or    Connect to
    SUPABASE    existing system?
                   │
              ┌────┴────┐
              │         │
             YES       NO
              │         │
             API    SUPABASE

---

BEST PRACTICES

For Local Storage

• ✅ Always stringify before saving
• ✅ Always parse when loading
• ✅ Handle null/undefined cases
• ✅ Use consistent key names
• ✅ Clear old data periodically

For Supabase

• ✅ Set up RLS policies properly
• ✅ Use meaningful table names
• ✅ Add timestamps (created_at)
• ✅ Handle errors gracefully
• ✅ Show loading indicators

For APIs

• ✅ Never share API keys publicly
• ✅ Handle rate limiting
• ✅ Cache responses when appropriate
• ✅ Provide retry mechanisms
• ✅ Log errors for debugging

---

REMEMBER

🎯 Local Storage: Fast, offline, single-user ☁️ Supabase: Shared, backed up, multi-user 🔌 API: Integration, existing systems

Choose based on your specific needs!

---

Print this and keep it handy!

Version 1.0 | eMOBIQ AI Workshop Materials © Orangekloud Technology Inc.