finlion-website/cline_docs/systemPatterns.md

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