deafgain-website/cline_docs/systemPatterns.md

System Patterns

Architecture Overview

Frontend Architecture

1. React Component Structure

   • Layout components for consistent structure
   • Shared components for reusability
   • Page-specific components for unique features
   • Context providers for state management

2. Routing System

   • React Router v7 for navigation
   • Client-side routing
   • Protected routes where necessary

3. State Management

   • React Context for global state
   • Local state for component-specific data
   • Notification context for toast messages

Backend Architecture

1. API Structure

   • Express.js server
   • RESTful endpoints
   • Rate-limited routes
   • Email service integration

2. Caching Layer

   • Redis-backed caching
   • Session management
   • Rate limiting implementation

Key Technical Decisions

Development Environment

1. Build System

   • Vite for fast development
   • Hot Module Replacement
   • TypeScript compilation
   • Concurrent frontend/backend development

2. Docker Configuration

   • Multi-container setup
   • Development and production configurations
   • Volume mounting for persistent data
   • Bridge network setup

Production Setup

1. Deployment Strategy

   • Multi-stage Docker builds
   • Nginx for static file serving
   • Node.js API server
   • Automatic container restart

2. Performance Optimizations

   • Tree shaking
   • Code splitting
   • Redis caching
   • Static file optimization

Security Patterns

1. API Security

   • Rate limiting
   • CORS configuration
   • Environment variable protection
   • Secure email handling

2. Data Protection

   • Form validation
   • Input sanitization
   • Redis session management
   • Secure credential storage

Directory Structure

src/
├── api/            # Backend API routes
├── components/     # UI components
│   ├── Layout/     # Layout structure
│   └── shared/     # Reusable components
├── context/        # React Context
├── lib/           # Utility functions
├── pages/         # Route pages
└── assets/        # Static assets

public/
├── images/        # Image assets
├── subtitles/     # WebVTT files
├── transcriptions/# Text files
└── videos/        # Video content

Implementation Patterns

Component Patterns

• Functional components with hooks
• TypeScript interfaces for props
• Separation of concerns
• Reusable styling with Tailwind

Animation Patterns

• Framer Motion for complex animations
• CSS transitions for simple effects
• Intersection Observer for scroll animations
• Performance-optimized animations

Accessibility Patterns

• ARIA labels
• Semantic HTML
• Keyboard navigation
• Screen reader support
• Color contrast compliance

Testing Strategy

• Component testing
• API endpoint testing
• Integration testing
• Accessibility testing