Skip to main content

​
What is App Data?

App Data lets your apps do more than just display information. With App Data enabled, your apps can:
  • Save your data - Store and retrieve information that persists between sessions
  • Upload files - Let users upload images, videos, PDFs, and more
  • User accounts - Allow users to sign up, log in, and have their own private data
  • Real-time updates - Data syncs instantly across all users
App Data is powered by Supabase, an open-source cloud platform.

​
Getting Started

​
Step 1: Create a Supabase Account

  1. Go to supabase.com
  2. Sign in or create a free account
  3. Click New Project
  4. Fill in your project details:
    • Project name (e.g., “My App”)
    • Database password (save this somewhere safe)
    • Region (choose the one closest to your users)

​
Step 2: Get Your Keys

Once your project is created:
  1. Go to Project Settings (⚙️ icon in sidebar)
  2. Click on API
  3. Copy these two values:
    • Project URL: https://xxxxx.supabase.co
    • Anon Key: A long string starting with eyJ...

​
Step 3: Connect to CodeRocket

  1. Go to Account → Integrations in CodeRocket
  2. Click Add Integration on App Data
  3. Paste your Project URL and Anon Key
  4. Click Test Connection to make sure it works
  5. Click Save
That’s it! Your apps can now save data, upload files, and manage user accounts.

​
What Gets Generated

When you enable App Data for a project and ask for features that need to save data, CodeRocket automatically creates:

​
1. Connection Code

src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

​
2. TypeScript Types

src/types/database.types.ts
export type Database = {
  public: {
    Tables: {
      posts: {
        Row: {
          id: string
          title: string
          content: string
          created_at: string
        }
        Insert: {
          id?: string
          title: string
          content: string
          created_at?: string
        }
        Update: {
          id?: string
          title?: string
          content?: string
          created_at?: string
        }
      }
    }
  }
}

​
3. Data Hooks (for React projects)

Code to load and save data from your components:
src/hooks/usePosts.ts
import { useEffect, useState } from 'react'
import { supabase } from '@/lib/supabase'

export function usePosts() {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchPosts = async () => {
      const { data } = await supabase
        .from('posts')
        .select('*')
        .order('created_at', { ascending: false })

      setPosts(data || [])
      setLoading(false)
    }

    fetchPosts()
  }, [])

  return { posts, loading }
}
You don’t need to worry about environment variables - CodeRocket automatically injects your credentials.

​
Example Prompts

Here are some things you can ask CodeRocket to build:

​
Save Data

"Create a blog where I can write and save posts"

"Build a todo app where tasks are saved between sessions"

"Make a contacts app where I can add and manage contacts"

​
User Accounts

"Add login and signup so users can have their own data"

"Let users create accounts and save their preferences"

​
File Uploads

"Add profile picture upload for users"

"Create a photo gallery where users can upload images"

"Build a document manager for uploading PDFs"

​
Running SQL Migrations

When CodeRocket generates features that need to save data, it creates SQL code that you need to run in Supabase:
  1. Copy the SQL code from CodeRocket
  2. Go to your Supabase Dashboard
  3. Click SQL Editor in the sidebar
  4. Paste the SQL code
  5. Click Run
That’s it! Your app is now ready to save data.
CodeRocket generates all the necessary security rules (called RLS policies) automatically. Your data is protected by default.

​
Real-time Updates

Want data to sync instantly across all users? Just ask: 
"Make the posts list update in real-time when new posts are added"
CodeRocket will generate code that automatically updates the UI when data changes - no page refresh needed!

​
File Uploads

Your apps can let users upload images, videos, documents, and more. Just describe what you need: 
"Add profile picture upload for users"

"Create a photo gallery where users can upload images"

"Build a document manager for PDF files"

​
Supported File Types

  • Images: PNG, JPEG, GIF, WebP
  • Videos: MP4, WebM
  • Documents: PDF, TXT, and more

​
How It Works

CodeRocket generates everything you need:
  1. SQL migration - Creates a storage bucket in Supabase
  2. Upload code - Handles the file upload process
  3. UI component - File picker with upload progress
Just run the SQL migration in your Supabase dashboard and your app can accept file uploads!
Files are stored securely in the cloud and delivered fast via CDN. Default limit is 50MB per file.

​
Tips

Create a free Supabase project for testing. Once everything works, you can switch to your production project.
CodeRocket automatically generates security rules (RLS policies) that protect your data. Users can only access their own data by default.
CodeRocket automatically injects your Supabase credentials. You don’t need to set up environment variables manually.

​
Troubleshooting

​
”Failed to connect”

1

Check your Project URL

Make sure it looks like: https://xxxxx.supabase.co
2

Check your Anon Key

Copy it fresh from Supabase dashboard → Settings → API
3

Make sure your project is running

Free Supabase projects pause after 1 week of inactivity. Go to your dashboard and restart if needed.

​
”Data not showing up”

  1. Make sure you ran the SQL migration in Supabase
  2. Check if you’re logged in (if the app requires it)
  3. Try refreshing the page

​
For Developers

App Data is powered by Supabase, which provides:
  • PostgreSQL Database - Powerful relational database
  • Row Level Security - Data access rules at the database level
  • Real-time Subscriptions - Live data sync via WebSockets
  • Storage - S3-compatible file storage with CDN
  • Edge Functions - Serverless functions (Deno)
The generated code uses the @supabase/supabase-js client library.For advanced use cases like custom RLS policies, database functions, or edge functions, you can access your Supabase dashboard directly.

​
Next Steps

See Examples

More example prompts and patterns

Get Help

Common issues and solutions