TheMaddax
edb6faa351
- Created complete project directory structure: - Frontend with Next.js 15.2.3 app router structure - Backend with Express API endpoints - Docker configurations with security best practices - MongoDB initialization with schema validation - Nginx configuration with security headers - Implemented core file templates: - Custom video player with transcript display options - MongoDB schemas with validation for Videos and Members - JWT authentication middleware with role-based access control - Docker Compose with resource limits and security - Frontend/backend package.json with dependencies - Updated documentation: - Enhanced TECH_STACK with latest version details - Updated TO_DO.txt with WCAG 2.2 AA requirements - Updated planned_implementation.txt with current best practices - Refreshed all Memory Bank files with current state - Security and accessibility improvements: - Added MongoDB 7.0 schema validation with - Enhanced video requirements with mandatory transcripts and thumbnails - Updated accessibility to WCAG 2.2 AA standards - Added security best practices for Docker deployments
91 lines
4.2 KiB
Markdown
91 lines
4.2 KiB
Markdown
# 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.
|