# 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