https://github.com/mohamedshanty/e-learning
A modern online learning system built with React and Material UI. Features Firebase authentication, Firestore database for course content, and YouTube API integration for video lectures. Students can track progress, save resources, and access educational materials in a responsive interface.
https://github.com/mohamedshanty/e-learning
api html html5 javascript javascript-framework mui mui-material react react-components react-hooks react-router reactjs
Last synced: about 1 month ago
JSON representation
A modern online learning system built with React and Material UI. Features Firebase authentication, Firestore database for course content, and YouTube API integration for video lectures. Students can track progress, save resources, and access educational materials in a responsive interface.
- Host: GitHub
- URL: https://github.com/mohamedshanty/e-learning
- Owner: mohamedshanty
- Created: 2025-06-19T06:53:54.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2026-01-17T08:49:56.000Z (5 months ago)
- Last Synced: 2026-01-17T19:34:22.285Z (5 months ago)
- Topics: api, html, html5, javascript, javascript-framework, mui, mui-material, react, react-components, react-hooks, react-router, reactjs
- Language: JavaScript
- Homepage: https://e-learning-9fecf.web.app
- Size: 18.4 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎓 E-Learning Platform
A modern and responsive **E-Learning Platform** that allows students to enroll in courses, watch video lectures, track learning progress, and access educational resources — all in one place.
Built with **React**, **Material UI**, **Firebase**, and **YouTube API**.
---
## 🚀 Features
### 👨🎓 Student Features
- Sign Up / Sign In / Forgot Password
- Complete & Edit Profile
- Upload profile image
- Select educational level and topics
- Enroll in courses
- Watch YouTube playlists inside the platform
- Track video & course progress
- Mark videos as completed
- Save videos to Watch Later
- Read blogs and useful resources
- Responsive and user-friendly interface
---
### 🧑💼 Admin Features
- Access Admin Dashboard
- View platform statistics
- Manage courses (Add / Edit / Delete)
- Manage blogs (Add / Edit / Delete)
- Manage resources (Add / Edit / Delete)
- View users data
---
### 👑 Super Admin Features
- All Admin permissions
- Manage user roles (Student / Admin)
---
## 🧩 System Roles
| Role | Permissions |
| ----------- | ----------------------------- |
| Student | Learning & profile management |
| Admin | Content & users management |
| Super Admin | Full system control |
---
## 🛠 Tech Stack
- **Frontend:** React
- **UI Library:** Material UI
- **Authentication:** Firebase Authentication
- **Database:** Firestore
- **Video Integration:** YouTube API
- **Image Upload:** Cloudinary
- **Hosting:** Firebase Hosting
---
## 📂 Main Pages
- Home
- Authentication (Sign Up / Sign In)
- Complete Profile
- My Courses
- Course Player
- Watch Later
- Blogs
- Blog Details
- Resources
- Profile
- Admin Dashboard
---
## 📊 Admin Dashboard
- Overview statistics (Users, Courses, Blogs)
- Users management (Role control for Super Admin)
- Courses management
- Blogs management
- Resources management
---
## 🔐 Security
- Firebase Authentication
- Role-based access control
- Secure Firestore rules
---
## 📱 Responsive Design
- Fully responsive layout
- Optimized for desktop, tablet, and mobile devices
---
## 📌 Future Enhancements
- Certificates after course completion
- Notifications system
- Advanced analytics dashboard
- Offline learning support
---
## 🧑💻 Author
**Mohammad Nidal Salem**
Computer Engineering Student – Al-Azhar University (Gaza)
Frontend Developer (React)
---
## 📄 License
This project is for educational purposes.