# Tech Context

## Technologies Used

### Core Framework
- **Next.js**: 14.1.0 (App Router)
- **React**: 18.3.1
- **TypeScript**: 5.7.2
- **Node.js**: Required 20 or higher

### Styling & UI
- **TailwindCSS**: 3.4.15 (utility-first CSS)
- **Framer Motion**: 11.12.0 (animations)
- **Lucide React**: 0.462.0 (icons)
- **React Icons**: 5.3.0 (additional icons)

### Backend & Services
- **Upstash Redis**: 1.34.3 (rate limiting & caching)
- **NodeMailer**: 6.9.16 (email functionality)
- **XSS**: 1.0.14 (security/sanitization)
- **Validator**: 13.9.0 (input validation)

### Maps & Visualization
- **React Simple Maps**: 3.0.0 (geographic visualization)
- **TopoJSON Client**: 3.1.0 (map data processing)

### Development Tools
- **pnpm**: 9.14.4 (package manager)
- **PostCSS**: 8.4.49 (CSS processing)
- **Autoprefixer**: 10.4.20 (CSS vendor prefixes)
- **TypeScript Types**: Complete type definitions for all dependencies

## Development Setup

### Prerequisites
- Node.js 20 or higher
- pnpm package manager
- Docker (for containerized development)

### Environment Configuration
Required environment variables:
- **Email Configuration**: Gmail SMTP settings for NodeMailer
- **Redis Configuration**: Upstash Redis connection details
- **Security Settings**: Various SMTP and security configurations

### Development Commands
```bash
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm start        # Start production server
pnpm lint         # Run ESLint
```

### Docker Setup
- **Development**: `docker-compose.dev.yml` with hot reloading
- **Production**: `Dockerfile` with optimized build
- **Volume Mounting**: Efficient development workflow

## Technical Constraints

### Performance
- Image optimization through Next.js Image component
- Code splitting via Next.js App Router
- Efficient client-side navigation
- Optimized Docker builds for production

### Security
- Content Security Policy implementation
- XSS protection on all inputs
- Rate limiting on API endpoints
- Secure environment variable management
- CORS policies properly configured

### Accessibility
- Responsive design (mobile-first)
- Semantic HTML structure
- Proper image alt texts
- Focus management for interactive elements

### Browser Support
- Modern browsers supporting ES2020+
- Progressive enhancement approach
- Graceful degradation for older browsers

## Deployment Architecture
- **Containerization**: Docker-based deployment
- **Environment Separation**: Different configs for dev/prod
- **Static Assets**: Optimized through Next.js build process
- **API Routes**: Serverless functions via Next.js API routes