coding-guidelines

Coding Guidelines

🎯 Core Principles

1. TypeScript First: All code must be TypeScript with strict type checking
2. Server Components Default: Use Server Components unless interactivity is required
3. Error Boundaries: Every route and major component must handle errors gracefully
4. Performance: Optimize for Core Web Vitals and user experience
5. Accessibility: Follow WCAG 2.1 AA standards

📝 TypeScript Standards

Type Definitions

// types/index.ts
export interface BusinessHour {
  id: number
  day_of_week: number
  open_time: string
  close_time: string
  is_open: boolean
  created_at: string
  updated_at: string
}

export interface BookingRequest {
  name: string
  email: string
  phone: string
  service: string
  preferred_date: string
  message?: string
}

export type BookingResponse = {
  id: number
  status: 'pending' | 'confirmed' | 'cancelled'
  created_at: string
} & BookingRequest

Strict Configuration

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true
  }
}

🏗️ Next.js App Router Standards

File Organization

app/
├── (public)/           # Public routes group
│   ├── page.tsx        # Homepage
│   ├── about/
│   └── contact/
├── (admin)/            # Admin routes group
│   ├── dashboard/
│   └── settings/
├── api/                # API routes
├── globals.css         # Global styles
└── layout.tsx          # Root layout

Route Conventions

• Server Components: Default for data fetching and static content
• Client Components: Use 'use client' only when needed
• Loading States: loading.tsx for each route segment
• Error Boundaries: error.tsx for each route segment
• Not Found: not-found.tsx for 404 handling

Metadata Standards

// app/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: '[Your Project Name] - [Tagline]',
  description: '[Your project description and value proposition]',
  openGraph: {
    title: '[Your Project Name]',
    description: '[Brief project description]',
    type: 'website',
    locale: 'en_US',
  },
}