A comprehensive, modern Learning Management System
Built with React, Firebase, and Gemini AI. This open-source platform provides a complete solution for online education with role-based access control, AI-powered content generation, and real-time collaboration features.
Quick Start • Features • Demo • Deployment • Contributing
- Firebase Authentication with email/password
- Role-based access control (Student, Instructor, Admin)
- User profile management with customizable profiles
- Persistent login sessions with automatic token refresh
- Hierarchical course structure (Courses → Modules → Lessons)
- Multiple content types (Text, Video, PDF, Interactive)
- Course discovery with search and filtering
- Enrollment system with instant access
- Progress tracking with completion percentages
- Automated quiz generation from course content
- Learning objective creation based on course descriptions
- Content enhancement and expansion
- Course outline generation for instructors
- Interactive quiz builder with multiple question types
- Real-time scoring and immediate feedback
- Multiple attempt tracking with progress saving
- Detailed analytics for instructors
- Threaded comment system for each lesson
- Real-time updates using Firestore listeners
- Instructor response highlighting
- Moderation tools for content management
- Student progress dashboards with visual indicators
- Instructor analytics with enrollment and completion rates
- Admin platform overview with comprehensive statistics
- Achievement badges and milestone tracking
- Responsive design optimized for all devices
- Tailwind CSS with custom design system
- Dark/light mode support (coming soon)
- Accessibility compliant with ARIA labels and keyboard navigation
- Loading states and error boundaries throughout
- React 18+ with functional components and hooks
- Vite for fast development and building
- Tailwind CSS for styling and responsive design
- Lucide React for consistent iconography
- Firebase Firestore for real-time database
- Firebase Authentication for user management
- Firebase Storage for file uploads (ready for implementation)
- Google Gemini 2.0 Flash for content generation
- Custom AI prompts optimized for educational content
- ESLint for code quality
- PostCSS for CSS processing
- Autoprefixer for browser compatibility
- Node.js 16+ and npm
- Firebase project with Firestore and Authentication enabled
- Google AI Studio account for Gemini API access
-
Clone the repository
git clone https://github.com/Lucifer88484/LearnFlow.git cd LearnFlow -
Install dependencies
npm install
-
Configure environment variables
cp .env.example .env
Update
.envwith your actual Firebase and Gemini API credentials:VITE_FIREBASE_API_KEY=your_firebase_api_key VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com VITE_FIREBASE_PROJECT_ID=your_project_id VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id VITE_FIREBASE_APP_ID=your_app_id VITE_GEMINI_API_KEY=your_gemini_api_key
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
- Go to Firebase Console
- Create a new project
- Enable Authentication and Firestore Database
- In Firebase Console, go to Authentication → Sign-in method
- Enable Email/Password authentication
- Add your domain to authorized domains
- Create a Firestore database in production mode
- Update security rules (see
firestore.rulesin project)
- Go to Project Settings → General
- Scroll down to "Your apps" and click the web icon
- Copy the configuration object to your
.envfile
-
Get API Key
- Visit Google AI Studio
- Create a new API key
- Add it to your
.envfile asVITE_GEMINI_API_KEY
-
Configure Usage
- The app uses Gemini 2.0 Flash model for content generation
- Customize prompts in
src/services/gemini.js - Monitor usage in Google AI Studio dashboard
- Browse and enroll in courses
- Access course content and lessons
- Take quizzes and track progress
- Participate in discussions
- View personal dashboard with progress
- Create and manage courses
- Add lessons and course content
- Create quizzes with AI assistance
- Monitor student progress
- Respond to student discussions
- Access instructor analytics
- Manage all users and roles
- Oversee all courses and content
- Access platform-wide analytics
- Moderate discussions and content
- Configure platform settings
src/
├── components/ # Reusable UI components
│ ├── ui/ # Basic UI components (Button, Input, Card)
│ ├── auth/ # Authentication components
│ ├── layout/ # Layout components (Header, Sidebar)
│ ├── course/ # Course-related components
│ ├── quiz/ # Quiz and assessment components
│ └── discussion/ # Discussion and comment components
├── contexts/ # React Context providers
├── hooks/ # Custom React hooks
├── pages/ # Page components
├── services/ # External service integrations
├── utils/ # Utility functions
└── types/ # TypeScript type definitions (future)
npm run build# Install Firebase CLI
npm install -g firebase-tools
# Login to Firebase
firebase login
# Initialize hosting
firebase init hosting
# Deploy
firebase deploy# Install Vercel CLI
npm install -g vercel
# Deploy
vercel# Build the project
npm run build
# Deploy dist folder to NetlifyWe welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow ESLint configuration
- Use Prettier for code formatting
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
While LearnFlow is open source and free to use, we kindly request proper attribution for commercial deployments:
- ✅ Personal and educational use
- ✅ Internal company training systems
- ✅ Non-profit educational institutions
- ✅ Modification and redistribution
- ✅ Commercial use with proper attribution
- Include "Powered by LearnFlow" in your application footer or about page
- Link back to the original LearnFlow repository
- Maintain copyright notices in source code
- Consider contributing improvements back to the project
The "LearnFlow" name and logo are trademarks of Hrishikesh Mohite. For commercial use:
- Recommended: Use your own branding and logo
- Required: Obtain permission for LearnFlow trademark usage
- Contact: hrishikeshmohite001@gmail.com for commercial licensing
- Software provided "as is" without warranty
- Suitable for production but requires proper security auditing
- Authors not liable for damages or issues
- Third-party licenses must be maintained
- React Team for the amazing framework
- Firebase Team for the backend infrastructure
- Google AI for Gemini API access
- Tailwind CSS for the utility-first CSS framework
- Lucide for the beautiful icon set
- Documentation: Check this README and inline code comments
- Issues: Report bugs and request features via GitHub Issues
- Discussions: Join community discussions in GitHub Discussions
- Email: Contact the maintainer at hrishikeshmohite001@gmail.com
- Website: www.hrishikeshmohite.com
- GitHub: https://github.com/Lucifer88484
