179 lines
5 KiB
Markdown
179 lines
5 KiB
Markdown
# 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
|
|
- Perplexity MCP server with Pro subscription:
|
|
- Located at /Users/chaulmark/Documents/Claude/MCP/perplexity-mcp
|
|
- Optimized with Pro parameters (max_tokens: 4000, temperature: 0.7, top_p: 0.9)
|
|
- Provides tools for search, documentation, API discovery, and code analysis
|
|
|
|
### 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
|