119 lines
2.8 KiB
Markdown
119 lines
2.8 KiB
Markdown
# 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
|