Usage Examples

Overview

This guide provides real-world examples of using integrations in CodeRocket projects. Each example includes the prompt, expected output, and tips for customization.

Supabase Examples

Example 1: Task Management App

Setup:

Create a Supabase integration
Enable it for your project

Prompt:

Create a task management app with:
- Tasks with title, description, due date, and status
- Ability to mark tasks as complete
- Filter tasks by status (all, active, completed)
- Sort tasks by due date

What Gets Generated:

export interface Task {
  id: string
  title: string
  description: string
  due_date: string
  status: 'active' | 'completed'
  user_id: string
  created_at: string
  updated_at: string
}

Customization Ideas:

Add priority levels (high, medium, low)
Implement task categories or tags
Add recurring tasks
Enable task sharing with other users

Example 2: E-commerce Product Catalog

Prompt:

Build a product catalog with:
- Products with name, price, description, and images
- Categories for organizing products
- Search and filter functionality
- Shopping cart

Generated Structure:

Database Schema
Components
Hooks

Tables created:

products (id, name, price, description, image_url, category_id)
categories (id, name, slug)
cart_items (id, user_id, product_id, quantity)

Pro Tips:

Add Row Level Security to ensure users only see their own cart items:

CREATE POLICY "Users can view own cart"
  ON cart_items FOR SELECT
  USING (auth.uid() = user_id);

Prompt:

Create a social feed where users can:
- Post updates with text and images
- Like and comment on posts
- Follow other users
- See a personalized feed

Key Features Generated:

Database Schema

posts table with user_id, content, image_url
likes table for post likes
comments table for post comments
follows table for user relationships

Real-time Updates

Real-time subscriptions for:

New posts in feed
New likes on your posts
New comments

Complex Queries

Generated queries handle:

Fetching feed from followed users
Counting likes and comments
Pagination
Nested data (post with user info)

Sample Generated Query:

const { data: feed } = await supabase
  .from('posts')
  .select(`
    *,
    users:user_id (id, name, avatar_url),
    likes (count),
    comments (count)
  `)
  .in('user_id', followedUserIds)
  .order('created_at', { ascending: false })
  .range(0, 19)

Example 4: Authentication System

Prompt:

Implement user authentication with:
- Email/password signup
- Login form
- Password reset
- Protected routes
- User profile

Generated Files:

src/
├── contexts/
│   └── AuthContext.tsx          # Auth state management
├── components/
│   ├── LoginForm.tsx            # Login component
│   ├── SignupForm.tsx           # Signup component
│   ├── PasswordReset.tsx        # Password reset form
│   └── ProtectedRoute.tsx       # Route wrapper
├── hooks/
│   └── useAuth.ts               # Auth hooks
└── lib/
    └── supabase.ts              # Configured client

Usage:

import { useAuth } from '@/hooks/useAuth'

function MyComponent() {
  const { user, signIn, signOut } = useAuth()

  if (!user) {
    return <LoginForm onSubmit={signIn} />
  }

  return (
    <div>
      <h1>Welcome {user.email}</h1>
      <button onClick={signOut}>Logout</button>
    </div>
  )
}

Multi-Integration Examples

Example 5: SaaS App (Supabase + Stripe)

Stripe integration is coming soon. This example shows the intended workflow.

Setup:

Enable Supabase for database
Enable Stripe for payments (when available)

Prompt:

Build a SaaS application with:
- User accounts (Supabase)
- Subscription plans (Stripe)
- Protected features based on plan
- Usage tracking

Expected Generation:

User authentication via Supabase
Stripe checkout integration
Webhook handlers for subscription events
Plan-based feature gating
Usage metrics in database

Advanced Patterns

Pattern 1: Optimistic Updates

Prompt:

"Make the todo list update immediately when adding a new task,
even before the database confirms"

Generated Code:

const addTask = async (task: NewTask) => {
  // Optimistically add to UI
  const tempId = `temp-${Date.now()}`
  setTasks(prev => [{ ...task, id: tempId }, ...prev])

  // Save to database
  const { data, error } = await supabase
    .from('tasks')
    .insert(task)
    .select()
    .single()

  if (error) {
    // Revert on error
    setTasks(prev => prev.filter(t => t.id !== tempId))
    showError(error.message)
  } else {
    // Replace temp with real data
    setTasks(prev =>
      prev.map(t => t.id === tempId ? data : t)
    )
  }
}

Pattern 2: Infinite Scroll

Prompt:

"Add infinite scroll to load more posts as the user scrolls"

Generated with:

Pagination logic
Intersection Observer
Loading states
End-of-data detection

const loadMore = async () => {
  if (loading || !hasMore) return

  setLoading(true)
  const { data } = await supabase
    .from('posts')
    .select('*')
    .range(posts.length, posts.length + 19)

  if (data.length < 20) setHasMore(false)
  setPosts(prev => [...prev, ...data])
  setLoading(false)
}

Pattern 3: File Upload with Progress

Prompt:

"Add image upload with progress bar for profile pictures"

Generated Features:

File validation (type, size)
Upload progress tracking
Preview before upload
Error handling
Storage bucket and policies (via SQL migration)

SQL Migration Generated:

insert into storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
values ('avatars', 'avatars', true, 5242880, array['image/png', 'image/jpeg', 'image/webp']);

create policy "Users can upload avatars"
  on storage.objects for insert
  with check (bucket_id = 'avatars' and auth.role() = 'authenticated');

create policy "Public avatar access"
  on storage.objects for select
  using (bucket_id = 'avatars');

Upload Service Generated:

const uploadAvatar = async (file: File) => {
  const fileExt = file.name.split('.').pop()
  const fileName = `${user.id}/${Date.now()}.${fileExt}`

  const { data, error } = await supabase.storage
    .from('avatars')
    .upload(fileName, file, {
      cacheControl: '3600',
      upsert: false
    })

  if (error) throw error

  const { data: { publicUrl } } = supabase.storage
    .from('avatars')
    .getPublicUrl(data.path)

  return publicUrl
}

Pattern 4: Media Gallery with Multiple File Types

Prompt:

"Create a media gallery where users can upload images and videos"

Generated Features:

Multi-file upload support
Image and video preview
File type detection and validation
Grid display with thumbnails
Delete functionality

SQL Migration Generated:

insert into storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
values (
  'media',
  'media',
  true,
  104857600,
  array['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'video/mp4', 'video/webm']
);

create table public.media_items (
  id uuid primary key default uuid_generate_v4(),
  user_id uuid references auth.users not null,
  storage_path text not null,
  public_url text not null,
  file_type text not null,
  file_name text,
  file_size bigint,
  created_at timestamptz default now()
);

alter table public.media_items enable row level security;

create policy "Users can view all media"
  on public.media_items for select using (true);

create policy "Users can upload their own media"
  on public.media_items for insert
  with check (auth.uid() = user_id);

create policy "Users can delete their own media"
  on public.media_items for delete
  using (auth.uid() = user_id);

Upload Component Generated:

export function MediaUpload({ onUpload }) {
  const [uploading, setUploading] = useState(false)

  const handleFiles = async (e) => {
    const files = Array.from(e.target.files || [])
    setUploading(true)

    for (const file of files) {
      const fileExt = file.name.split('.').pop()
      const fileName = `${Date.now()}-${Math.random().toString(36).slice(2)}.${fileExt}`

      const { data, error } = await supabase.storage
        .from('media')
        .upload(fileName, file)

      if (!error) {
        const { data: { publicUrl } } = supabase.storage
          .from('media')
          .getPublicUrl(data.path)

        await supabase.from('media_items').insert({
          user_id: user.id,
          storage_path: data.path,
          public_url: publicUrl,
          file_type: file.type.startsWith('video') ? 'video' : 'image',
          file_name: file.name,
          file_size: file.size
        })

        onUpload({ path: data.path, publicUrl, type: file.type })
      }
    }
    setUploading(false)
  }

  return (
    <input
      type="file"
      multiple
      accept="image/*,video/*"
      onChange={handleFiles}
      disabled={uploading}
    />
  )
}

Best Practices in Generated Code

The AI follows these best practices:

Error Handling

All database operations wrapped in try-catch with user-friendly error messages.

Loading States

Components show loading indicators during async operations.

Type Safety

Full TypeScript support with generated types from your schema.

Security

RLS-aware queries, never bypassing security unless explicitly needed.

Performance

Optimized queries with proper indexing suggestions and pagination.

Start simple and iterate: First Prompt:

"Create a basic blog with posts"

Then Iterate:

"Add comments to posts"
"Add user profiles"
"Add image uploads"
"Make it real-time"
"Add search functionality"

Each iteration builds on the previous code, maintaining consistency.

Tips for Better Results

Be Specific

Instead of “Add a database”, say “Add a Supabase posts table with title, content, and author”

Mention Relationships

Specify how data relates: “Each post belongs to a user” or “Categories have many products”

Request Features Explicitly

List specific features: “Add CRUD operations, search, and pagination”

Reference Your Schema

If you have existing tables: “Use my existing posts table from Supabase”

Next Steps

Supabase Guide

Deep dive into Supabase integration

Troubleshooting

Common issues and solutions

Getting Started

GitHub Integration

Integrations

Deployment

Overview

Supabase Examples

Example 1: Task Management App

Example 2: E-commerce Product Catalog

Example 4: Authentication System

Multi-Integration Examples

Example 5: SaaS App (Supabase + Stripe)

Advanced Patterns

Pattern 1: Optimistic Updates

Pattern 2: Infinite Scroll

Pattern 3: File Upload with Progress

Pattern 4: Media Gallery with Multiple File Types

Best Practices in Generated Code

Iteration and Refinement

Tips for Better Results

Be Specific

Mention Relationships

Request Features Explicitly

Reference Your Schema

Next Steps

Supabase Guide

Troubleshooting

Getting Started

GitHub Integration

Integrations

Deployment

​Overview

​Supabase Examples

​Example 1: Task Management App

​Example 2: E-commerce Product Catalog

​Example 3: Social Media Feed

​Example 4: Authentication System

​Multi-Integration Examples

​Example 5: SaaS App (Supabase + Stripe)

​Advanced Patterns

​Pattern 1: Optimistic Updates

​Pattern 2: Infinite Scroll

​Pattern 3: File Upload with Progress

​Pattern 4: Media Gallery with Multiple File Types

​Best Practices in Generated Code

​Iteration and Refinement

​Tips for Better Results

Be Specific

Mention Relationships

Request Features Explicitly

Reference Your Schema

​Next Steps

Supabase Guide

Troubleshooting

Overview

Supabase Examples

Example 1: Task Management App

Example 2: E-commerce Product Catalog

Example 3: Social Media Feed

Example 4: Authentication System

Multi-Integration Examples

Example 5: SaaS App (Supabase + Stripe)

Advanced Patterns

Pattern 1: Optimistic Updates

Pattern 2: Infinite Scroll

Pattern 3: File Upload with Progress

Pattern 4: Media Gallery with Multiple File Types

Best Practices in Generated Code

Iteration and Refinement

Tips for Better Results

Next Steps