# Architecture Overview

## System Design

### High-Level Architecture
```
┌─────────────────────────────────────────────────────────────┐
│                        Frontend                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │   Next.js   │  │   React     │  │  Tailwind   │         │
│  │  App Router │  │ Components  │  │    CSS      │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                      API Layer                               │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  API Routes │  │  Supabase   │  │    Edge     │         │
│  │  /api/*     │  │   Client    │  │  Functions  │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                     Supabase                                 │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │ PostgreSQL  │  │    Auth     │  │   Storage   │         │
│  │  + RLS      │  │             │  │             │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘
```

## Component Architecture

### Frontend Components
| Component | Purpose | Location |
|-----------|---------|----------|
| Layout | Root layout with nav/footer | `app/layout.tsx` |
| [Component] | [Purpose] | `components/[name].tsx` |

### Data Flow
1. User interacts with React component
2. Component calls API route or Supabase client
3. Supabase processes request with RLS policies
4. Data returned and cached appropriately

## Database Schema

### Tables
```sql
-- Core tables
[Add your table definitions]

-- Relationships
[Add foreign key relationships]
```

### Row Level Security
| Table | Policy | Description |
|-------|--------|-------------|
| [table] | [policy] | [description] |

## Authentication Flow
1. User signs in via Supabase Auth
2. Session stored in secure cookie
3. Middleware validates session on protected routes
4. RLS policies enforce data access

## External Services
| Service | Purpose | Integration Point |
|---------|---------|------------------|
| Vercel | Hosting | Automatic deployment |
| Supabase | Backend | Database, Auth, Storage |

## Security Considerations
- All tables have RLS enabled
- Service role key used only in Edge Functions
- CORS configured for production domains
- Input validation on all endpoints

## Performance Optimizations
- Server Components for static content
- Dynamic imports for heavy components
- Image optimization via next/image
- Database indexes on frequently queried columns

## Deployment Architecture
```
GitHub Repo
    │
    ├── Push to main ──► Vercel (Production)
    │
    └── Push to dev ───► Vercel (Preview)
```