70 lines
3 KiB
Markdown
70 lines
3 KiB
Markdown
# 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
|