Supabase

​

What is Supabase?

• PostgreSQL Database - Powerful relational database
• Authentication - User management and auth
• Storage - File uploads and CDN
• Real-time - Database subscriptions
• Edge Functions - Serverless functions

​

Getting Your Supabase Credentials

​

Step 1: Create a Supabase Project

1. Go to supabase.com
2. Sign in or create an account
3. Click New Project
4. Fill in your project details:
   • Project name
   • Database password
   • Region (choose closest to your users)

​

Step 2: Get Your API Keys

1. Go to Project Settings (⚙️ icon in sidebar)
2. Navigate to API section
3. You’ll find:
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: Public API key (safe to use in client-side code)

​

Configuring Supabase in CodeRocket

​

Adding the Integration

1. Go to Account → Integrations
2. Click Add Integration on Supabase
3. Fill in the form:

Integration Name: My Blog Database
Project URL: https://xxxxx.supabase.co
Anon Key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

4. Click Test Connection to verify
5. Click Create Integration

​

What Gets Generated

​

1. Supabase Client Configuration

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

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. React Hooks (for React projects)

import { useEffect, useState } from 'react'
import { supabase } from '@/lib/supabase'
import { Database } from '@/types/database.types'

type Post = Database['public']['Tables']['posts']['Row']

export function usePosts() {
  const [posts, setPosts] = useState<Post[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

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

        if (error) throw error
        setPosts(data)
      } catch (err) {
        setError(err.message)
      } finally {
        setLoading(false)
      }
    }

    fetchPosts()
  }, [])

  return { posts, loading, error }
}

​

4. Environment Variables

VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

​

Common Use Cases

​

Example 1: Simple Blog

Create a blog with posts that have title, content, and author.
Users should be able to create, read, update, and delete posts.

• posts table schema
• CRUD API routes
• Post list component
• Post creation form
• Post editing interface

​

Example 2: Todo App

Build a todo application with tasks that can be marked as complete.
Each todo should have a title, description, and due date.

• todos table
• Task components
• Complete/incomplete toggle
• Date picker for due dates
• Filter by status

​

Example 3: User Authentication

Add user authentication with login and signup forms.
Users should only see their own data.

• Auth context and hooks
• Login/signup components
• Protected routes
• Row Level Security policies

​

Setting Up Your Database Schema

​

Option 1: Let the AI Design It

"Create a blog with posts, comments, and categories"

​

Option 2: Pre-define Your Schema

1. Go to Table Editor in Supabase dashboard
2. Click New Table
3. Define columns and relationships
4. Set up RLS policies

"Build a UI for my existing posts table in Supabase"

​

Option 3: Provide Schema in Integration Config

{
  "tables": [
    {
      "name": "posts",
      "columns": [
        { "name": "id", "type": "uuid", "isPrimaryKey": true },
        { "name": "title", "type": "text" },
        { "name": "content", "type": "text" },
        { "name": "author_id", "type": "uuid" },
        { "name": "created_at", "type": "timestamptz" }
      ]
    }
  ]
}

​

Row Level Security (RLS)

​

Example RLS Policy

-- Enable RLS
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- Users can only read their own posts
CREATE POLICY "Users can view own posts"
  ON posts FOR SELECT
  USING (auth.uid() = author_id);

-- Users can insert their own posts
CREATE POLICY "Users can create posts"
  ON posts FOR INSERT
  WITH CHECK (auth.uid() = author_id);

​

Real-time Subscriptions

"Make the posts list update in real-time when new posts are added"

useEffect(() => {
  const subscription = supabase
    .channel('posts')
    .on('postgres_changes', {
      event: 'INSERT',
      schema: 'public',
      table: 'posts'
    }, (payload) => {
      setPosts(prev => [payload.new, ...prev])
    })
    .subscribe()

  return () => {
    subscription.unsubscribe()
  }
}, [])

​

Storage Integration

"Add image upload functionality for post cover images"

• File upload component
• Storage bucket configuration
• Image preview
• Public URL generation

​

Best Practices

​

Troubleshooting

​

”Failed to connect to Supabase”

​

”RLS policy prevents access”

1. Check your RLS policies in Supabase
2. Ensure the user is authenticated if required
3. Verify the policy allows the operation (SELECT, INSERT, etc.)
4. Consider temporarily disabling RLS for testing

​

”TypeScript errors in generated code”

• Make sure to install @supabase/supabase-js
• Run npm install to ensure dependencies are installed
• Check that environment variables are properly set

​

Migration from Other Databases

1. Export your existing schema
2. Import into Supabase using the SQL Editor
3. Update your CodeRocket integration
4. Regenerate components with the new integration

​

Advanced Features

​

Edge Functions

"Create a Supabase Edge Function to send welcome emails"

​

Database Functions

"Create a database function to calculate post statistics"

​

Webhooks

"Set up a webhook to notify Slack when new posts are created"

​

Next Steps