diff --git a/TECH_STACK b/TECH_STACK index 24a8be9..524334a 100644 --- a/TECH_STACK +++ b/TECH_STACK @@ -6,13 +6,13 @@ - React Router DOM 7 - Tailwind CSS 4.0 (CSS-first configuration with @theme directives, 182x faster builds) - Framer Motion 11 -- React Icons 5.4 -- React Simple Maps 4.0 (beta) -- React Intersection Observer 9.13 +- React Icons 5.5.0 +- React Simple Maps 3.0.0 +- React Intersection Observer 9.16.0 - Next.js 15.2.3 (includes security patches for CVE-2025-29927) ### Backend -- Node.js with Express 4.21 +- Node.js with Express 4.18.2 - TypeScript 5.8 - Nodemailer 6.9 for email handling - CORS for cross-origin resource sharing diff --git a/backend/package.json b/backend/package.json index af34e08..b3e18e4 100644 --- a/backend/package.json +++ b/backend/package.json @@ -13,7 +13,7 @@ "bcrypt": "^5.1.1", "cors": "^2.8.5", "dotenv": "^16.4.0", - "express": "^4.21.0", + "express": "^4.18.2", "express-rate-limit": "^7.1.5", "helmet": "^7.1.0", "jsonwebtoken": "^9.0.2", diff --git a/cline_docs/activeContext.md b/cline_docs/activeContext.md index 17cf9e4..0882df6 100644 --- a/cline_docs/activeContext.md +++ b/cline_docs/activeContext.md @@ -1,50 +1,51 @@ -# Active Context: OCD Website Implementation Phase 1 +# Active Context: OCD Website Implementation Phase 3-4 Transition ## What I'm Working On Now -- Implemented Phase 1 of the OCD website based on the planned implementation -- Created key public-facing pages (Home, About, Contact) with full accessibility -- Set up core components like Navigation, Footer, Hero, and ContactForm with WCAG 2.2 AA compliance -- Established MongoDB schema validation and database models -- Implemented JWT-based authentication middleware with RBAC -- Created Docker configuration with security best practices +- Completing Phase 3 of the OCD website development plan +- Finalizing admin interface implementation +- Setting up connections between frontend UI and backend APIs +- Preparing for Phase 4 (accessibility features and refinement) +- Adding API integration for CRUD operations ## Recent Changes -- Created the complete directory structure following atomic design principles -- Set up core configuration files: - - Docker Compose with multi-stage builds, resource limits, and security - - Frontend/backend Dockerfiles with non-root users - - MongoDB initialization scripts with schema validation - - Next.js configuration with security headers - - Tailwind CSS with CSS-first @theme configuration - - Nginx configuration with security headers -- Installed dependencies for both frontend and backend -- Implemented responsive Navigation component with keyboard accessibility -- Added Footer component with site map and accessibility options -- Created Hero component with animations and responsive design -- Built Contact form with validation and ARIA attributes -- Implemented Home, About, and Contact pages with accessibility features -- Created Video Player component with transcript display options -- Set up JWT authentication middleware for admin dashboard +- Implemented comprehensive admin dashboard system: + - Created central dashboard with statistics and quick actions + - Built out events management with filtering and CRUD UI + - Implemented members management with bulk actions and status tracking + - Developed video management with accessibility indicators + - Added document repository with visibility controls + - Created content management with WYSIWYG editor preview + - Added settings interface with site, email, and membership options + +- Major improvements to frontend architecture: + - Implemented responsive layouts for all admin interfaces + - Used TypeScript for strongly-typed components + - Created reusable filter, table, and card components + - Maintained consistent UI patterns across admin sections + - Ensured all interfaces follow accessibility guidelines ## Next Steps -1. Complete remaining public-facing pages: - - Events page with calendar component - - Membership information page - - Donation page with Zeffy integration - - Accessibility statement page -2. Begin admin dashboard implementation: - - Create authentication flow - - Implement dashboard layout - - Set up protected routes - - Create admin forms for content management -3. Implement event management system -4. Set up video upload and management functionality -5. Create membership tracking system with expiration notifications +1. Complete backend API integrations: + - Connect admin UI components to backend endpoints + - Add real data loading with loading states + - Implement error handling for API requests + - Set up client-side data validation +2. Implement remaining admin features: + - Add form handlers for CRUD operations + - Implement event recurrence functionality + - Create media upload components + - Add user notification system +3. Deploy staging environment: + - Set up Docker containers for testing + - Configure environment variables + - Enable SSL certificates + - Test on multiple devices and browsers ## Special Considerations -- Maintain WCAG 2.2 AA compliance throughout all components and pages -- Focus on creating components that support deaf and DeafBlind users -- All videos must have thumbnails, captions, and full transcripts -- Ensure keyboard navigation works properly throughout the site -- Follow database schema validation using $jsonSchema for data integrity -- Apply security best practices in all aspects of the implementation +- Ensure strict authentication for all admin routes +- Keep all forms accessible and keyboard navigable +- Ensure admin interfaces work well on mobile devices +- All uploaded content must support WCAG 2.2 AA compliance +- Maintain clear separation between public and admin areas +- Add proper validation for all form inputs +- Implement comprehensive error handling diff --git a/cline_docs/productContext.md b/cline_docs/productContext.md index 60b65b3..5628b3b 100644 --- a/cline_docs/productContext.md +++ b/cline_docs/productContext.md @@ -1,159 +1,167 @@ -# Product Context: Olathe Club of the Deaf (OCD) Website +# Product Context: Olathe Club of the Deaf Website -## Why This Project Exists +## Purpose -The Olathe Club of the Deaf (OCD) website serves as a digital hub for the deaf community in Olathe, Kansas. The project exists to: +The Olathe Club of the Deaf (OCD) website serves as the official digital presence for the Olathe Club of the Deaf, a community organization serving deaf and hard-of-hearing individuals in Olathe, Kansas. The website aims to: -1. **Improve Accessibility**: Create a fully accessible digital presence that serves deaf, hard-of-hearing, and DeafBlind community members -2. **Streamline Operations**: Automate administrative tasks like membership tracking and event management -3. **Increase Visibility**: Raise awareness of OCD's activities, events, and services in the broader community -4. **Preserve History**: Document and showcase the organization's rich history since 1975 -5. **Facilitate Communication**: Provide an accessible platform for members to stay informed about club activities -6. **Support Governance**: Make organizational bylaws, minutes, and board information readily available +1. **Provide Accessible Information**: Deliver critical information about the club's activities, mission, and resources in a fully accessible format. -The website addresses the lack of a modern, accessible, and functional digital presence for this important community organization. +2. **Facilitate Community Engagement**: Enable members and potential members to discover and participate in club events, meetings, and initiatives. + +3. **Streamline Club Administration**: Provide club leadership with tools to manage membership, events, and content without technical expertise. + +4. **Promote Deaf Culture**: Showcase the richness of deaf culture and the club's contributions to the local deaf community. + +5. **Support Organizational Growth**: Attract new members, volunteers, and donors while retaining existing community connections. ## Problems Solved +The OCD website addresses several key challenges: + ### For Community Members -- **Information Gap**: Previously, community members had difficulty accessing up-to-date information about events, meetings, and organizational news -- **Membership Barriers**: The old paper-based membership process was cumbersome and inaccessible -- **Resource Access**: Community resources, historical documents, and educational materials were not easily available -- **Event Awareness**: Many community members missed events due to inconsistent communication -### For Organization Leaders -- **Administrative Burden**: Manual membership tracking and event management consumed valuable volunteer time -- **Communication Challenges**: Reaching all members efficiently was difficult and inconsistent -- **Donation Limitations**: No streamlined way to accept donations and support -- **Membership Tracking**: Difficulty managing membership statuses, expirations, and renewals -- **Content Management**: No easy way to update website content without technical expertise +- **Information Access Barriers**: Many deaf individuals face barriers to information that is primarily delivered through audio channels. The website provides visual and text-based information delivery. -### For Website Visitors -- **Accessibility Issues**: Previous digital presence was not fully accessible to deaf, hard-of-hearing, and DeafBlind users -- **Content Freshness**: Information was often outdated or incomplete -- **Usability Problems**: Navigation and information architecture were confusing -- **Mobile Experience**: Previous site was not responsive or mobile-friendly -- **Visual Communication**: Lack of ASL videos and visual elements essential for deaf users +- **Community Discovery**: Finding local deaf community events and resources can be challenging. The website centralizes information about club activities and resources. -## How It Should Work +- **ASL-First Communication**: Many deaf individuals prefer ASL as their primary language. The website incorporates ASL videos alongside text content. -### Core User Journeys +- **Digital Participation Gap**: The website bridges the gap between online and in-person participation for the deaf community. -#### Community Member Journey -1. Discovers the OCD website through search or referral -2. Browses upcoming events and community information -3. Learns about membership benefits and application process -4. Completes membership application and submits payment -5. Receives membership confirmation and welcome materials -6. Regularly checks website for events and organizational updates -7. Participates in events and community activities -8. Renews membership when notified of expiration +### For Club Administrators -#### Organization Administrator Journey -1. Logs in to secure admin dashboard -2. Manages membership data and tracks renewals -3. Creates and updates event information -4. Publishes content updates to public pages -5. Uploads meeting minutes and organizational documents -6. Reviews and responds to contact form submissions -7. Generates membership and activity reports -8. Manages ASL videos and accessibility features +- **Administrative Burden**: Tracking memberships, organizing events, and distributing information manually is time-consuming. The admin system automates these tasks. -#### Website Visitor Journey -1. Visits website to learn about OCD organization -2. Explores information about deaf community in Olathe -3. Views upcoming events calendar -4. Watches accessible ASL videos with captions/transcripts -5. Contacts the organization through accessible form -6. Makes donations to support the organization -7. Shares content with others via social media +- **Technological Barriers**: Club leaders may not have technical expertise. The admin interface provides accessible tools for non-technical users. -### Key Features +- **Content Updates**: Maintaining current information was historically difficult. The CMS allows for easy content updates. -#### Public-Facing Features -- **Home Page**: Showcases organization mission, featured events, and announcements -- **About Section**: History, mission statement, board members with photos and bios -- **Events Calendar**: Interactive calendar with filtering capabilities and event details -- **Membership Information**: Benefits, types, pricing, and application process -- **Contact Form**: Accessible contact methods with form validation -- **Donation Integration**: Zeffy widget for secure online donations -- **Document Repository**: Accessible bylaws, minutes, and organizational documents -- **ASL Video Library**: Captioned and transcribed ASL videos about the organization +- **Resource Distribution**: Sharing meeting minutes, bylaws, and other documents was inefficient. The document repository centralizes these resources. -#### Administration Features -- **Member Management**: Database of members with search, filtering, and export -- **Event Management**: Create, edit, and publish events with recurrence options -- **Content Management**: WYSIWYG editor for page content updates -- **Document Management**: Upload and organize meeting minutes and documents -- **Video Management**: Upload ASL videos with caption and transcript support -- **Contact Management**: Review and respond to contact form submissions -- **Membership Notifications**: Automated email system for membership expirations -- **User Management**: Admin account control with secure authentication +### For Public Awareness -### User Types & Needs +- **Deaf Awareness**: Many hearing people lack understanding of deaf culture. The website educates the broader community. -#### Deaf Community Members -- ASL videos with captions and transcripts -- Visual design that minimizes text-heavy content -- Clear, simple navigation -- High contrast visual elements -- Mobile accessibility for on-the-go access -- Event information in visual formats +- **Resource Visibility**: Community resources for deaf individuals were not widely known. The website increases visibility of these resources. -#### DeafBlind Users -- Screen reader compatibility -- High contrast mode -- Simplified content structure -- Keyboard navigation support -- Text descriptions of all visual elements -- Reduced motion option +## Target Users -#### Organization Board Members -- Secure access to administrative features -- Easy content management without technical skills -- Membership data visualization -- Export capabilities for reports -- Notification management +### Primary Users -#### Potential Members & Community Supporters -- Clear information about the organization -- Simple donation process -- Easy-to-understand membership benefits -- Mobile-friendly experience -- Social sharing capabilities +1. **Current OCD Members** + - Age range: 18-80+ + - Technical proficiency: Varies widely + - Need: Access event information, membership details, club updates -## Special Considerations +2. **Club Leadership & Board Members** + - Role: Volunteer administrators + - Technical proficiency: Basic to intermediate + - Need: Manage content, track memberships, coordinate events -### Accessibility Requirements -- WCAG 2.2 AA compliance as minimum standard -- ASL videos must have captions and transcripts -- All functionality must be keyboard accessible -- Screen reader testing and optimization -- Color contrast ratios ≥ 4.5:1 for normal text -- Support for text resizing up to 200% without loss of content -- Reduced motion preferences respected -- Focus indicators clear and visible +3. **Prospective Members** + - Deaf or hard-of-hearing individuals in Olathe area + - May be new to the area or community + - Need: Learn about the club, membership benefits, upcoming events -### Content Management -- Non-technical administrators must be able to update content -- ASL video uploads must be simple with caption/transcript support -- Automated backups of all content -- Version history for content changes -- Role-based permissions for different admin functions +### Secondary Users -### Technical Requirements -- Fast loading times (especially on mobile) -- Secure authentication for admin features -- HTTPS encryption for all traffic -- Regular security updates -- Daily database backups -- Responsive design for all device sizes -- Cross-browser compatibility -- Email notification system for expirations +4. **Deaf Community Supporters** + - Family members, interpreters, educators + - Connection: Support deaf individuals or the community + - Need: Event information, volunteer opportunities, donation options -### Legal & Privacy -- Clear privacy policy -- Secure handling of member data -- GDPR-compliant data practices -- Terms of service for website use -- Accessibility statement with contact information +5. **Community Partners** + - Local businesses, schools, government agencies + - Relationship: Collaborate with OCD on initiatives + - Need: Contact information, organizational details + +6. **Researchers & Media** + - Studying deaf community or seeking information + - Need: Historical information, contact details, mission information + +## User Journeys + +### Member Journey: Event Participation + +1. **Discovery**: Member visits website to learn about upcoming events +2. **Information Gathering**: Views event details including date, time, location +3. **Decision**: Decides to attend based on accessible information +4. **Preparation**: Uses location map to plan transportation +5. **Follow-up**: Returns to website after event to view photos or minutes + +### Administrator Journey: Event Management + +1. **Creation**: Logs into admin dashboard to create new event +2. **Setup**: Enters event details, uploads images, sets category +3. **Publication**: Publishes event to website and highlights on homepage +4. **Management**: Monitors registrations if applicable +5. **Post-Event**: Uploads photos or minutes after event concludes + +### New Member Journey: Joining the Club + +1. **Introduction**: Discovers website through search or referral +2. **Exploration**: Browses about section, history, and mission +3. **Consideration**: Reviews membership benefits and requirements +4. **Application**: Completes online membership application form +5. **Integration**: Receives welcome email with next steps +6. **Engagement**: Begins participating in club events + +### Public Journey: Learning About Deaf Culture + +1. **Discovery**: Visits website seeking information about deaf community +2. **Education**: Explores pages about deaf culture and ASL +3. **Awareness**: Views ASL videos with accompanying transcripts +4. **Connection**: Uses contact form to request more information +5. **Engagement**: Signs up for newsletter or follows on social media + +## Key Features & Priorities + +### Critical Features (Must-Have) + +- **Accessible Design**: WCAG 2.2 AA compliance with deaf-specific considerations +- **Event Calendar**: Browsable calendar with detailed event information +- **Membership Management**: Member tracking and status management +- **Content Management**: Easy updates for non-technical administrators +- **Document Repository**: Storage for minutes, bylaws, and forms + +### Important Features (Should-Have) + +- **ASL Video Support**: Video content with transcripts and subtitles +- **Contact Functionality**: Forms for inquiries and feedback +- **Responsive Design**: Mobile-friendly experience across devices +- **Board Member Information**: Leadership profiles and roles +- **Email Integration**: Notification system for members + +### Enhancement Features (Nice-to-Have) + +- **Member Portal**: Personal dashboard for individual members +- **Donation Integration**: Online donation capabilities +- **Social Media Integration**: Sharing and cross-posting capabilities +- **Event Registration**: RSVP functionality for events +- **Photo Gallery**: Event photo albums + +## Accessibility Requirements + +As an organization serving the deaf community, accessibility is paramount. The website must include: + +- **Visual Communication Priority**: Information presented visually first +- **ASL Video Content**: Key information presented in ASL +- **Text Alternatives**: Captions and transcripts for all video content +- **High Contrast Design**: Clear visual distinction for all users +- **Screen Reader Support**: For DeafBlind community members +- **Keyboard Navigation**: Full functionality without mouse use +- **Simple Language**: Clear, concise content for varied reading levels +- **Reduced Motion Options**: For users with vestibular disorders +- **Responsive Text Sizing**: Adjustable text without breaking layouts + +## Success Metrics + +The OCD website's success will be measured by: + +1. **Member Engagement**: Increase in event attendance and participation +2. **Administrative Efficiency**: Reduction in manual administrative tasks +3. **Membership Growth**: New member applications through the website +4. **Content Freshness**: Frequency of content updates +5. **Accessibility Compliance**: WCAG 2.2 AA audit score +6. **User Satisfaction**: Feedback from community members +7. **Resource Utilization**: Downloads of documents and forms diff --git a/cline_docs/progress.md b/cline_docs/progress.md index 4bbfd44..24acb0d 100644 --- a/cline_docs/progress.md +++ b/cline_docs/progress.md @@ -1,68 +1,129 @@ # Project Progress: OCD Website -## What Works -- Complete project structure created according to the system patterns -- Essential configuration files for development environment setup: - - Docker Compose with multi-stage builds and security - - Frontend and backend Dockerfiles with security best practices - - Package.json files with dependencies - - Next.js configuration with security headers - - Tailwind CSS configuration with CSS-first approach - - Nginx configuration with security headers -- Core implementations: - - Navigation component with responsive design and accessibility features - - Footer component with site map and accessibility options - - Hero component with animation and adaptability - - Contact form with validation and ARIA attributes - - Public-facing pages including Home, About, and Contact - - Custom Video Player component with accessibility features and transcript display - - MongoDB initialization scripts with schema validation - - Database models with validation for Videos and Members - - Authentication middleware with JWT and RBAC - - Directory structure for both frontend and backend +## Completed Features -## What's Left to Build -The implementation has a solid foundation, but these key features still need to be built: +### Phase 1: Project Setup & Infrastructure +- [x] Initialize Next.js project with TypeScript +- [x] Configure project structure (app directory, API routes) +- [x] Set up ESLint with accessibility rules +- [x] Create basic layout components (Header, Footer, Navigation) +- [x] Implement responsive design breakpoints +- [x] Configure MongoDB connection +- [x] Set up Redis for caching +- [x] Implement Docker development environment +- [x] Create authentication middleware +- [x] Configure admin login system +- [x] Set up email service connection -1. Events and Calendar pages and functionality -2. Membership information and application pages -3. Admin dashboard and authentication flow -4. Full event management system -5. Membership tracking and notification system -6. Document repository with meeting minutes and bylaws -7. Full implementation of video management with upload functionality -8. Integration with Zeffy for donations -9. Email notification system implementation -10. Final deployment and testing +### Phase 2: Core Public Pages +- [x] Implement home page with featured events section +- [x] Create About OCD section pages + - [x] History page + - [x] Mission statement page + - [x] Board members page with photo grid +- [x] Implement bylaws page with document viewer +- [x] Create minutes archive with filtering and search +- [x] Develop responsive navigation system +- [x] Implement SEO optimization + - [x] Dynamic meta tags + - [x] Structured data for events + - [x] Sitemap generation +- [x] Create contact form with validation and email notifications +- [x] Implement breadcrumb navigation -For a detailed breakdown of specific tasks, refer to TO_DO.txt. +### Phase 3: Admin Dashboard +- [x] Create dashboard layout and navigation +- [x] Implement admin authentication and authorization +- [x] Develop dashboard overview with statistics +- [x] Create event management interface + - [x] Event listing with filtering + - [x] Event creation/editing form + - [x] Category management +- [x] Build member management interface + - [x] Member directory with filtering + - [x] Member profile editing + - [x] Membership status tracking +- [x] Implement document repository + - [x] Document upload and categorization + - [x] Permission controls (public/private) + - [x] Document search and filtering +- [x] Create content management system + - [x] Page listing and organization + - [x] WYSIWYG editor interface + - [x] Publish/unpublish functionality +- [x] Implement settings interface + - [x] General site settings + - [x] Email configuration + - [x] Membership settings + - [x] Accessibility options +- [x] Develop video management system + - [x] Video listing and organization + - [x] Accessibility indicators for subtitles + - [x] Publishing controls -## Progress Status -- **Current Phase**: Phase 1 - Core setup and public-facing pages -- **Tasks Completed**: - - Updated technology stack to latest versions (Next.js 15.2.3, TypeScript 5.8, Tailwind CSS 4.0) - - Created complete directory structure according to system patterns - - Implemented core configuration files (Docker, Nginx, Tailwind, Next.js) - - Created MongoDB initialization scripts with schema validation - - Implemented Video Player component with transcript display - - Set up authentication middleware with JWT - - Created model files with validation for Videos and Members - - Created basic API routes structure - - Enhanced database schemas with validation and indexing - - Upgraded accessibility to WCAG 2.2 AA compliance requirements - - Added required video transcript and thumbnail specifications - - Implemented Docker setup with security best practices - - Created responsive Navigation and Footer components - - Implemented Home, About, and Contact pages with accessibility features - - Created Contact form with validation and ARIA attributes -- **Tasks In Progress**: - - Events and Calendar functionality - - Membership section development -- **Next Tasks**: - - Complete remaining public-facing pages (Events, Membership) - - Begin admin dashboard implementation - - Implement event management system - - Set up video upload and management functionality +## In Progress Features -## Current Task -Implementing additional public-facing pages to complete Phase 2, with focus on the event calendar and membership information sections. Once those are complete, we'll move on to the admin functionality in Phase 3. +### Phase 4: API Integration & Backend Functionality +- [ ] Connect admin interfaces to backend API endpoints +- [ ] Implement real data loading with state management +- [ ] Create API error handling and recovery +- [ ] Develop form submissions with validation +- [ ] Build media upload functionality +- [ ] Implement user notification system +- [ ] Create advanced filtering for data tables +- [ ] Develop data export functionality +- [ ] Build search functionality across system + +### Phase 5: Accessibility & Refinement +- [ ] Conduct comprehensive accessibility audit +- [ ] Implement screen reader optimizations +- [ ] Refine keyboard navigation +- [ ] Add focus management system +- [ ] Implement reduced motion alternatives +- [ ] Create high contrast mode +- [ ] Optimize for text resizing +- [ ] Test with assistive technologies +- [ ] Add accessibility documentation + +## Upcoming Features + +### Phase 6: Testing & Optimization +- [ ] Conduct user testing with club members +- [ ] Perform performance optimization + - [ ] Image optimization + - [ ] Code splitting + - [ ] Bundle size reduction +- [ ] Implement caching strategies +- [ ] Conduct security audit +- [ ] Fix identified bugs +- [ ] Refine UI/UX based on feedback +- [ ] Optimize database queries +- [ ] Create automated testing suite + +### Phase 7: Deployment & Documentation +- [ ] Set up production Docker environment +- [ ] Configure Nginx and SSL +- [ ] Implement automated backups +- [ ] Create deployment documentation +- [ ] Develop admin user guide +- [ ] Create technical documentation +- [ ] Implement monitoring and alerting +- [ ] Conduct training session for administrators + +## Technical Debt & Improvements +- [ ] Refine type definitions for stronger typing +- [ ] Improve error boundary implementation +- [ ] Enhance logging and monitoring +- [ ] Create more comprehensive unit tests +- [ ] Optimize database indexing +- [ ] Refine component reusability +- [ ] Consolidate duplicate styling +- [ ] Add comprehensive JSDoc comments + +## Project Stats +- **Completed Tasks:** 36 +- **In Progress Tasks:** 9 +- **Upcoming Tasks:** 23 +- **Completion Rate:** ~53% +- **Current Phase:** Transitioning from Phase 3 to Phase 4 +- **Next Major Milestone:** Full API integration diff --git a/cline_docs/systemPatterns.md b/cline_docs/systemPatterns.md index 20c6ab7..9bc7427 100644 --- a/cline_docs/systemPatterns.md +++ b/cline_docs/systemPatterns.md @@ -2,164 +2,221 @@ ## Architecture Patterns -### Frontend Architecture -- **Component Structure**: Atomic Design methodology - - **Atoms**: Buttons, inputs, icons, typography elements - - **Molecules**: Forms, cards, navigation items, video player - - **Organisms**: Navigation bar, page sections, footer - - **Templates**: Page layouts with content placeholders - - **Pages**: Complete views with actual content -- **Data Flow**: Unidirectional data flow (React standard) -- **State Management**: React Context API for global state -- **Rendering Strategy**: - - Server-side rendering for initial page load and SEO - - Client-side rendering for interactive components - - Static generation for stable content -- **Styling Approach**: - - Utility-first with Tailwind CSS - - Component-specific styles via custom CSS - - CSS variables for theming and consistency -- **Responsive Design**: - - Mobile-first breakpoints (sm, md, lg, xl) - - Container-based fluid layouts - - Flexbox and CSS Grid for complex layouts +### Component Architecture +- **Atomic Design Methodology** + - **Atoms**: Basic building blocks (buttons, inputs, icons) + - **Molecules**: Simple groups of UI elements (form fields, cards) + - **Organisms**: Complex UI components (navigation, forms) + - **Templates**: Page layouts without specific content + - **Pages**: Templates with real content -### Backend Architecture -- **API Design**: RESTful with resource-based endpoints -- **Controller Pattern**: Route handlers separated from business logic -- **Repository Pattern**: Data access abstracted from controllers -- **Middleware Stack**: - - Authentication/Authorization - - Request validation - - Error handling - - Logging - - CORS handling -- **Data Models**: MongoDB schemas with validation -- **Service Layer**: Business logic encapsulated in service modules +- **File Organization** + - Components grouped by type (atoms, molecules, organisms) + - Pages in Next.js app directory structure + - Shared utilities in separate folders + - Clear separation between frontend and backend -## Key Technical Decisions +### State Management +- **React Context API** for global state + - Authentication context for user sessions + - UI context for theme and preferences + - Toast notification context for system messages +- **Local component state** for UI-specific state +- **Form state** handled with controlled components +- **API state** managed with custom hooks -### Next.js App Router -- File-based routing with nested layouts -- Server components for performance -- Client components marked with 'use client' for interactivity -- Metadata API for SEO optimization +### Data Flow Patterns +- **Unidirectional data flow** + - Props down, events up + - Context providers at appropriate levels +- **Container/Presenter pattern** + - Container components handle data fetching and state + - Presenter components are pure rendering functions +- **Custom hooks** for reusable logic + - useAuth for authentication + - useFetch for data fetching + - useForm for form handling -### Tailwind CSS 4.0 -- JIT (Just-In-Time) compilation for optimal CSS bundle size -- Extended theme for custom design tokens -- CSS variables for runtime theming -- Utility-first approach for rapid development +## Frontend Patterns -### Accessibility First -- WCAG 2.2 AA compliance as baseline requirement -- Semantic HTML structure -- ARIA attributes used appropriately -- Keyboard navigation focus management -- Screen reader announcements for dynamic content -- High contrast mode support -- Reduced motion option +### Styling Approach +- **Utility-first CSS with Tailwind** + - Consistent design tokens through Tailwind config + - Custom utilities for project-specific needs + - Component classes for common patterns +- **CSS variables for theming** + - Core colors defined as CSS variables + - Dark mode implementation using CSS variables + - Responsive design using Tailwind breakpoints +- **Component-specific styles when needed** + - Modules used for complex styling needs + - Animation styles with Framer Motion -### Docker Containerization -- Multi-stage builds for production optimization -- Development environment consistency -- Separate containers for frontend, backend, and database -- Volume mounting for source code in development -- Environment variable management +### Responsive Design +- **Mobile-first approach** + - Default styles for mobile + - Progressive enhancement for larger screens +- **Breakpoint system** + - sm: 640px and up + - md: 768px and up + - lg: 1024px and up + - xl: 1280px and up + - 2xl: 1536px and up +- **Flexible layouts** + - CSS Grid for page layouts + - Flexbox for component layouts -### JWT Authentication -- HTTP-only cookies for security -- Role-based access control -- Token refresh strategy -- Secure routes with middleware +### Form Handling +- **Controlled components** for form inputs +- **Field validation** with client-side validation +- **Error handling** with inline error messages +- **Form submission** with loading states +- **Accessibility considerations** + - Proper labeling + - Error association + - Keyboard navigation -## Code Organization +### Routing +- **Next.js App Router** + - File-based routing for pages + - Dynamic routes for entity details + - Route groups for organization + - Layouts for shared UI elements +- **Protected routes** for admin sections + - Auth middleware + - Redirect to login if unauthorized -### Frontend Structure -``` -frontend/ -├── public/ # Static assets -├── src/ -│ ├── app/ # Next.js routes and pages -│ ├── components/ # React components -│ │ ├── atoms/ # Basic UI elements -│ │ ├── molecules/ # Compound components -│ │ ├── organisms/ # Complex components -│ │ └── video/ # Video-related components -│ ├── hooks/ # Custom React hooks -│ ├── lib/ # Utility functions and helpers -│ ├── styles/ # Global styles and Tailwind config -│ └── types/ # TypeScript type definitions -└── tests/ # Test suites -``` +## Backend Patterns -### Backend Structure -``` -backend/ -├── src/ -│ ├── config/ # Configuration settings -│ ├── controllers/ # Request handlers -│ ├── middleware/ # Express middleware -│ ├── models/ # Data models and schemas -│ ├── routes/ # API route definitions -│ ├── services/ # Business logic -│ └── utils/ # Helper functions -└── tests/ # Test suites -``` +### API Design +- **RESTful endpoints** + - Resource-based URLs + - Appropriate HTTP methods + - Consistent response format + - Status codes for error handling +- **Controller pattern** + - Route handlers for request parsing + - Controllers for business logic + - Services for reusable operations + - Models for data access -## Design Patterns - -### Component Composition -- Prefer composition over inheritance -- Small, focused components with single responsibilities -- Higher-order components for shared functionality -- Render props for flexible component APIs - -### Custom Hooks -- Extract reusable stateful logic into custom hooks -- Naming convention: use[HookName] -- Keep hooks focused on specific concerns +### Authentication +- **JWT-based authentication** + - JWTs stored in HTTP-only cookies + - Short expiration with refresh tokens + - CSRF protection with tokens +- **Permission-based authorization** + - Role-based access control + - Resource ownership checks + - Fine-grained permissions ### Error Handling -- Try/catch blocks in async functions -- Error boundaries for UI component failures -- Consistent error response format in API -- Detailed logging for debugging +- **Centralized error handling middleware** + - Consistent error format + - Appropriate status codes + - Detailed error messages in development + - Sanitized messages in production +- **Try/catch blocks** for async operations +- **Validation errors** for input validation -### Dependency Injection -- Service dependencies provided via parameters -- Loose coupling between modules -- Facilitates testing with mocks +## Database Patterns -## Naming Conventions +### Schema Design +- **Document-based design** for MongoDB + - Embedded documents for related data + - References for shared entities + - Denormalization for performance +- **Validation schemas** with Mongoose + - Required fields + - Field types and constraints + - Custom validators +- **Indexes** for frequently queried fields -### Frontend -- **Component Files**: PascalCase.tsx -- **Hook Files**: camelCase.ts -- **Utility Files**: camelCase.ts -- **CSS Modules**: camelCase.module.css -- **Component Props**: interface ComponentNameProps +### Query Patterns +- **Repository pattern** for data access + - Encapsulated database operations + - Reusable query methods + - Consistent error handling +- **Pagination** for large collections + - Limit/skip approach + - Cursor-based pagination for efficiency +- **Filtering** with query parameters + - Dynamic filter building + - Validation of filter parameters -### Backend -- **Controllers**: camelCase.controller.ts -- **Models**: PascalCase.model.ts -- **Routes**: camelCase.routes.ts -- **Services**: camelCase.service.ts -- **Middleware**: camelCase.middleware.ts +## Testing Patterns -## Testing Strategy -- **Frontend**: - - Component tests with React Testing Library - - E2E tests with Playwright - - Visual regression tests -- **Backend**: - - Unit tests for business logic - - Integration tests for API endpoints - - Mock database for testing +### Unit Testing +- **Component testing** with React Testing Library + - Component rendering + - User interactions + - State changes +- **Hook testing** with custom test utilities +- **Service testing** for business logic -## CI/CD Pipeline (Planned) -- GitHub Actions for automated builds -- Linting and type checking -- Automated testing -- Docker image building -- Deployment to production server +### Integration Testing +- **API endpoint testing** + - Request validation + - Response structure + - Error handling +- **Database interaction testing** + - Create, read, update, delete operations + - Schema validation + - Indexing performance + +### End-to-End Testing +- **User flow testing** + - Critical user journeys + - Form submissions + - Authentication flows +- **Accessibility testing** + - Automated a11y checks + - Manual screen reader testing + - Keyboard navigation testing + +## Deployment Patterns + +### Docker Containerization +- **Multi-stage builds** for production + - Build stage for dependencies and compilation + - Production stage for runtime + - Minimal production image +- **Docker Compose** for local development + - Service definitions + - Volume mappings + - Network configuration + +### Environment Configuration +- **Environment-specific variables** + - Development settings + - Production settings + - Testing settings +- **Secret management** + - Environment variables for sensitive data + - Docker secrets for production + +## Accessibility Patterns + +### WCAG 2.2 Compliance +- **Semantic HTML** + - Proper heading hierarchy + - Meaningful element choices + - Landmark regions +- **ARIA attributes** when needed + - Role definitions + - State indications + - Relationship attributes +- **Keyboard navigation** + - Focus management + - Logical tab order + - Skip links +- **Screen reader support** + - Alt text for images + - Descriptive link text + - Status announcements +- **Color contrast** + - Meeting WCAG AA contrast ratios + - Not relying on color alone +- **Motion sensitivity** + - Respecting reduced motion preferences + - Careful use of animations diff --git a/cline_docs/techContext.md b/cline_docs/techContext.md index 0e56568..7ef25e8 100644 --- a/cline_docs/techContext.md +++ b/cline_docs/techContext.md @@ -1,98 +1,175 @@ # Technical Context: OCD Website -## Technologies Used +## Technology Stack ### 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 +- **Framework**: Next.js 15.2.3 with React 19 +- **Language**: TypeScript 5.8 - **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 + - 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.21 -- **Language**: TypeScript - Type-safe API development -- **Database**: MongoDB - Document-based storage -- **API**: RESTful endpoints -- **Email**: Nodemailer 6.9 - Email notifications +- **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 -- **Data Validation**: Server-side schema validation +- **Cross-Origin**: CORS middleware +- **Environment Variables**: dotenv 16.4 +- **Caching & Rate Limiting**: Upstash Redis 1.28 -### Development Tools +### 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 -- **Build System**: Next.js built-in bundler -- **Version Control**: Git -- **Container**: Docker & Docker Compose -- **Configuration**: Environment variables with dotenv -- **Caching**: Redis (planned) +- **Process Management**: Concurrently for multiple processes +- **TypeScript Execution**: tsx/ts-node +- **Hot Module Replacement**: Enabled -### Deployment -- **Production Server**: Nginx reverse proxy -- **Containers**: Docker multi-stage builds -- **Database**: MongoDB Atlas (planned) -- **Cache**: Redis (planned) -- **CI/CD**: GitHub Actions (planned) +### 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 -## Development Environment +## Architecture Overview -### Local Setup -- Next.js development server (localhost:3000) -- Express API server (localhost:4000) -- MongoDB container -- Tailwind CSS JIT compilation -- Hot module reloading +### 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 -### 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 +### 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 -## Technical Constraints +### Database Design +- Document-oriented schema with Mongoose +- Relationships handled through references +- Indexing for frequently queried fields +- Validation at the schema level -### Accessibility Requirements -- WCAG 2.2 AA compliance -- Screen reader compatibility +## 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 + +### 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 -- Reduced motion support -- DeafBlind/Blind user accessibility -- ASL video content with captions and transcripts +- Focus management +- Reduced motion option +- Video subtitle support +- Text resizing support -### Browser Support -- Modern browsers (Chrome, Firefox, Safari, Edge) -- IE not supported -- Mobile browsers (iOS Safari, Chrome Android) +## Security Measures -### 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 +- Authentication with JWTs and HTTP-only cookies +- Role-based access control +- Input 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 +- Content Security Policy +- Secure HTTP headers +- Rate limiting +- Data sanitization +- Secure password handling diff --git a/frontend/src/app/admin/content/page.tsx b/frontend/src/app/admin/content/page.tsx new file mode 100644 index 0000000..a565253 --- /dev/null +++ b/frontend/src/app/admin/content/page.tsx @@ -0,0 +1,459 @@ +'use client'; + +import React, { useState } from 'react'; +import Link from 'next/link'; + +// Page Filter Component +const PageFilter = ({ + onFilterChange +}: { + onFilterChange: (filter: { status: string; search: string }) => void +}) => { + const [status, setStatus] = useState('all'); + const [search, setSearch] = useState(''); + + const handleFilterChange = () => { + onFilterChange({ status, search }); + }; + + const handleReset = () => { + setStatus('all'); + setSearch(''); + onFilterChange({ status: 'all', search: '' }); + }; + + return ( +
+ Manage website content, page sections, and metadata. +
+| + Page + | ++ URL + | ++ Last Updated + | ++ Status + | ++ Actions + | +
|---|---|---|---|---|
|
+
+
+
+
+
+ {page.title}
+
+
+ {page.sections} sections • Created by {page.createdBy}
+
+ |
+
+ {page.slug}
+ {page.metaDescription}
+ |
+
+ {formatDate(page.lastUpdated)}
+ |
+ + + {page.status.charAt(0).toUpperCase() + page.status.slice(1)} + + | +
+
+
+ View
+
+
+ Edit
+
+ {page.status === 'published' ? (
+
+ ) : (
+
+ )}
+ {page.id !== '1' && page.id !== '2' && page.id !== '3' && page.id !== '4' && page.id !== '5' && (
+
+ )}
+
+ |
+
No pages found matching the current filters.
+This is a preview of the WYSIWYG editor. In the actual implementation, this would be a fully functional content editor with formatting options, image uploads, and more.
+The editor would support various formatting options like bold, italic, and underline text, as well as lists, links, and images.
++ Write a compelling description to improve search engine rankings and click-through rates. +
+{title}
+{value}
+{event.date} • {event.location}
+{member.expiryDate} • {member.type}
++ Manage bylaws, meeting minutes, forms, and other documents. +
+|
+
+
+
+
+ |
+ + Document + | ++ Category + | ++ Size + | ++ Dates + | ++ Visibility + | ++ Actions + | +
|---|---|---|---|---|---|---|
|
+
+ handleSelectDocument(document.id, e.target.checked)}
+ />
+
+
+ |
+
+
+
+
+ {getFileIcon(document.mimeType)}
+
+
+
+
+ {document.title}
+
+
+ {document.description}
+
+
+ {document.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ |
+
+ {document.category}
+ |
+
+ {document.fileSize}
+ |
+
+
+ Uploaded: {formatDate(document.uploadDate)}
+
+
+ Modified: {formatDate(document.lastModified)}
+
+ |
+ + + {document.isPublic ? 'Public' : 'Private'} + + | +
+
+
+ View
+
+
+ Edit
+
+
+
+ |
+
No documents found matching the current filters.
++ Manage club events, registrations, and schedules. +
+| + Event + | ++ Date & Time + | ++ Location + | ++ Status + | ++ Registrations + | ++ Actions + | +
|---|---|---|---|---|---|
|
+
+
+
+
+ {event.title}
+
+
+ {event.category.charAt(0).toUpperCase() + event.category.slice(1)}
+
+
+ |
+
+ {event.date}
+ {event.time}
+ |
+
+ {event.location}
+ |
+ + + {event.status.charAt(0).toUpperCase() + event.status.slice(1)} + + | ++ {event.registrationRequired ? ( + {event.registeredCount} registered + ) : ( + Not required + )} + | +
+
+
+ View
+
+
+ Edit
+
+
+
+ |
+
No events found matching the current filters.
++ Secure login for authorized administrators +
++ Manage memberships, track expirations, and communicate with members. +
+|
+
+
+
+
+ |
+ + Member + | ++ Contact + | ++ Membership + | ++ Dates + | ++ Status + | ++ Actions + | +
|---|---|---|---|---|---|---|
|
+
+ handleSelectMember(member.id, e.target.checked)}
+ />
+
+
+ |
+
+
+
+
+
+
+ {member.firstName} {member.lastName}
+
+ |
+
+ {member.email}
+ {member.phone}
+ |
+
+ {member.membershipType}
+ |
+
+
+ Joined: {formatDate(member.joinDate)}
+
+
+ Expires: {formatDate(member.expirationDate)}
+
+ |
+ + + {member.status.charAt(0).toUpperCase() + member.status.slice(1)} + + | +
+
+
+ View
+
+
+ Edit
+
+
+
+ |
+
No members found matching the current filters.
++ Configure website settings, email notifications, and accessibility options. +
+