# Technical Context: OCD Website

## Technology Stack

### Frontend
- **Framework**: Next.js 15.2.3 with React 19
- **Language**: TypeScript 5.8
- **Styling**: 
  - Tailwind CSS 4.0
  - PostCSS 8.4 with Autoprefixer 10.4
  - CSS variables for theming
- **State Management**: React Context API
- **Routing**: Next.js App Router
- **Animations**: Framer Motion 11
- **Icons**: React Icons 5.5.0
- **Maps**: React Simple Maps 3.0.0
- **Utility Libraries**:
  - React Intersection Observer 9.16.0
  - Axios 1.6 for API requests
  - date-fns for date manipulation

### Backend
- **Framework**: Node.js with Express 4.18.2
- **Language**: TypeScript 5.8
- **API Design**: RESTful endpoints
- **Email Handling**: Nodemailer 6.9
- **Authentication**: JWT-based with HTTP-only cookies
- **Cross-Origin**: CORS middleware
- **Environment Variables**: dotenv 16.4
- **Caching & Rate Limiting**: Upstash Redis 1.28

### Database
- **Primary Database**: MongoDB with Mongoose ODM
- **Caching Layer**: Redis
- **Schema Validation**: Mongoose schemas with validation
- **Data Models**:
  - Admin User
  - Member
  - Event
  - Page Content
  - Document
  - Video
  - Contact Submission

### Development & Build Tools
- **Package Manager**: pnpm 9.14
- **Containerization**: Docker & Docker Compose
- **Build Tool**: Vite 6.0
- **Linting**: ESLint 9
- **Process Management**: Concurrently for multiple processes
- **TypeScript Execution**: tsx/ts-node
- **Hot Module Replacement**: Enabled

### Production Environment
- **Web Server**: Nginx for static assets and reverse proxy
- **API Server**: Node.js
- **Containerization**: Docker with multi-stage builds
- **SSL**: Let's Encrypt certificates
- **Monitoring**: Basic health checks
- **Logging**: Winston logger with structured format

## Architecture Overview

### Frontend Architecture
- **Server Components**: Used for static pages (About, Bylaws)
- **Client Components**: Used for interactive elements
- **Rendering Strategy**: 
  - SSR for critical pages (Home, Events)
  - Static Generation for stable content
  - Client-side rendering for interactive components
- **Component Structure**:
  - Atomic design principles (atoms, molecules, organisms)
  - Layout components for consistent page structure
  - Page-specific components
- **Data Flow**:
  - React Context for application state
  - API hooks for data fetching
  - Form state handled locally

### Backend Architecture
- **API Layer**: RESTful endpoints organized by resource
- **Authentication Layer**: JWT middleware for protected routes
- **Controller Layer**: Handles business logic
- **Model Layer**: Mongoose models with validation
- **Email Service**: Nodemailer for transactional emails
- **File Handling**: Multer for uploads

### Database Design
- Document-oriented schema with Mongoose
- Relationships handled through references
- Indexing for frequently queried fields
- Validation at the schema level

## Development Setup

### Local Development
- Docker Compose for local environment
- Frontend on port 3000
- Backend API on port 4000
- MongoDB on port 27017
- Redis on port 6379
- Hot reloading enabled for development
- Perplexity MCP server with Pro subscription:
  - Located at /Users/chaulmark/Documents/Claude/MCP/perplexity-mcp
  - Optimized with Pro parameters (max_tokens: 4000, temperature: 0.7, top_p: 0.9)
  - Provides tools for search, documentation, API discovery, and code analysis

### Environment Configuration
- Frontend environment variables in .env.local
- Backend environment variables in .env
- Production variables set through Docker

### CI/CD Flow
- Manual deployment to production
- Build process in Docker
- Multi-stage builds for smaller images

## API Structure

### Authentication Endpoints
- POST /api/auth/login
- POST /api/auth/logout
- POST /api/auth/reset-password
- POST /api/auth/set-password

### Content Management Endpoints
- GET/POST/PUT/DELETE /api/pages
- GET/PUT /api/pages/:slug
- PUT /api/pages/:id/publish

### Event Endpoints
- GET/POST/PUT/DELETE /api/events
- GET /api/events/:id
- GET /api/events/calendar/:year/:month

### Member Endpoints
- GET/POST/PUT/DELETE /api/members
- GET /api/members/expiring
- POST /api/members/notify

### Document Endpoints
- GET/POST/PUT/DELETE /api/documents
- GET /api/documents/:id

### Video Endpoints
- GET/POST/PUT/DELETE /api/videos
- GET /api/videos/:id
- POST /api/videos/:id/subtitles

### Contact Endpoints
- POST /api/contact
- GET /api/contact
- PUT /api/contact/:id
- POST /api/contact/:id/respond

## Accessibility Implementation

- WCAG 2.2 AA compliance target
- Semantic HTML structure
- ARIA attributes for interactive components
- Keyboard navigation support
- Screen reader considerations
- Color contrast compliance
- Focus management
- Reduced motion option
- Video subtitle support
- Text resizing support

## Security Measures

- Authentication with JWTs and HTTP-only cookies
- Role-based access control
- Input validation
- CSRF protection
- Content Security Policy
- Secure HTTP headers
- Rate limiting
- Data sanitization
- Secure password handling