common-patterns

Common Patterns

🗃️ Database Access Patterns

Database Client Pattern

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

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

Server Component Data Fetching

// app/page.tsx
import { supabase } from '@/lib/database'

export default async function Page() {
  const { data, error } = await supabase
    .from('business_hours')
    .select('*')
    .order('day_of_week')
  
  if (error) {
    throw new Error(`Failed to fetch business hours: ${error.message}`)
  }
  
  return <BusinessHours data={data} />
}

Database Sleep State Handling

// components/DatabaseWakingUp.tsx
export function DatabaseWakingUp({ children }: { children: React.ReactNode }) {
  const [isWaking, setIsWaking] = useState(false)
  
  // Handle database wake-up logic
  // Show loading state while database initializes
  
  return isWaking ? <WakingUpSpinner /> : children
}

🎨 UI Component Patterns

ShadCN/UI Integration

// components/ui/button.tsx
import { cn } from '@/lib/utils'
import { cva } from 'class-variance-authority'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        brand: 'bg-brand-primary text-white hover:bg-brand-primary/90',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
)

Form Validation Pattern

// components/ContactForm.tsx
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const contactSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
  message: z.string().min(10, 'Message must be at least 10 characters'),
})

export function ContactForm() {
  const form = useForm<z.infer<typeof contactSchema>>({
    resolver: zodResolver(contactSchema),
  })
  
  const onSubmit = async (data: z.infer<typeof contactSchema>) => {
    // Handle form submission with Sentry logging
  }
}