# Olathe Club of the Deaf (OCD) Website Development Plan

## Architecture Overview

### Frontend (Next.js 15.2.3 + React 19)
- Server-side rendered pages for better SEO and performance
- Server Components for critical content delivery
- TypeScript 5.8 for type safety with granular branch checks
- Tailwind CSS 4.0 with CSS-first configuration using @theme directives
- Framer Motion for animations and transitions
- React Context for state management
- Protected admin dashboard with JWT authentication

### Backend (Node.js + Express)
- REST API endpoints for data operations
- JWT-based authentication with RBAC for admin access
- Email handling with Nodemailer
- Rate limiting with Upstash Redis
- Environment variable management with dotenv
- Comprehensive logging system for external analytics
- CORS implementation with proper security headers

### Database
- MongoDB 7.0 with schema validation using $jsonSchema
- Redis for caching and session management

### Deployment
- Docker containerization with Portainer for deployment
- Nginx as reverse proxy
- GitHub repository integration

## Core Features & Components

### 1. Public-Facing Pages
- [ ] Home Page
  - [ ] Hero section with mission statement
  - [ ] Featured upcoming events
  - [ ] News/announcements section
  - [ ] Sponsor showcase
  - [ ] Quick links to important pages

- [ ] About OCD Section
  - [ ] Organization history and mission
  - [ ] Meet the Board page with photos and bios
  - [ ] Bylaws page with downloadable PDF
  - [ ] Minutes archive with search/filter functionality

- [ ] Calendar/Events
  - [ ] Interactive calendar view
  - [ ] List view of upcoming events
  - [ ] Event detail pages
  - [ ] Filter by event type (social, athletic, etc.)

- [ ] Membership
  - [ ] Membership benefits information
  - [ ] Online application form (non-payment)
  - [ ] Information about dues and payment methods

- [ ] Contact
  - [ ] Contact form with validation
  - [ ] Map to OCD location
  - [ ] Email notification system
  - [ ] Social media links

- [ ] Donation Integration
  - [ ] Zeffy donation widget embedding
  - [ ] Donation information page

### 2. Admin Dashboard
- [ ] Authentication System
  - [ ] Single admin login/logout functionality
  - [ ] Password reset functionality
  - [ ] Secure session management

- [ ] WYSIWYG Content Editor
  - [ ] Page content management
  - [ ] Rich text editing capabilities
  - [ ] Image upload and management
  - [ ] Version history

- [ ] Event Management
  - [ ] Create/edit/delete events
  - [ ] Recurring event setup
  - [ ] Event categories management
  - [ ] Calendar visualization

- [ ] Member Management
  - [ ] Member directory
  - [ ] Email list generation for newsletters
  - [ ] Basic member information storage
  - [ ] Membership status tracking
  - [ ] Membership expiration notifications
  - [ ] Automated alerts for upcoming expirations
  - [ ] Expired membership notifications to board

- [ ] Document Repository
  - [ ] Upload/manage meeting minutes
  - [ ] Bylaws document management
  - [ ] File categorization and search

- [ ] ASL Video Management
  - [ ] Video upload functionality 
  - [ ] Required thumbnail preview image generation/upload
  - [ ] Required full text transcript upload and formatting (supporting plain, HTML, and JSON formats)
  - [ ] VTT subtitle file association
  - [ ] Transcription display options alongside video
  - [ ] Full-text search across video transcripts
  - [ ] Custom video player implementation with:
    - [ ] Keyboard controls for accessibility
    - [ ] Playback speed controls (0.5x to 3x)
    - [ ] Focus indicators complying with WCAG 2.2
    - [ ] Synchronized transcript display

### 3. Technical Implementation

- [ ] Database Schema Design
  - [ ] Admin user model (single user)
  - [ ] Member model (with expiration dates)
  - [ ] Event model
  - [ ] Page content model
  - [ ] Minutes/document model
  - [ ] Video/transcription model with validation

- [ ] API Endpoints
  - [ ] Authentication routes
  - [ ] Content management routes
  - [ ] Event CRUD operations
  - [ ] Member management
  - [ ] Contact form submission
  - [ ] Document upload/retrieval
  - [ ] Video and subtitle management
  - [ ] Membership expiration handling

- [ ] Frontend Components
  - [ ] Responsive navigation
  - [ ] Calendar component
  - [ ] Contact form
  - [ ] WYSIWYG editor
  - [ ] File uploader
  - [ ] Admin dashboard layout
  - [ ] Authentication forms
  - [ ] Custom video player with subtitle support

- [ ] Integrations
  - [ ] Zeffy donation widget
  - [ ] Email service (system@olathedeafclub.com)
  - [ ] Google Maps for location
  - [ ] Social media sharing

- [ ] Logging & Analytics
  - [ ] Comprehensive request logging
  - [ ] User action tracking
  - [ ] Error logging
  - [ ] Performance metrics
  - [ ] Structured log format for external analysis

## Development Phases

### Phase 1: Setup & Infrastructure
- [ ] Initialize Next.js 15.2.3 project with TypeScript 5.8
- [ ] Set up CSS-first Tailwind configuration with @theme directives
- [ ] Set up Express backend
- [ ] Configure Docker development environment with security best practices
- [ ] Establish database connections with MongoDB 7.0 schema validation
- [ ] Create basic project structure
- [ ] Set up admin authentication system with JWT
- [ ] Implement logging infrastructure

### Phase 2: Core Public Pages
- [ ] Develop home page layout and components
- [ ] Build About section pages
- [ ] Implement calendar functionality
- [ ] Create membership information pages
- [ ] Develop contact form with validation
- [ ] Implement Zeffy donation integration
- [ ] Implement SEO optimization

### Phase 3: Admin Functionality
- [ ] Build admin dashboard UI
- [ ] Implement WYSIWYG editor
- [ ] Create event management system
- [ ] Develop document repository
- [ ] Build member management features
- [ ] Implement membership expiration notification system
- [ ] Implement ASL video management system

### Phase 4: Accessibility & Refinement
- [ ] Implement comprehensive accessibility features according to WCAG 2.2 AA
- [ ] Set up email notifications
- [ ] Implement social sharing
- [ ] Optimize for performance
- [ ] Test with screen readers and assistive technologies
- [ ] Test with refreshable braille displays

### Phase 5: Testing & Deployment
- [ ] Conduct user testing
- [ ] Fix bugs and refine UI/UX
- [ ] Set up production Docker environment
- [ ] Configure Nginx and SSL
- [ ] Deploy to production server with Portainer
- [ ] Set up monitoring and analytics

## SEO Optimization
- [ ] Implement Next.js metadata API for dynamic meta tags
- [ ] Create XML sitemap generation
- [ ] Implement structured data (JSON-LD) for events and organization
- [ ] Optimize image alt text and file names
- [ ] Implement canonical URLs
- [ ] Create SEO-friendly URL structure
- [ ] Implement Open Graph and Twitter card metadata
- [ ] Ensure proper heading hierarchy
- [ ] Implement server-side rendering for critical pages
- [ ] Create robots.txt file
- [ ] Implement breadcrumb navigation

## Membership Management
- [ ] Member registration system (admin-managed)
- [ ] Membership expiration tracking
- [ ] Automated email notifications for:
  - [ ] Upcoming membership expirations (30 days prior)
  - [ ] Expired memberships (day of expiration)
  - [ ] Notification to board about expired members
- [ ] Membership status indicators in admin dashboard
- [ ] Exportable member list for meeting attendance verification
- [ ] Email list generation for newsletter distribution
- [ ] Member search and filtering capabilities
- [ ] Membership statistics and reporting

## Accessibility Considerations
- [ ] Ensure WCAG 2.2 AA compliance
- [ ] Implement proper semantic HTML
- [ ] Add appropriate ARIA attributes
- [ ] Test with screen readers
- [ ] Provide captions/transcripts for all video content
- [ ] Ensure keyboard navigation
- [ ] Maintain sufficient color contrast (≥4.5:1)
- [ ] Focus Not Obscured (2.4.11) - ensure focus indicators are clearly visible
- [ ] Target Size (2.5.8) - ensure touch targets are at least 24px × 24px
- [ ] Accessible Authentication (3.3.7/3.3.8) - offer alternatives to cognitive tests
- [ ] Specific focus on DeafBlind/Blind user accessibility
- [ ] Text resizing without breaking layout
- [ ] Screen magnifier compatibility
- [ ] Refreshable braille display compatibility with proper ARIA landmarks

## Video and Transcription Features
- [ ] Custom video player implementation:
  - [ ] Play/pause toggle with visual indicators
  - [ ] Progress bar with clickable position seeking
  - [ ] Forward/backward 5-second skip controls
  - [ ] Fullscreen toggle functionality
  - [ ] Playback rate selection (0.5x, 1x, 1.5x, 2x, 3x)
  - [ ] Auto-hiding controls during playback
  - [ ] Keyboard shortcuts (space for play/pause, arrow keys for seeking)
  - [ ] WebVTT subtitle integration with toggle option
  - [ ] Accessible control buttons with ARIA labels and icon titles
  - [ ] Touch-friendly controls for mobile devices
- [ ] Enhanced accessibility features:
  - [ ] Transcript view option alongside video
  - [ ] Support for three transcript formats (plain, HTML, JSON)
  - [ ] Direct linking to specific video segments/timestamps
  - [ ] Required thumbnail preview images
  - [ ] Responsive container sizing for different screen sizes
  - [ ] Volume control with mute option
  - [ ] Picture-in-picture support
  - [ ] Improved subtitle styling options
  - [ ] Video quality selection if multiple sources available
- [ ] Video management in admin dashboard:
  - [ ] Video upload with automatic processing
  - [ ] VTT subtitle file upload and association
  - [ ] Transcript generation/editing interface
  - [ ] Thumbnail generation and management
  - [ ] Video metadata management (title, description, categories)
  - [ ] Video organization by categories/tags

## Responsive Design
- [ ] Mobile-first approach
- [ ] Tablet optimization
- [ ] Desktop layouts
- [ ] Touch-friendly interface elements
- [ ] Flexible content containers
- [ ] Responsive typography
- [ ] Optimized images for different screen sizes

## Performance Optimization
- [ ] Implement image optimization
- [ ] Configure caching strategies
- [ ] Minimize JavaScript bundles
- [ ] Optimize CSS delivery
- [ ] Implement lazy loading
- [ ] Set up CDN for static assets
- [ ] Optimize video delivery