chaulmark/ocd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ocd-website/cline_docs/systemPatterns.md
TheMaddax edb6faa351 feat: create project structure and update implementation files 
- 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
2025-03-25 09:28:10 -05:00

4.2 KiB
Raw Blame History

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.