# Technical Context: OCD Website

## Technologies Used

### Frontend
- **Framework**: Next.js 15.2.3 - Server-side rendering with React
- **Language**: TypeScript 5.8 - Type-safe development
- **UI Components**: React 19.0.0 - Component-based architecture
- **Styling**: 
  - Tailwind CSS 4.0.15 - Utility-first CSS framework
  - CSS Variables - Custom theming system
  - PostCSS 8.4 - CSS processing
  - Autoprefixer 10.4 - CSS vendor prefixing
- **Animation**: Framer Motion 12.6.0 - Interactive animations
- **Routing**: Next.js App Router - File-based routing with layouts
- **Icons**: Custom SVG icons - Accessibility-focused
- **Forms**: Custom form components with validation

### Backend
- **Framework**: Node.js with Express 4.21
- **Language**: TypeScript - Type-safe API development
- **Database**: MongoDB - Document-based storage
- **API**: RESTful endpoints
- **Email**: Nodemailer 6.9 - Email notifications
- **Authentication**: JWT-based with HTTP-only cookies
- **Data Validation**: Server-side schema validation

### Development Tools
- **Package Manager**: pnpm 9.14
- **Linting**: ESLint 9
- **Build System**: Next.js built-in bundler
- **Version Control**: Git
- **Container**: Docker & Docker Compose
- **Configuration**: Environment variables with dotenv
- **Caching**: Redis (planned)

### Deployment
- **Production Server**: Nginx reverse proxy
- **Containers**: Docker multi-stage builds
- **Database**: MongoDB Atlas (planned)
- **Cache**: Redis (planned)
- **CI/CD**: GitHub Actions (planned)

## Development Environment

### Local Setup
- Next.js development server (localhost:3000)
- Express API server (localhost:4000)
- MongoDB container
- Tailwind CSS JIT compilation
- Hot module reloading

### Key Configuration Files
- **docker-compose.yml**: Container orchestration
- **frontend/next.config.js**: Next.js configuration
- **frontend/tailwind.config.js**: Tailwind customization 
- **frontend/postcss.config.js**: CSS processing
- **backend/.env**: API environment variables
- **nginx/conf/default.conf**: Production web server

## Technical Constraints

### Accessibility Requirements
- WCAG 2.2 AA compliance
- Screen reader compatibility
- Keyboard navigation support
- Color contrast compliance
- Reduced motion support
- DeafBlind/Blind user accessibility
- ASL video content with captions and transcripts

### Browser Support
- Modern browsers (Chrome, Firefox, Safari, Edge)
- IE not supported
- Mobile browsers (iOS Safari, Chrome Android)

### Performance Targets
- First contentful paint < 1.5s
- Time to interactive < 3.5s
- Core Web Vitals compliance
- Optimized image delivery
- Minimal JavaScript overhead

### Security Considerations
- HTTPS-only in production
- Content Security Policy headers
- JWT authentication with secure cookies
- Input sanitization and validation
- CSRF protection
- Rate limiting (planned)

## Additional Notes
- Custom CSS variables for theming
- Dark mode support via media query
- Mobile-first responsive design
- Component-based architecture
- Accessibility-first approach
- Server-side rendering for SEO