# System Patterns - Architecture & Design

## Overall Architecture
- **Framework**: Next.js 15+ with App Router
- **Language**: TypeScript for type safety
- **Styling**: Tailwind CSS for responsive design
- **Deployment**: Docker containerization (dev and production)

## Key Technical Decisions

### Frontend Architecture
- **App Router**: Uses Next.js App Router for file-based routing
- **Component Structure**: Organized by feature and shared components
- **State Management**: React hooks and context providers
- **Animations**: Framer Motion for smooth UI transitions
- **Icons**: Lucide React and React Icons

### Backend Architecture
- **API Routes**: Next.js API routes for server-side functionality
- **Email Service**: Nodemailer with Gmail SMTP integration
- **Rate Limiting**: Upstash Redis for distributed rate limiting
- **Validation**: Custom input validation and sanitization

### Security Patterns
- **Input Sanitization**: XSS prevention through input cleaning
- **Rate Limiting**: IP-based request limiting to prevent abuse
- **Environment Variables**: Sensitive data stored in environment variables
- **Validation**: Multi-layer validation (client and server-side)

## Directory Structure Patterns
```
src/
├── app/                 # Next.js App Router pages
│   ├── api/            # API route handlers
│   ├── [page]/         # Individual page routes
├── components/         # React components
│   ├── home/          # Home page specific components
│   ├── layout/        # Layout components (Header, Footer, Nav)
│   ├── providers/     # Context providers
│   ├── shared/        # Reusable components
│   └── ui/            # Basic UI components
├── data/              # Static data and configurations
├── lib/               # Utility functions and configurations
├── styles/            # Global styles
└── types/             # TypeScript type definitions
```

## Component Patterns
- **Separation of Concerns**: UI components separate from business logic
- **Reusability**: Shared components in dedicated directories
- **Type Safety**: TypeScript interfaces for all component props
- **Responsive Design**: Mobile-first approach with Tailwind CSS

## API Patterns
- **RESTful Design**: Standard HTTP methods and status codes
- **Error Handling**: Consistent error response format
- **Validation**: Input validation before processing
- **Rate Limiting**: Applied to all public API endpoints

## Email System Patterns
- **Transporter Configuration**: Reusable SMTP configuration
- **Template System**: HTML email templates with inline styles
- **Error Handling**: Graceful failure handling with user feedback
- **Environment Configuration**: SMTP settings via environment variables

## Development Patterns
- **Docker**: Containerized development and production environments
- **Package Management**: PNPM for efficient dependency management
- **Code Quality**: ESLint for code consistency
- **Type Safety**: Strict TypeScript configuration