chaulmark/lad-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lad-website/cline_docs/techContext.md

4.7 KiB
Raw Blame History

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

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