chaulmark/ocd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ocd-website/cline_docs/techContext.md
TheMaddax ae01874c0a feat(website): complete Phase 1 with public pages and Tailwind styling 
- Add Events, Membership, and Donate pages with responsive layouts
- Fix Tailwind CSS 4.0 configuration with proper PostCSS setup
- Update Memory Bank documentation (product, system, tech context)
- Configure CSS variables for consistent theming and accessibility
- Fix client-side components with 'use client' directives
- Update progress tracking in Memory Bank
- Implement WCAG 2.2 AA accessibility features

This commit completes Phase 1 of the OCD website implementation plan,
establishing all core public-facing pages with proper styling and accessibility.
2025-03-25 10:35:05 -05:00

3 KiB
Raw Blame History

Technical Context: OCD Website

Technologies Used

Frontend

  • Framework: Next.js 15.2.3 - Server-side rendering with React
  • Language: TypeScript 5.8 - Type-safe development
  • UI Components: React 19.0.0 - Component-based architecture
  • Styling:
    • Tailwind CSS 4.0.15 - Utility-first CSS framework
    • CSS Variables - Custom theming system
    • PostCSS 8.4 - CSS processing
    • Autoprefixer 10.4 - CSS vendor prefixing
  • Animation: Framer Motion 12.6.0 - Interactive animations
  • Routing: Next.js App Router - File-based routing with layouts
  • Icons: Custom SVG icons - Accessibility-focused
  • Forms: Custom form components with validation

Backend

  • Framework: Node.js with Express 4.21
  • Language: TypeScript - Type-safe API development
  • Database: MongoDB - Document-based storage
  • API: RESTful endpoints
  • Email: Nodemailer 6.9 - Email notifications
  • Authentication: JWT-based with HTTP-only cookies
  • Data Validation: Server-side schema validation

Development Tools

  • Package Manager: pnpm 9.14
  • Linting: ESLint 9
  • Build System: Next.js built-in bundler
  • Version Control: Git
  • Container: Docker & Docker Compose
  • Configuration: Environment variables with dotenv
  • Caching: Redis (planned)

Deployment

  • Production Server: Nginx reverse proxy
  • Containers: Docker multi-stage builds
  • Database: MongoDB Atlas (planned)
  • Cache: Redis (planned)
  • CI/CD: GitHub Actions (planned)

Development Environment

Local Setup

  • Next.js development server (localhost:3000)
  • Express API server (localhost:4000)
  • MongoDB container
  • Tailwind CSS JIT compilation
  • Hot module reloading

Key Configuration Files

  • docker-compose.yml: Container orchestration
  • frontend/next.config.js: Next.js configuration
  • frontend/tailwind.config.js: Tailwind customization
  • frontend/postcss.config.js: CSS processing
  • backend/.env: API environment variables
  • nginx/conf/default.conf: Production web server

Technical Constraints

Accessibility Requirements

  • WCAG 2.2 AA compliance
  • Screen reader compatibility
  • Keyboard navigation support
  • Color contrast compliance
  • Reduced motion support
  • DeafBlind/Blind user accessibility
  • ASL video content with captions and transcripts

Browser Support

  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • IE not supported
  • Mobile browsers (iOS Safari, Chrome Android)

Performance Targets

  • First contentful paint < 1.5s
  • Time to interactive < 3.5s
  • Core Web Vitals compliance
  • Optimized image delivery
  • Minimal JavaScript overhead

Security Considerations

  • HTTPS-only in production
  • Content Security Policy headers
  • JWT authentication with secure cookies
  • Input sanitization and validation
  • CSRF protection
  • Rate limiting (planned)

Additional Notes

  • Custom CSS variables for theming
  • Dark mode support via media query
  • Mobile-first responsive design
  • Component-based architecture
  • Accessibility-first approach
  • Server-side rendering for SEO