Frontend Pages Documentation
This document provides comprehensive documentation for every page component in the STO Education Platform.Page Architecture Overview
The application follows a page-based routing architecture with React Router v6, where each page is a top-level component that represents a specific route in the application.Page Categories
1. Public Pages
HomePage.tsx
- Location:
src/pages/HomePage.tsx - Route:
/ - Purpose: Landing page and main entry point
- Features:
- Hero section with call-to-action
- Feature highlights
- Course showcase
- Teacher testimonials
- Statistics display
- Newsletter signup
- SEO: Optimized with meta tags and structured data
- Dependencies:
- MainNavbar component
- Supabase for dynamic content
- React Helmet for SEO
AboutUs.tsx / AboutUsPage.tsx
- Location:
src/pages/AboutUs.tsxandsrc/pages/AboutUsPage.tsx - Route:
/about - Purpose: Company information and team showcase
- Features:
- Company story and mission
- Team member profiles
- Company values and vision
- Contact information
- Editable content via PageContentContext
- Dependencies:
- MainNavbar
- EditablePageWrapper
- TeamMemberCard components
FounderPage.tsx
- Location:
src/pages/FounderPage.tsx - Route:
/founder - Purpose: Founder biography and story
- Features:
- Founder profile and background
- Company founding story
- Vision and mission statement
- Personal achievements
- Dependencies: MainNavbar
OurTeachersPage.tsx (TeamSection)
- Location:
src/pages/OurTeachersPage.tsx - Route:
/teachers - Purpose: Teacher directory and profiles
- Features:
- Teacher grid display
- Teacher profiles and specialties
- Filtering and search
- Rating and review display
- Dependencies:
- MainNavbar
- Teacher profile components
TeacherDetailsPage.tsx
- Location:
src/pages/TeacherDetailsPage.tsx - Route:
/teachers/:teacherId - Purpose: Individual teacher profile page
- Features:
- Detailed teacher information
- Course listings
- Reviews and ratings
- Contact and booking options
- Teaching specialties
- Dependencies:
- MainNavbar
- Teacher profile components
- Course components
2. Course Pages
CoursesPage.tsx
- Location:
src/pages/CoursesPage.tsx - Route:
/courses - Purpose: Course catalog and listing
- Features:
- Course grid display
- Filtering by subject, level, price
- Search functionality
- Course categories
- Enrollment status
- Dependencies:
- MainNavbar (for public access)
- DashboardLayout (for dashboard access)
- Course components
CourseDetailsPage.tsx
- Location:
src/pages/CourseDetailsPage.tsx - Route:
/courses/:id - Purpose: Individual course details and enrollment
- Features:
- Course description and curriculum
- Instructor information
- Pricing and enrollment
- Course materials preview
- Student reviews
- Related courses
- Dependencies:
- MainNavbar
- Course detail components
- Payment integration
StudentCourseDetails.tsx
- Location:
src/pages/StudentCourseDetails.tsx - Route:
/dashboard/courses/:courseId - Purpose: Student’s enrolled course view
- Features:
- Course progress tracking
- Lesson materials access
- Assignment submissions
- Live session access
- Grade tracking
- Dependencies:
- DashboardLayout
- Course progress components
MyCourses.tsx
- Location:
src/pages/MyCourses.tsx - Route:
/dashboard/my-courses - Purpose: Student’s enrolled courses overview
- Features:
- Course list with progress
- Quick access to lessons
- Upcoming sessions
- Course completion tracking
- Dependencies:
- DashboardLayout
- Course card components
3. Authentication Pages
ResetPassword.tsx
- Location:
src/pages/ResetPassword.tsx - Route:
/reset-password - Purpose: Password reset functionality
- Features:
- Password reset form
- Email validation
- Security token verification
- Success/error feedback
- Dependencies:
- Supabase Auth
- Form validation components
AccountInactivePage.tsx
- Location:
src/pages/AccountInactivePage.tsx - Route: Protected route redirect
- Purpose: Inactive account handling
- Features:
- Account status information
- Reactivation options
- Contact support
- Account deletion option
- Dependencies: Supabase Auth
4. Student Dashboard Pages
DashboardHome.tsx
- Location:
src/pages/DashboardHome.tsx - Route:
/dashboard - Purpose: Student dashboard overview
- Features:
- Dashboard summary
- Recent activity
- Upcoming sessions
- Course progress overview
- Quick actions
- Dependencies:
- DashboardLayout
- Dashboard components
StudentProfilePage.tsx
- Location:
src/pages/StudentProfilePage.tsx - Route:
/dashboard/profile - Purpose: Student profile management
- Features:
- Profile information editing
- Avatar upload
- Contact information
- Preferences settings
- Privacy settings
- Dependencies:
- DashboardLayout
- Profile form components
StudentSchedulePage.tsx
- Location:
src/pages/StudentSchedulePage.tsx - Route:
/dashboard/schedule - Purpose: Student’s class schedule
- Features:
- Calendar view of sessions
- Upcoming classes
- Session details
- Join session functionality
- Dependencies:
- DashboardLayout
- Calendar components
StudentLiveSessionsPage.tsx
- Location:
src/pages/StudentLiveSessionsPage.tsx - Route:
/dashboard/live-sessions - Purpose: Live session management
- Features:
- Active sessions list
- Join session functionality
- Session history
- Recording access
- Dependencies:
- DashboardLayout
- Video room components
StudentAnnouncementsPage.tsx
- Location:
src/pages/StudentAnnouncementsPage.tsx - Route:
/dashboard/announcements - Purpose: Student announcements
- Features:
- Announcement list
- Read/unread status
- Important announcements
- Filtering options
- Dependencies:
- DashboardLayout
- Announcement components
StudentGrades.tsx
- Location:
src/pages/StudentGrades.tsx - Route:
/dashboard/grades - Purpose: Student grade tracking
- Features:
- Grade overview
- Assignment grades
- Quiz scores
- Progress tracking
- Grade history
- Dependencies:
- DashboardLayout
- Grade components
StudentDetails.tsx
- Location:
src/pages/StudentDetails.tsx - Route:
/dashboard/student/:studentId - Purpose: Individual student details (for parents)
- Features:
- Student information
- Academic progress
- Attendance tracking
- Parent communication
- Dependencies:
- DashboardLayout
- Student profile components
StudentQuizPage.tsx
- Location:
src/pages/StudentQuizPage.tsx - Route:
/dashboard/quiz/:quizIdand/quiz/:quizId - Purpose: Quiz taking interface
- Features:
- Quiz questions display
- Answer submission
- Timer functionality
- Progress tracking
- Result display
- Dependencies:
- DashboardLayout (for dashboard route)
- Quiz components
5. Teacher Dashboard Pages
TeacherDashboard.tsx
- Location:
src/pages/TeacherDashboard.tsx - Route:
/teacher - Purpose: Teacher dashboard overview
- Features:
- Teaching statistics
- Recent activity
- Upcoming sessions
- Student notifications
- Quick actions
- Dependencies:
- TeacherDashboardLayout
- Dashboard components
TeacherProfilePage.tsx
- Location:
src/pages/TeacherProfilePage.tsx - Route:
/teacher/profile - Purpose: Teacher profile management
- Features:
- Profile information editing
- Professional photo upload
- Bio and specialties
- Availability settings
- Verification status
- Dependencies:
- TeacherDashboardLayout
- Profile form components
TeachingInformationPage.tsx
- Location:
src/pages/TeachingInformationPage.tsx - Route:
/teacher/teaching-info - Purpose: Teaching information setup
- Features:
- Teaching philosophy
- Subject expertise
- Teaching methods
- Experience details
- Certification information
- Dependencies:
- TeacherDashboardLayout
- Form components
WorkExperiencePage.tsx
- Location:
src/pages/WorkExperiencePage.tsx - Route:
/teacher/work-experience - Purpose: Work experience management
- Features:
- Work history display
- Experience addition/editing
- Company information
- Role descriptions
- Date management
- Dependencies:
- TeacherDashboardLayout
- Work experience components
EducationHistoryPage.tsx
- Location:
src/pages/EducationHistoryPage.tsx - Route:
/teacher/education - Purpose: Education history management
- Features:
- Educational background
- Degree information
- Institution details
- Certification display
- Document uploads
- Dependencies:
- TeacherDashboardLayout
- Education components
TeacherSubjectsPage.tsx
- Location:
src/pages/TeacherSubjectsPage.tsx - Route:
/teacher/subjects - Purpose: Subject expertise management
- Features:
- Subject selection
- Expertise levels
- Teaching preferences
- Availability by subject
- Rate settings
- Dependencies:
- TeacherDashboardLayout
- Subject components
TeacherSchedulePage.tsx
- Location:
src/pages/TeacherSchedulePage.tsx - Route:
/teacher/schedule - Purpose: Teacher schedule management
- Features:
- Calendar interface
- Availability settings
- Session scheduling
- Time zone management
- Recurring sessions
- Dependencies:
- TeacherDashboardLayout
- Calendar components
TeacherStudentsPage.tsx
- Location:
src/pages/TeacherStudentsPage.tsx - Route:
/teacher/my-students - Purpose: Student management interface
- Features:
- Student list
- Progress tracking
- Communication tools
- Grade management
- Attendance tracking
- Dependencies:
- TeacherDashboardLayout
- Student management components
TeacherAssignmentsPage.tsx
- Location:
src/pages/TeacherAssignmentsPage.tsx - Route:
/teacher/assignments - Purpose: Assignment management
- Features:
- Assignment creation
- Assignment list
- Due date management
- Submission tracking
- Grading interface
- Dependencies:
- TeacherDashboardLayout
- Assignment components
TeacherAssignmentSubmissionsPage.tsx
- Location:
src/pages/TeacherAssignmentSubmissionsPage.tsx - Route:
/teacher/assignments/:assignmentId/submissions - Purpose: Assignment submissions review
- Features:
- Submission list
- File download
- Grading interface
- Feedback system
- Grade submission
- Dependencies:
- TeacherDashboardLayout
- Submission components
TeacherAssignmentDetailPage.tsx
- Location:
src/pages/TeacherAssignmentDetailPage.tsx - Route:
/teacher/assignments/:assignmentId - Purpose: Individual assignment details
- Features:
- Assignment information
- Submission statistics
- Grading progress
- Student feedback
- Dependencies:
- TeacherDashboardLayout
- Assignment detail components
PDFGradingPage.tsx
- Location:
src/pages/PDFGradingPage.tsx - Route:
/teacher/grade-submission/:submissionId - Purpose: PDF assignment grading
- Features:
- PDF viewer
- Annotation tools
- Grade input
- Feedback system
- Grade submission
- Dependencies:
- TeacherDashboardLayout
- PDF grading components
TeacherCourseMaterialsPage.tsx
- Location:
src/pages/TeacherCourseMaterialsPage.tsx - Route:
/teacher/materials - Purpose: Course materials management
- Features:
- Material upload
- File organization
- Access control
- Version management
- Dependencies:
- TeacherDashboardLayout
- File management components
TeacherLiveSessionsPage.tsx
- Location:
src/pages/TeacherLiveSessionsPage.tsx - Route:
/teacher/live-sessions - Purpose: Live session management
- Features:
- Session creation
- Active sessions
- Session history
- Recording management
- Student management
- Dependencies:
- TeacherDashboardLayout
- Video session components
TeacherAnnouncementsPage.tsx
- Location:
src/pages/TeacherAnnouncementsPage.tsx - Route:
/teacher/announcements - Purpose: Announcement management
- Features:
- Announcement creation
- Announcement list
- Target audience selection
- Priority settings
- Delivery tracking
- Dependencies:
- TeacherDashboardLayout
- Announcement components
TeacherReviewsPage.tsx
- Location:
src/pages/TeacherReviewsPage.tsx - Route:
/teacher/votes - Purpose: Teacher reviews and ratings
- Features:
- Review display
- Rating statistics
- Student feedback
- Response system
- Review filtering
- Dependencies:
- TeacherDashboardLayout
- Review components
TeacherFileManagerPage.tsx
- Location:
src/pages/TeacherFileManagerPage.tsx - Route:
/teacher/files - Purpose: File management system
- Features:
- File upload/download
- File organization
- Access permissions
- Version control
- Storage management
- Dependencies:
- TeacherDashboardLayout
- File manager components
TeacherPastPapers.tsx
- Location:
src/pages/TeacherPastPapers.tsx - Route:
/teacher/past-papers - Purpose: Past paper management
- Features:
- Paper upload
- Paper organization
- Access control
- Version management
- Dependencies:
- TeacherDashboardLayout
- Paper management components
TeacherMarkSchemesPage.tsx
- Location:
src/pages/TeacherMarkSchemesPage.tsx - Route:
/teacher/mark-schemes - Purpose: Mark scheme management
- Features:
- Mark scheme creation
- Scheme organization
- Pricing management
- Access control
- Sales tracking
- Dependencies:
- TeacherDashboardLayout
- Mark scheme components
6. Quiz System Pages
TeacherQuizzesPage.tsx
- Location:
src/pages/TeacherQuizzesPage.tsx - Route:
/teacher/quizzes - Purpose: Quiz management overview
- Features:
- Quiz list
- Quiz statistics
- Quick actions
- Filtering options
- Dependencies:
- TeacherDashboardLayout
- Quiz components
TeacherCreateQuizPage.tsx
- Location:
src/pages/TeacherCreateQuizPage.tsx - Route:
/teacher/quizzes/create - Purpose: Quiz creation interface
- Features:
- Quiz builder
- Question types
- Answer options
- Timer settings
- Preview functionality
- Dependencies:
- TeacherDashboardLayout
- Quiz builder components
TeacherQuizViewPage.tsx
- Location:
src/pages/TeacherQuizViewPage.tsx - Route:
/teacher/quizzes/:quizId - Purpose: Quiz details and management
- Features:
- Quiz information
- Student responses
- Statistics
- Editing options
- Dependencies:
- TeacherDashboardLayout
- Quiz detail components
TeacherQuizEditPage.tsx
- Location:
src/pages/TeacherQuizEditPage.tsx - Route:
/teacher/quizzes/:quizId/edit - Purpose: Quiz editing interface
- Features:
- Quiz modification
- Question editing
- Settings update
- Preview changes
- Dependencies:
- TeacherDashboardLayout
- Quiz editor components
7. Training System Pages
TrainingDashboard.tsx
- Location:
src/pages/training/TrainingDashboard.tsx - Route:
/training - Purpose: Training dashboard overview
- Features:
- Training progress
- Available courses
- Certifications
- Upcoming sessions
- Dependencies:
- Training layout components
TrainingCourses.tsx
- Location:
src/pages/training/TrainingCourses.tsx - Route:
/training/book - Purpose: Training course catalog
- Features:
- Course listings
- Course details
- Enrollment options
- Prerequisites
- Dependencies:
- Training layout components
TrainingCourseDetails.tsx
- Location:
src/pages/training/TrainingCourseDetails.tsx - Route:
/training/book/:courseId - Purpose: Training course details
- Features:
- Course curriculum
- Instructor information
- Enrollment process
- Requirements
- Dependencies:
- Training layout components
MyTraining.tsx
- Location:
src/pages/training/MyTraining.tsx - Route:
/training/my - Purpose: Enrolled training courses
- Features:
- Enrolled courses
- Progress tracking
- Access to materials
- Completion status
- Dependencies:
- Training layout components
TrainingLiveSession.tsx
- Location:
src/pages/training/TrainingLiveSession.tsx - Route:
/training/live/:courseId - Purpose: Training live session
- Features:
- Live training session
- Video conferencing
- Interactive learning
- Recording access
- Dependencies:
- Training layout components
- Video components
Certificates.tsx
- Location:
src/pages/training/Certificates.tsx - Route:
/training/certificates - Purpose: Training certificates
- Features:
- Certificate display
- Download options
- Verification
- Achievement tracking
- Dependencies:
- Training layout components
TeacherCreateTrainingCourse.tsx
- Location:
src/pages/TeacherCreateTrainingCourse.tsx - Route:
/teacher/training-courses/create - Purpose: Training course creation
- Features:
- Course creation form
- Curriculum setup
- Pricing options
- Schedule management
- Dependencies:
- TeacherDashboardLayout
- Course creation components
TeacherTrainingCourses.tsx
- Location:
src/pages/TeacherTrainingCourses.tsx - Route:
/teacher/training-courses - Purpose: Teacher training course management
- Features:
- Course list
- Enrollment statistics
- Revenue tracking
- Course management
- Dependencies:
- TeacherDashboardLayout
- Training course components
TeacherEditTrainingCourse.tsx
- Location:
src/pages/TeacherEditTrainingCourse.tsx - Route:
/teacher/training-courses/:courseId/edit - Purpose: Training course editing
- Features:
- Course modification
- Content updates
- Settings changes
- Preview options
- Dependencies:
- TeacherDashboardLayout
- Course editor components
8. Exam Papers Pages
ExamCategories.tsx
- Location:
src/pages/ExamCategories.tsx - Route:
/exam-papers - Purpose: Exam paper categories
- Features:
- Category selection
- Exam board options
- Subject filtering
- Navigation to specific papers
- Dependencies:
- MainNavbar
- Category components
ExamPapers.tsx
- Location:
src/pages/ExamPapers.tsx - Route:
/exam-papers/british - Purpose: British exam papers
- Features:
- Paper listings
- Year and season filtering
- Download options
- Mark scheme access
- Dependencies:
- MainNavbar
- Paper components
SATExamPapers.tsx
- Location:
src/pages/SATExamPapers.tsx - Route:
/exam-papers/sat - Purpose: SAT exam papers
- Features:
- SAT paper listings
- Subject filtering
- Practice tests
- Answer keys
- Dependencies:
- MainNavbar
- SAT paper components
EdexcelExamPapers.tsx
- Location:
src/pages/EdexcelExamPapers.tsx - Route:
/exam-papers/edexcel - Purpose: Edexcel exam papers
- Features:
- Edexcel paper listings
- Level filtering
- Mark schemes
- Grade boundaries
- Dependencies:
- MainNavbar
- Edexcel paper components
PearsonExamPapers.tsx
- Location:
src/pages/PearsonExamPapers.tsx - Route:
/exam-papers/pearson - Purpose: Pearson exam papers
- Features:
- Pearson paper listings
- Subject organization
- Past papers
- Mark schemes
- Dependencies:
- MainNavbar
- Pearson paper components
SubjectPapers.tsx
- Location:
src/pages/SubjectPapers.tsx - Route:
/subject/:subjectSlug - Purpose: Subject-specific papers
- Features:
- Subject paper listings
- Year filtering
- Difficulty levels
- Download options
- Dependencies:
- MainNavbar
- Subject paper components
9. Payment Pages
PaymentPage.tsx
- Location:
src/pages/PaymentPage.tsx - Route:
/payment/:courseId - Purpose: Course payment processing
- Features:
- Payment form
- Payment method selection
- Billing information
- Payment processing
- Dependencies:
- MainNavbar
- Payment components
- PayMob integration
PaymentComplete.tsx
- Location:
src/pages/PaymentComplete.tsx - Route:
/dashboard/payment-complete - Purpose: Payment confirmation
- Features:
- Payment confirmation
- Receipt display
- Course access
- Next steps
- Dependencies:
- Payment confirmation components
CheckoutPage.tsx
- Location:
src/pages/CheckoutPage.tsx - Route:
/checkout - Purpose: Shopping cart checkout
- Features:
- Cart review
- Payment processing
- Order confirmation
- Receipt generation
- Dependencies:
- Cart components
- Payment integration
MyOrders.tsx
- Location:
src/pages/MyOrders.tsx - Route:
/dashboard/orders - Purpose: Order history and management
- Features:
- Order list
- Order details
- Download receipts
- Order status tracking
- Dependencies:
- DashboardLayout
- Order components
10. Communication Pages
ChatPage.tsx
- Location:
src/pages/ChatPage.tsx - Route:
/dashboard/chat,/teacher/chat,/training/chat - Purpose: Real-time chat interface
- Features:
- Real-time messaging
- File sharing
- Group chats
- Message history
- Notification management
- Dependencies:
- SendBird integration
- Chat components
LinkedUsersPage.tsx
- Location:
src/pages/LinkedUsersPage.tsx - Route:
/dashboard/linked-users - Purpose: Linked user management
- Features:
- User connections
- Relationship management
- Communication tools
- Access control
- Dependencies:
- DashboardLayout
- User management components
11. Blog Pages
Blog.tsx
- Location:
src/pages/Blog.tsx - Route:
/blog - Purpose: Blog listing page
- Features:
- Blog post grid
- Category filtering
- Search functionality
- Pagination
- Featured posts
- Dependencies:
- MainNavbar
- EditablePageWrapper
- Blog components
BlogPostDetail.tsx
- Location:
src/pages/BlogPostDetail.tsx - Route:
/blog/:slug - Purpose: Individual blog post
- Features:
- Blog post content
- Author information
- Related posts
- Social sharing
- Comments system
- Dependencies:
- MainNavbar
- Blog content components
12. Utility Pages
AppDownload.tsx
- Location:
src/pages/AppDownload.tsx - Route:
/download-app - Purpose: Mobile app download
- Features:
- App store links
- QR codes
- App features
- Download instructions
- Dependencies: App download components
ApplyForUniversity.tsx
- Location:
src/pages/ApplyForUniversity.tsx - Route:
/dashboard/apply-university - Purpose: University application assistance
- Features:
- Application guidance
- University listings
- Application tracking
- Document management
- Dependencies:
- DashboardLayout
- University application components
BugReportPage.tsx
- Location:
src/pages/BugReportPage.tsx - Route:
/bug-report - Purpose: Bug reporting system
- Features:
- Bug report form
- Screenshot upload
- Priority selection
- Status tracking
- Dependencies:
- MainNavbar
- Bug report components
Page Patterns
1. Route Protection Patterns
- Public Routes: Accessible to all users
- Authenticated Routes: Require user login
- Role-based Routes: Require specific user roles
- Conditional Routes: Access based on user status
2. Layout Patterns
- MainNavbar Layout: For public pages
- DashboardLayout: For student/parent dashboard
- TeacherDashboardLayout: For teacher dashboard
- AdminLayout: For admin pages
- TrainingLayout: For training pages
3. Data Fetching Patterns
- Static Content: Pre-rendered content
- Dynamic Content: Fetched from Supabase
- Real-time Content: Live data updates
- Cached Content: Optimized data loading
4. SEO Patterns
- Meta Tags: Dynamic meta tag generation
- Structured Data: JSON-LD for search engines
- Sitemap Integration: Automatic sitemap generation
- Performance Optimization: Core Web Vitals optimization
Page Best Practices
1. Performance Optimization
- Code Splitting: Lazy loading of page components
- Image Optimization: WebP format and lazy loading
- Bundle Optimization: Tree shaking and minification
- Caching Strategy: Browser and CDN caching
2. Accessibility
- ARIA Labels: Proper labeling for screen readers
- Keyboard Navigation: Full keyboard accessibility
- Color Contrast: WCAG compliance
- Focus Management: Proper focus handling
3. SEO Optimization
- Meta Tags: Dynamic and relevant meta information
- URL Structure: Clean and descriptive URLs
- Content Structure: Proper heading hierarchy
- Internal Linking: Strategic internal link structure
4. Error Handling
- Error Boundaries: Page-level error handling
- Fallback UI: Graceful error states
- User Feedback: Clear error messages
- Recovery Options: Error recovery mechanisms
Page Testing Strategy
1. Unit Testing
- Component Testing: Individual page component tests
- Hook Testing: Custom hook testing
- Utility Testing: Page utility function tests
2. Integration Testing
- Route Testing: Navigation and routing tests
- Data Flow Testing: Data fetching and state management
- User Flow Testing: End-to-end user journeys
3. Visual Testing
- Screenshot Testing: Visual regression tests
- Responsive Testing: Cross-device compatibility
- Accessibility Testing: WCAG compliance tests
Page Documentation Standards
1. Code Documentation
- JSDoc Comments: Comprehensive function documentation
- Type Definitions: Clear TypeScript interfaces
- Usage Examples: Code usage examples
- Dependencies: Clear dependency documentation
2. User Documentation
- Page Purpose: Clear page purpose description
- Feature List: Comprehensive feature documentation
- User Flows: Step-by-step user journey documentation
- Troubleshooting: Common issues and solutions
Future Page Enhancements
1. Planned Features
- Progressive Web App: PWA capabilities
- Offline Support: Offline functionality
- Advanced Analytics: Enhanced user tracking
- Personalization: AI-powered content personalization
2. Performance Improvements
- Server-side Rendering: SSR implementation
- Advanced Caching: Multi-layer caching strategy
- CDN Optimization: Global content delivery
- Bundle Optimization: Advanced code splitting
3. User Experience Enhancements
- Advanced Search: AI-powered search functionality
- Recommendation Engine: Personalized content recommendations
- Social Features: Enhanced social interaction
- Gamification: Learning gamification elements