TheMaddax
ae01874c0a
- 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.
98 lines
3 KiB
Markdown
98 lines
3 KiB
Markdown
# 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
|