113 lines
2.8 KiB
Markdown
113 lines
2.8 KiB
Markdown
# Technical Context
|
|
|
|
## Technology Stack
|
|
|
|
### Frontend Technologies
|
|
| Technology | Version | Purpose |
|
|
|------------|---------|---------|
|
|
| React | 19.0.0 | Core UI Framework |
|
|
| TypeScript | 5.7.2 | Type Safety |
|
|
| React Router | 7.0.2 | Routing |
|
|
| Tailwind CSS | 3.4.16 | Styling |
|
|
| Framer Motion | 11.13.5 | Animations |
|
|
| React Simple Maps | 4.0.0-beta.6 | Geographic Visualization |
|
|
| Next.js | 14.1.0 | Framework Features |
|
|
| React Icons | 5.4.0 | Icon Library |
|
|
| React Intersection Observer | 9.13.1 | Scroll Detection |
|
|
|
|
### Backend Technologies
|
|
| Technology | Version | Purpose |
|
|
|------------|---------|---------|
|
|
| Express | 4.21.2 | API Server |
|
|
| Node.js | Latest LTS | Runtime Environment |
|
|
| Nodemailer | 6.9.9 | Email Service |
|
|
| Upstash Redis | 1.28.4 | Caching/Rate Limiting |
|
|
| TypeScript | 5.7.2 | Type Safety |
|
|
| dotenv | 16.4.7 | Environment Management |
|
|
|
|
### Development Tools
|
|
| Tool | Version | Purpose |
|
|
|------|---------|---------|
|
|
| Vite | 6.0.3 | Build System |
|
|
| pnpm | 9.14.2 | Package Manager |
|
|
| ESLint | 9.15.0 | Code Linting |
|
|
| Docker | Latest | Containerization |
|
|
| PostCSS | 8.4.49 | CSS Processing |
|
|
| Autoprefixer | 10.4.20 | CSS Compatibility |
|
|
| Concurrently | 8.2.2 | Process Management |
|
|
|
|
## Development Setup
|
|
|
|
### Prerequisites
|
|
- Node.js LTS version
|
|
- pnpm 9.14.2
|
|
- Docker and Docker Compose
|
|
- Git
|
|
|
|
### Local Development
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Start development servers
|
|
pnpm dev # Runs frontend (3000) and backend (4000)
|
|
|
|
# Build for production
|
|
pnpm build
|
|
|
|
# Preview production build
|
|
pnpm preview
|
|
```
|
|
|
|
### Environment Variables
|
|
Required variables:
|
|
- `GMAIL_USER`: Email service username
|
|
- `GMAIL_PASS`: Email service password
|
|
- `REDIS_URL`: Upstash Redis connection URL
|
|
- `REDIS_TOKEN`: Upstash Redis auth token
|
|
- `API_URL`: Backend API URL
|
|
- `NODE_ENV`: Environment (development/production)
|
|
|
|
### Docker Development
|
|
```bash
|
|
# Development environment
|
|
docker-compose -f docker-compose.dev.yml up
|
|
|
|
# Production build
|
|
docker-compose up --build
|
|
```
|
|
|
|
## Technical Constraints
|
|
|
|
### Performance Requirements
|
|
- First Contentful Paint < 1.5s
|
|
- Time to Interactive < 3.5s
|
|
- Lighthouse Performance Score > 90
|
|
- Mobile-responsive breakpoints
|
|
|
|
### Browser Support
|
|
- Modern browsers (last 2 versions)
|
|
- Chrome, Firefox, Safari, Edge
|
|
- Mobile browsers (iOS Safari, Chrome Android)
|
|
|
|
### Accessibility Requirements
|
|
- WCAG 2.1 Level AA compliance
|
|
- Screen reader compatibility
|
|
- Keyboard navigation support
|
|
- Color contrast ratios
|
|
- Subtitle and transcript support
|
|
|
|
### Security Requirements
|
|
- Rate limiting on API endpoints
|
|
- CORS policy configuration
|
|
- Secure email handling
|
|
- Environment variable protection
|
|
- Input validation and sanitization
|
|
|
|
### Infrastructure Requirements
|
|
- Docker container deployment
|
|
- Nginx reverse proxy
|
|
- Redis caching layer
|
|
- Email service integration
|
|
- Static file serving
|
|
- API server configuration
|