Visit out site now! https://the-jar-team.github.io/focus-flow-client/
FocusFlow is a web-based platform designed to turn passive video lectures into an interactive, personalized learning experience. Using real-time AI-driven engagement detection, quizzes, and analytics, FocusFlow ensures that learners stay on track and educators receive actionable feedback.
- Interactive Video Player: Advanced video player with AI-powered engagement features
- Real-time Quizzes: Pop-up quizzes during video playback to maintain engagement
- Summary Timeline: Visual timeline showing key moments and engagement points
- Playlist Management: Organize videos into custom playlists
- User Dashboard: Comprehensive dashboard showing your videos and playlists
- Analytics: Track learning progress and engagement metrics
- Guest Access: Try the platform without registration
Login Options:
- Regular Login: Create an account and sign in with your credentials
- Guest Access: Click "Continue as Guest" to try the platform without registration
After logging in, you'll see your personal dashboard with:
- My Videos: Videos you've uploaded
- My Playlists: Your custom playlists
- Other Videos: Public videos from other users
- Other Playlists: Public playlists you can explore
To upload a new video:
- Click the "Add Video" button on your dashboard
- Fill in the video details:
- Title: Give your video a descriptive name
- Description: Add details about the video content
- Video Link: Any link from youtube or his id
- Click "Upload" to process and add your video
Supported Features:
- choose to which playlist to add
- add youtube video link
- Automatic processing and optimization
FocusFlow's advanced video player includes several interactive features:
- Automatic Quizzes: AI-generated quizzes appear at strategic moments during video playback
- Engagement Detection: Quizzes are triggered based on content analysis and engagement patterns
- Instant Feedback: Get immediate results and explanations for quiz answers
- Progress Tracking: Quiz performance is tracked for analytics
- Visual Timeline: See a visual representation of the video content below the player
- Key Moments: Important sections are highlighted on the timeline
- Quick Navigation: Click on timeline segments to jump to specific moments
- Progress Indicators: Track your viewing progress and completion status
Creating Playlists:
- Navigate to the playlist section
- Click "Create New Playlist"
- Add title, description, and privacy settings
- Add videos by searching or selecting from your library
Managing Playlists:
- Add or remove videos anytime
- Share public playlists with others
- Track playlist completion progress
Monitor your learning progress with:
- Engagement Metrics: See how engaged you are during videos
- Quiz Performance: Track your quiz scores and improvement
- Viewing History: Review what you've watched and when
- Completion Rates: Monitor your progress through playlists and courses
- React: Modern JavaScript framework for building user interfaces
- Redux: State management for complex application data
- React Router: Navigation and routing
- CSS Modules: Styled components and responsive design
- Login/Register: User authentication system
- Dashboard: Main hub for content discovery
- VideoPlayer: Advanced player with AI integration
- AddVideo: Video upload and management
- Playlist: Playlist creation and management
- User Data: Managed through Redux userSlice
- Dashboard Data: Centralized dashboard state management
- Video State: Real-time video playback and interaction state
src/
├── components/ # React components
├── services/ # API and external services
├── redux/ # Redux store and slices
├── styles/ # CSS and styling files
└── utils/ # Utility functions
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
For support or questions about FocusFlow, please contact our development team or create an issue in the repository.
Transform your learning experience with FocusFlow - Where passive viewing becomes active learning.