Skip to main content

​
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);

​
Example 3: Social Media Feed

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:
1

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
2

Real-time Updates

Real-time subscriptions for:
  • New posts in feed
  • New likes on your posts
  • New comments
3

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 configuration
const uploadAvatar = async (file: File) => {
  const { data, error } = await supabase.storage
    .from('avatars')
    .upload(`${user.id}/${Date.now()}.${ext}`, file, {
      cacheControl: '3600',
      upsert: false,
      onUploadProgress: (progress) => {
        setUploadProgress((progress.loaded / progress.total) * 100)
      }
    })

  if (error) throw error

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

  return publicUrl
}

​
Best Practices in Generated Code

The AI follows these best practices:
All database operations wrapped in try-catch with user-friendly error messages.
Components show loading indicators during async operations.
Full TypeScript support with generated types from your schema.
RLS-aware queries, never bypassing security unless explicitly needed.
Optimized queries with proper indexing suggestions and pagination.

​
Iteration and Refinement

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