diff --git a/cline_docs/activeContext.md b/cline_docs/activeContext.md new file mode 100644 index 0000000..c0dc24f --- /dev/null +++ b/cline_docs/activeContext.md @@ -0,0 +1,71 @@ +# Active Context + +## Current State +- Initial Memory Bank setup completed +- Documentation structure established +- Project analysis completed + +## Recent Changes +1. Created Memory Bank directory structure +2. Documented project context and architecture +3. Established technical documentation +4. Mapped out progress status + +## Documentation Created +1. productContext.md + - Project purpose and goals + - Problems solved + - Core functionality + +2. systemPatterns.md + - Architecture overview + - Technical decisions + - Implementation patterns + +3. techContext.md + - Technology stack details + - Development setup + - Technical constraints + +4. progress.md + - Feature implementation status + - Testing status + - Deployment status + +## Next Steps +1. Immediate Tasks + - Verify all documented features + - Review codebase for accuracy + - Update documentation as needed + +2. Short-term Goals + - Complete pending tests + - Perform accessibility audit + - Optimize performance + +3. Long-term Goals + - Implement continuous documentation updates + - Maintain technical debt management + - Plan feature enhancements + +## Current Focus Areas +1. Documentation + - Ensure accuracy of Memory Bank + - Keep technical documentation current + - Document any new findings + +2. Quality Assurance + - Verify feature implementations + - Review accessibility compliance + - Test performance metrics + +3. Maintenance + - Monitor system health + - Address technical debt + - Update dependencies + +## Notes +- Memory Bank established as single source of truth +- Documentation reflects current project state +- Regular updates needed to maintain accuracy +- Team coordination required for verification diff --git a/cline_docs/productContext.md b/cline_docs/productContext.md new file mode 100644 index 0000000..60372bd --- /dev/null +++ b/cline_docs/productContext.md @@ -0,0 +1,57 @@ +# Product Context + +## Purpose +DeafGain LLC Website serves as a digital platform dedicated to empowering the Deaf community through innovative communication solutions, training, and accessibility services. + +## Problems Solved +1. Digital Accessibility + - Provides ADA-compliant transcripts + - Implements universal website design principles + - Ensures content accessibility through WebVTT subtitles and transcriptions + +2. Communication Barriers + - Facilitates board communication protocols + - Offers leadership training + - Bridges communication gaps between deaf and hearing communities + +3. Service Visibility + - Showcases comprehensive service offerings + - Provides easy access to resources + - Demonstrates commitment to professional quality + +## Intended Functionality + +### Core Features +1. Interactive Components + - USA region map visualization + - Custom video player with accessibility features + - Contact form with email notifications + - Snow peaks animation effect + +2. Content Sections + - Service showcase + - Biography section + - Testimonials + - Timeline visualization + - Resources library + +3. Accessibility Features + - WebVTT subtitles + - Text transcriptions + - Universal design principles + - Responsive layout + +### User Experience +- Modern, responsive design +- Smooth animations and transitions +- Clear navigation structure +- Accessible content presentation +- Professional and engaging interface + +### Technical Requirements +- Fast loading times +- Mobile responsiveness +- Email notification system +- Rate limiting for security +- Caching for performance +- Secure contact form handling diff --git a/cline_docs/progress.md b/cline_docs/progress.md new file mode 100644 index 0000000..bc7b41f --- /dev/null +++ b/cline_docs/progress.md @@ -0,0 +1,92 @@ +# Project Progress + +## Implemented Features + +### Core Components +✅ Project Structure + - Layout components (Navbar, Footer) + - Page components (Home, About, Contact, Resources, Services) + - Shared components (Toast notifications) + +✅ Video Features + - Custom VideoPlayer component + - WebVTT subtitle support + - Transcription integration + +✅ Interactive Elements + - SnowPeaks animation + - Contact form with email integration + - Toast notification system + +### Content +✅ Media Assets + - Video content + - Subtitle files (.vtt) + - Transcription files (.txt) + - Images and thumbnails + +✅ Page Content + - Navigation structure + - Service information + - Resource materials + - Contact functionality + +### Infrastructure +✅ Development Environment + - Docker configuration + - TypeScript setup + - ESLint configuration + - Build system (Vite) + +✅ Backend Services + - Express server + - Email handling + - Rate limiting + - Redis integration + +## In Progress Features +🔄 None currently identified - need to verify with team + +## Planned Features +📋 To be determined based on roadmap and requirements + +## Known Issues +- None documented yet - need to review issue tracker + +## Next Steps +1. Review and verify all implemented features +2. Test accessibility compliance +3. Perform performance optimization +4. Conduct security audit +5. Update documentation as needed + +## Testing Status +### Completed +- Basic component rendering +- Route navigation +- Form submission +- Video playback + +### Pending +- End-to-end testing +- Accessibility testing +- Performance testing +- Security testing + +## Deployment Status +- Development environment: Configured +- Production environment: Configured +- Docker containers: Set up +- Nginx configuration: Complete +- Redis integration: Complete + +## Documentation Status +✅ README +✅ Technical documentation +✅ API documentation +✅ Deployment guides + +## Notes +- Project appears to be in a mature state with core features implemented +- Focus should be on testing, optimization, and maintenance +- Regular updates to documentation needed as features evolve diff --git a/cline_docs/systemPatterns.md b/cline_docs/systemPatterns.md new file mode 100644 index 0000000..86ebbdc --- /dev/null +++ b/cline_docs/systemPatterns.md @@ -0,0 +1,119 @@ +# System Patterns + +## Architecture Overview + +### Frontend Architecture +1. React Component Structure + - Layout components for consistent structure + - Shared components for reusability + - Page-specific components for unique features + - Context providers for state management + +2. Routing System + - React Router v7 for navigation + - Client-side routing + - Protected routes where necessary + +3. State Management + - React Context for global state + - Local state for component-specific data + - Notification context for toast messages + +### Backend Architecture +1. API Structure + - Express.js server + - RESTful endpoints + - Rate-limited routes + - Email service integration + +2. Caching Layer + - Redis-backed caching + - Session management + - Rate limiting implementation + +## Key Technical Decisions + +### Development Environment +1. Build System + - Vite for fast development + - Hot Module Replacement + - TypeScript compilation + - Concurrent frontend/backend development + +2. Docker Configuration + - Multi-container setup + - Development and production configurations + - Volume mounting for persistent data + - Bridge network setup + +### Production Setup +1. Deployment Strategy + - Multi-stage Docker builds + - Nginx for static file serving + - Node.js API server + - Automatic container restart + +2. Performance Optimizations + - Tree shaking + - Code splitting + - Redis caching + - Static file optimization + +### Security Patterns +1. API Security + - Rate limiting + - CORS configuration + - Environment variable protection + - Secure email handling + +2. Data Protection + - Form validation + - Input sanitization + - Redis session management + - Secure credential storage + +## Directory Structure +``` +src/ +├── api/ # Backend API routes +├── components/ # UI components +│ ├── Layout/ # Layout structure +│ └── shared/ # Reusable components +├── context/ # React Context +├── lib/ # Utility functions +├── pages/ # Route pages +└── assets/ # Static assets + +public/ +├── images/ # Image assets +├── subtitles/ # WebVTT files +├── transcriptions/# Text files +└── videos/ # Video content +``` + +## Implementation Patterns + +### Component Patterns +- Functional components with hooks +- TypeScript interfaces for props +- Separation of concerns +- Reusable styling with Tailwind + +### Animation Patterns +- Framer Motion for complex animations +- CSS transitions for simple effects +- Intersection Observer for scroll animations +- Performance-optimized animations + +### Accessibility Patterns +- ARIA labels +- Semantic HTML +- Keyboard navigation +- Screen reader support +- Color contrast compliance + +### Testing Strategy +- Component testing +- API endpoint testing +- Integration testing +- Accessibility testing diff --git a/cline_docs/techContext.md b/cline_docs/techContext.md new file mode 100644 index 0000000..88c7254 --- /dev/null +++ b/cline_docs/techContext.md @@ -0,0 +1,113 @@ +# Technical Context + +## Technology Stack + +### Frontend Technologies +| Technology | Version | Purpose | +|------------|---------|---------| +| React | 19.0.0 | Core UI Framework | +| TypeScript | 5.7.2 | Type Safety | +| React Router | 7.0.2 | Routing | +| Tailwind CSS | 3.4.16 | Styling | +| Framer Motion | 11.13.5 | Animations | +| React Simple Maps | 4.0.0-beta.6 | Geographic Visualization | +| Next.js | 14.1.0 | Framework Features | +| React Icons | 5.4.0 | Icon Library | +| React Intersection Observer | 9.13.1 | Scroll Detection | + +### Backend Technologies +| Technology | Version | Purpose | +|------------|---------|---------| +| Express | 4.21.2 | API Server | +| Node.js | Latest LTS | Runtime Environment | +| Nodemailer | 6.9.9 | Email Service | +| Upstash Redis | 1.28.4 | Caching/Rate Limiting | +| TypeScript | 5.7.2 | Type Safety | +| dotenv | 16.4.7 | Environment Management | + +### Development Tools +| Tool | Version | Purpose | +|------|---------|---------| +| Vite | 6.0.3 | Build System | +| pnpm | 9.14.2 | Package Manager | +| ESLint | 9.15.0 | Code Linting | +| Docker | Latest | Containerization | +| PostCSS | 8.4.49 | CSS Processing | +| Autoprefixer | 10.4.20 | CSS Compatibility | +| Concurrently | 8.2.2 | Process Management | + +## Development Setup + +### Prerequisites +- Node.js LTS version +- pnpm 9.14.2 +- Docker and Docker Compose +- Git + +### Local Development +```bash +# Install dependencies +pnpm install + +# Start development servers +pnpm dev # Runs frontend (3000) and backend (4000) + +# Build for production +pnpm build + +# Preview production build +pnpm preview +``` + +### Environment Variables +Required variables: +- `GMAIL_USER`: Email service username +- `GMAIL_PASS`: Email service password +- `REDIS_URL`: Upstash Redis connection URL +- `REDIS_TOKEN`: Upstash Redis auth token +- `API_URL`: Backend API URL +- `NODE_ENV`: Environment (development/production) + +### Docker Development +```bash +# Development environment +docker-compose -f docker-compose.dev.yml up + +# Production build +docker-compose up --build +``` + +## Technical Constraints + +### Performance Requirements +- First Contentful Paint < 1.5s +- Time to Interactive < 3.5s +- Lighthouse Performance Score > 90 +- Mobile-responsive breakpoints + +### Browser Support +- Modern browsers (last 2 versions) +- Chrome, Firefox, Safari, Edge +- Mobile browsers (iOS Safari, Chrome Android) + +### Accessibility Requirements +- WCAG 2.1 Level AA compliance +- Screen reader compatibility +- Keyboard navigation support +- Color contrast ratios +- Subtitle and transcript support + +### Security Requirements +- Rate limiting on API endpoints +- CORS policy configuration +- Secure email handling +- Environment variable protection +- Input validation and sanitization + +### Infrastructure Requirements +- Docker container deployment +- Nginx reverse proxy +- Redis caching layer +- Email service integration +- Static file serving +- API server configuration diff --git a/src/App.tsx b/src/App.tsx index 815557f..783a281 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,6 +18,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/pages/Resources.tsx b/src/pages/Resources.tsx index 8eb34d3..bfe3e29 100644 --- a/src/pages/Resources.tsx +++ b/src/pages/Resources.tsx @@ -1,6 +1,8 @@ import { useState, useRef, useEffect } from 'react' +import { useParams, useNavigate } from 'react-router-dom' +import { useNotification } from '../context/notification-context' import { motion, AnimatePresence } from 'framer-motion' -import { FaBookReader, FaTimes, FaVideo } from 'react-icons/fa' +import { FaBookReader, FaTimes, FaVideo, FaLink } from 'react-icons/fa' import VideoPlayer from '../components/VideoPlayer' interface Video { @@ -73,6 +75,9 @@ const resourceCategories: Category[] = [ ] const Resources = () => { + const { videoId } = useParams<{ videoId?: string }>() + const navigate = useNavigate() + const { showNotification } = useNotification() const [selectedVideo, setSelectedVideo] = useState