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
# 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 usernameGMAIL_PASS: Email service passwordREDIS_URL: Upstash Redis connection URLREDIS_TOKEN: Upstash Redis auth tokenAPI_URL: Backend API URLNODE_ENV: Environment (development/production)
Docker Development
# 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
