CC Code Patterns

Reusable code patterns, types, and templates for Channel Changers app development.

When to Use

• •Building new features or pages
• •Creating API routes
• •Adding Supabase queries
• •Creating new components

Available Patterns

Types (types/)

• •common.ts - Base types used everywhere (Task, CalendarEvent, etc.)
• •supabase.ts - Supabase table types and query helpers

Components (components/)

• •DataCard.tsx - Standard bento card with loading/empty states
• •Modal.tsx - Animated modal with header/body/footer
• •DataTable.tsx - Sortable table with pagination

API Routes (api/)

• •route-template.ts - Standard Next.js API route with error handling
• •cron-template.ts - Cron job route with logging

Hooks (hooks/)

• •useSupabaseQuery.ts - Typed Supabase query hook
• •useDebounce.ts - Debounce hook for search inputs

CC-Specific Conventions

• •Always include tenant_id = 'cc-internal-001' in queries
• •Use slate-900 cards with violet accents
• •Use framer-motion for animations
• •Use lucide-react for icons