# 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