​

Frontend Components Documentation

​

Component Overview

​

Component Categories

​

1. Layout Components

​

MainNavbar.tsx

• Location: src/components/MainNavbar.tsx
• Purpose: Main navigation bar for public pages
• Features:
  • Responsive design with mobile hamburger menu
  • User authentication state display
  • Navigation links to key sections
  • Theme toggle functionality
• Props: None (uses context for user state)
• Dependencies:
  • React Router for navigation
  • Supabase for authentication
  • React Icons for icons

​

Navbar.tsx

• Location: src/components/Navbar.tsx
• Purpose: Alternative navigation component
• Features: Simplified navigation structure
• Dependencies: React Router

​

DashboardLayout.tsx

• Location: src/components/DashboardLayout.tsx
• Purpose: Layout wrapper for student/parent dashboard
• Features:
  • Sidebar navigation
  • Responsive design
  • User profile display
  • Logout functionality
• Dependencies:
  • LayoutContext for sidebar state
  • Supabase for authentication
  • React Router for navigation

​

TeacherDashboardLayout.tsx

• Location: src/components/TeacherDashboardLayout.tsx
• Purpose: Layout wrapper for teacher dashboard
• Features:
  • Teacher-specific navigation
  • Role-based menu items
  • Responsive sidebar
  • Quick access to key features
• Dependencies: Same as DashboardLayout

​

2. Authentication Components

​

AuthModal.tsx

• Location: src/components/AuthModal.tsx
• Purpose: Authentication modal for login/signup
• Features:
  • Tab-based login/signup interface
  • Form validation
  • Password reset functionality
  • Social login options
  • Error handling and display
• Props:
  • isOpen: boolean - Modal visibility state
  • onClose: () => void - Close handler
• Dependencies:
  • Supabase Auth
  • React Hook Form for form handling
  • React Hot Toast for notifications

​

3. Course Management Components

​

CreateCourseModal.tsx

• Location: src/components/CreateCourseModal.tsx
• Purpose: Modal for creating new courses
• Features:
  • Course creation form
  • Image upload functionality
  • Rich text editor for description
  • Validation and error handling
• Props:
  • isOpen: boolean
  • onClose: () => void
  • onSuccess: () => void - Success callback
• Dependencies:
  • Supabase for data persistence
  • Cloudinary for image upload
  • React Hook Form

​

AddSubjectModal.tsx

• Location: src/components/AddSubjectModal.tsx
• Purpose: Modal for adding subjects to courses
• Features:
  • Subject selection interface
  • Multiple subject selection
  • Validation
• Props:
  • isOpen: boolean
  • onClose: () => void
  • onAdd: (subjects: string[]) => void

​

4. Communication Components

​

StudentMessages.tsx

• Location: src/components/StudentMessages.tsx
• Purpose: Student messaging interface
• Features:
  • Message list display
  • Send message functionality
  • File attachment support
  • Real-time updates
• Dependencies:
  • SendBird SDK
  • Supabase for user data

​

TeacherMessages.tsx

• Location: src/components/TeacherMessages.tsx
• Purpose: Teacher messaging interface
• Features:
  • Enhanced teacher messaging features
  • Student management
  • Message filtering
• Dependencies: Same as StudentMessages

​

ParentMessages.tsx

• Location: src/components/ParentMessages.tsx
• Purpose: Parent messaging interface
• Features:
  • Parent-specific messaging features
  • Child progress communication
  • Teacher communication
• Dependencies: Same as StudentMessages

​

5. Video Conferencing Components

​

HMSVideoRoom.tsx

• Location: src/components/HMSVideoRoom.tsx
• Purpose: 100ms video conferencing integration
• Features:
  • Video/audio controls
  • Screen sharing
  • Participant management
  • Chat integration
  • Recording functionality
• Props:
  • roomId: string
  • token: string
  • onLeave: () => void
• Dependencies:
  • 100ms React SDK
  • HMS token generation API

​

VideoRoom.tsx

• Location: src/components/VideoRoom.tsx
• Purpose: Alternative video room implementation
• Features: Basic video conferencing functionality
• Dependencies: WebRTC APIs

​

6. Assessment Components

​

PDFGradingModal.tsx

• Location: src/components/PDFGradingModal.tsx
• Purpose: Modal for grading PDF assignments
• Features:
  • PDF viewer integration
  • Annotation tools
  • Grade input
  • Feedback system
• Props:
  • isOpen: boolean
  • submission: any
  • onClose: () => void
  • onGrade: (grade: number, feedback: string) => void
• Dependencies:
  • PDF.js for PDF rendering
  • Supabase for data persistence

​

FormioQuizBuilder.tsx

• Location: src/components/FormioQuizBuilder.tsx
• Purpose: Quiz builder using Formio
• Features:
  • Drag-and-drop quiz creation
  • Multiple question types
  • Preview functionality
  • Form validation
• Dependencies:
  • Formio React library
  • Supabase for storage

​

7. File Management Components

​

EditableImage.tsx

• Location: src/components/EditableImage.tsx
• Purpose: Editable image component for content management
• Features:
  • Image upload and editing
  • Admin-only editing capabilities
  • Image optimization
  • Fallback handling
• Props:
  • src: string
  • alt: string
  • className?: string
  • editable?: boolean
• Dependencies:
  • Cloudinary for image processing
  • AdminContext for permissions

​

UploadMarkSchemeModal.tsx

• Location: src/components/UploadMarkSchemeModal.tsx
• Purpose: Modal for uploading teacher mark schemes
• Features:
  • File upload interface
  • Metadata input
  • Validation
  • Progress tracking
• Props:
  • isOpen: boolean
  • onClose: () => void
  • onUpload: (file: File, metadata: any) => void

​

8. UI/UX Components

​

FilterTabs.tsx

• Location: src/components/FilterTabs.tsx
• Purpose: Reusable filter tab component
• Features:
  • Tab navigation
  • Active state management
  • Responsive design
• Props:
  • tabs: Array<{id: string, label: string}>
  • activeTab: string
  • onTabChange: (tabId: string) => void

​

TeamMemberCard.tsx

• Location: src/components/TeamMemberCard.tsx
• Purpose: Display card for team members
• Features:
  • Profile image display
  • Contact information
  • Social media links
• Props:
  • member: TeamMember
• Type Definition:
  Copy

  interface TeamMember {
    id: string;
    name: string;
    role: string;
    image: string;
    bio: string;
    socialLinks: Record<string, string>;
  }
  

​

CartIcon.tsx

• Location: src/components/CartIcon.tsx
• Purpose: Shopping cart icon with item count
• Features:
  • Cart item count display
  • Click handler for cart modal
  • Badge notification
• Dependencies:
  • CartContext for cart state
  • React Icons

​

AdminToggle.tsx

• Location: src/components/AdminToggle.tsx
• Purpose: Admin mode toggle component
• Features:
  • Admin mode indicator
  • Toggle functionality
  • Visual feedback
• Dependencies:
  • AdminContext for admin state

​

UpdateNotification.tsx

• Location: src/components/UpdateNotification.tsx
• Purpose: App update notification component
• Features:
  • Version checking
  • Update prompt modal
  • User action options (refresh, later, dismiss)
• Props:
  • onRefresh: () => void
• Dependencies:
  • Update detection utility

​

9. Content Management Components

​

EditableContent.tsx

• Location: src/components/EditableContent.tsx
• Purpose: Editable content component for CMS
• Features:
  • Inline editing
  • Admin-only editing
  • Auto-save functionality
  • Rich text support
• Props:
  • contentKey: string
  • defaultValue: string
  • className?: string
• Dependencies:
  • PageContentContext
  • AdminContext

​

EditablePageWrapper.tsx

• Location: src/components/EditablePageWrapper.tsx
• Purpose: Wrapper for editable pages
• Features:
  • Page-level content management
  • Admin editing capabilities
  • Content initialization
• Props:
  • page: string
  • children: React.ReactNode

​

BlogContent.tsx

• Location: src/components/BlogContent.tsx
• Purpose: Blog content display component
• Features:
  • Rich text rendering
  • Image optimization
  • SEO optimization
  • Social sharing
• Props:
  • content: string
  • title: string
  • author: string
  • publishedAt: string

​

10. Policy Components

​

BookingPolicy.tsx

• Location: src/components/BookingPolicy.tsx
• Purpose: Booking policy display component
• Features:
  • Policy content display
  • Legal compliance
  • User-friendly formatting
• Dependencies: Static content

​

RefundPolicy.tsx

• Location: src/components/RefundPolicy.tsx
• Purpose: Refund policy display component
• Features:
  • Policy terms display
  • Legal compliance
  • Contact information
• Dependencies: Static content

​

Terms.tsx

• Location: src/components/Terms.tsx
• Purpose: Terms of service display component
• Features:
  • Legal terms display
  • User agreement
  • Version tracking
• Dependencies: Static content

​

Privacy.tsx

• Location: src/components/Privacy.tsx
• Purpose: Privacy policy display component
• Features:
  • Privacy policy content
  • Data handling information
  • User rights
• Dependencies: Static content

​

TeacherTerms.tsx

• Location: src/components/TeacherTerms.tsx
• Purpose: Teacher-specific terms and conditions
• Features:
  • Teacher agreement terms
  • Platform usage guidelines
  • Payment terms
• Dependencies: Static content

​

11. FAQ Components

​

StudentFAQ.tsx

• Location: src/components/StudentFAQ.tsx
• Purpose: Student frequently asked questions
• Features:
  • Expandable FAQ items
  • Search functionality
  • Category filtering
• Dependencies: Static FAQ data

​

TeacherFAQ.tsx

• Location: src/components/TeacherFAQ.tsx
• Purpose: Teacher frequently asked questions
• Features:
  • Teacher-specific FAQ content
  • Platform usage guidance
  • Support information
• Dependencies: Static FAQ data

​

12. Modal Components

​

PrivateClassRequestModal.tsx

• Location: src/components/PrivateClassRequestModal.tsx
• Purpose: Modal for requesting private classes
• Features:
  • Request form
  • Schedule selection
  • Teacher preferences
  • Validation
• Props:
  • isOpen: boolean
  • onClose: () => void
  • onSubmit: (request: any) => void

​

AddWorkExperienceModal.tsx

• Location: src/components/AddWorkExperienceModal.tsx
• Purpose: Modal for adding work experience
• Features:
  • Work experience form
  • Date range selection
  • Validation
  • File upload for certificates
• Props:
  • isOpen: boolean
  • onClose: () => void
  • onAdd: (experience: any) => void

​

AddEducationHistoryModal.tsx

• Location: src/components/AddEducationHistoryModal.tsx
• Purpose: Modal for adding education history
• Features:
  • Education form
  • Institution selection
  • Degree information
  • Validation
• Props:
  • isOpen: boolean
  • onClose: () => void
  • onAdd: (education: any) => void

​

AddressCollection.tsx

• Location: src/components/AddressCollection.tsx
• Purpose: Address collection component
• Features:
  • Address form
  • Mapbox integration for autocomplete
  • Validation
  • Geolocation
• Props:
  • onAddressChange: (address: any) => void
  • defaultAddress?: any
• Dependencies:
  • Mapbox API
  • React Hook Form

​

13. Utility Components

​

Mochi.tsx

• Location: src/components/Mochi.tsx
• Purpose: AI assistant integration component
• Features:
  • AI chat interface
  • Context-aware responses
  • Integration with Mochi service
• Dependencies:
  • Mochi service
  • WebSocket for real-time communication

​

Component Patterns

​

1. Higher-Order Components (HOCs)

• Route Protection: Components that wrap protected routes
• Authentication: Components that require authentication
• Role-based Access: Components that check user roles

​

2. Render Props Pattern

• Used in components that need to share state or logic
• Particularly useful for data fetching components

​

3. Compound Components

• Used in complex UI components like modals and forms
• Allows for flexible composition of related components

​

4. Context Pattern

• Used extensively for state management
• Provides global state access without prop drilling

​

Component Best Practices

​

1. Props Interface

• All components have well-defined TypeScript interfaces
• Props are documented with JSDoc comments
• Default props are used where appropriate

​

2. Error Handling

• Components include error boundaries where needed
• Graceful fallbacks for failed operations
• User-friendly error messages

​

3. Performance Optimization

• React.memo for expensive components
• useMemo and useCallback for expensive calculations
• Lazy loading for large components

​

4. Accessibility

• ARIA labels and roles
• Keyboard navigation support
• Screen reader compatibility
• Color contrast compliance

​

5. Responsive Design

• Mobile-first approach
• Breakpoint-based styling
• Touch-friendly interfaces
• Flexible layouts

​

Component Testing

​

Testing Strategy

• Unit tests for individual components
• Integration tests for component interactions
• Visual regression tests for UI components
• Accessibility tests for compliance

​

Testing Tools

• Jest for unit testing
• React Testing Library for component testing
• Cypress for end-to-end testing
• Storybook for component documentation

​

Component Documentation

​

Documentation Standards

• Each component has comprehensive JSDoc comments
• Props are documented with types and descriptions
• Usage examples are provided
• Dependencies are clearly listed

​

Code Examples

/**
 * MainNavbar component provides the primary navigation interface
 * @component
 * @example
 * <MainNavbar />
 */
interface MainNavbarProps {
  // Props interface if needed
}

export const MainNavbar: React.FC<MainNavbarProps> = (props) => {
  // Component implementation
};

​

Future Component Enhancements

​

Planned Improvements

• Component library standardization
• Advanced animation components
• Enhanced form components
• Improved accessibility features
• Better mobile optimization
• Component composition patterns
• Advanced state management
• Performance monitoring integration