# System Patterns: OCD Website

## How the System is Built

### Architecture
- **Frontend**: 
  - Next.js 15.2.3 with React 19 for server-side rendered pages
  - Server Components for critical content delivery
  - Client Components for interactive elements
- **Backend**: 
  - Node.js with Express 4.21 for RESTful API endpoints
  - JWT authentication with role-based access control (RBAC)
- **Database Layer**: 
  - MongoDB 7.0 with schema validation and indexing
  - Redis for caching, session management, and rate limiting
- **Containerization**: 
  - Docker with security best practices (multi-stage builds, non-root users)
  - Portainer for container management and monitoring
- **Web Server**: 
  - Nginx as reverse proxy with security headers and TLS 1.3

### Directory Structure
```
/
├── frontend/                # Next.js frontend application
│   ├── public/              # Static assets
│   ├── src/
│   │   ├── app/             # Next.js App Router pages
│   │   ├── components/      # Reusable React components
│   │   │   ├── atoms/       # Basic UI components
│   │   │   ├── molecules/   # Compound components
│   │   │   ├── organisms/   # Complex components
│   │   │   ├── templates/   # Page layouts
│   │   │   └── video/       # Video player components
│   │   ├── hooks/           # Custom React hooks
│   │   ├── lib/             # Utility functions
│   │   ├── styles/          # Global styles and Tailwind config
│   │   └── types/           # TypeScript type definitions
│   ├── Dockerfile           # Multi-stage build for frontend
│   └── package.json         # Frontend dependencies
├── backend/                 # Express backend application
│   ├── src/
│   │   ├── controllers/     # Request handlers
│   │   ├── middleware/      # Express middleware
│   │   ├── models/          # MongoDB schema models
│   │   ├── routes/          # API route definitions
│   │   ├── services/        # Business logic
│   │   └── utils/           # Utility functions
│   ├── Dockerfile           # Backend container definition
│   └── package.json         # Backend dependencies
├── mongo-init/              # MongoDB initialization scripts
├── nginx/                   # Nginx configuration
│   ├── conf/                # Server configurations
│   └── ssl/                 # SSL certificates
├── docker-compose.yml       # Docker services definition
└── security-reports/        # Security scanning outputs
```

## Key Technical Decisions
- Server Components for critical content delivery and improved SEO
- TypeScript 5.8 for type safety and incremental build performance
- Tailwind CSS 4.0 with CSS-first configuration
- MongoDB 7.0 with schema validation for data integrity
- Redis for caching, rate limiting, and session management
- Docker containerization with security best practices
- Custom video player implementation for ASL content with required transcripts
- Multi-stage Docker builds for smaller, more secure production images
- JWT-based authentication with role-based access control
- Full-text search capabilities for video transcripts

## Architecture Patterns
- RESTful API with comprehensive endpoint structure
- Context-based state management in React
- Server-side rendering for critical pages, static generation for stable content
- Responsive design with mobile-first approach
- Atomic design pattern for component organization
- Authentication with JWT and HTTP-only cookies
- Automated notifications for membership status
- Schema validation and indexing for database performance
- Least-privilege principle in containerization
- Accessibility-first development approach with WCAG 2.2 AA compliance

## Development Workflow
Development is organized into phases:
1. Setup & Infrastructure
2. Core Public Pages
3. Admin Functionality
4. Accessibility & Refinement
5. Testing & Deployment

Each phase has specific tasks and goals as outlined in the TO_DO.txt document, with a focus on iterative development and continuous testing for accessibility compliance.