https://github.com/mohammad-faysal-dev/e-courses-client
E-Courses Client is a modern web app for online learning, allowing users to browse courses, enroll, and track progress via interactive dashboards. Built with React and Vite, it is deployed on Firebase Hosting.
https://github.com/mohammad-faysal-dev/e-courses-client
expressjs firebase mongodb nodejs reactjs tailwindcss
Last synced: 3 months ago
JSON representation
E-Courses Client is a modern web app for online learning, allowing users to browse courses, enroll, and track progress via interactive dashboards. Built with React and Vite, it is deployed on Firebase Hosting.
- Host: GitHub
- URL: https://github.com/mohammad-faysal-dev/e-courses-client
- Owner: mohammad-faysal-dev
- Created: 2025-05-08T17:52:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-11-27T15:27:47.000Z (7 months ago)
- Last Synced: 2026-03-01T20:18:05.342Z (4 months ago)
- Topics: expressjs, firebase, mongodb, nodejs, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://fir-project-b7c55.web.app/
- Size: 31.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎓 E-Courses Client
[](https://reactjs.org/)
[](https://vitejs.dev/)
[](https://firebase.google.com/)
[](https://tailwindcss.com/)
---
## 💡 Project Overview
**E-Courses Client** is a modern web application for online learning, designed to provide an intuitive and engaging experience. Users can browse courses, enroll, and track their learning progress via interactive dashboards. The project is built with **React**, powered by **Vite**, and deployed using **Firebase Hosting**.
---
## ✨ Features
- **User-Friendly Interface:** Browse and enroll in courses easily.
- **Interactive Dashboards:** Role-specific dashboards for students, tutors, and owners.
- **Authentication & State Management:** Secure login with Firebase and React Context.
- **Responsive Design:** Mobile-friendly layout using Tailwind CSS and DaisyUI.
- **Animations:** Engaging animations with Lottie.
- **Real-Time Feedback:** Toast notifications for actions and alerts.
---
## 🛠 Tech Stack
| Frontend | Backend / APIs | Tools |
|----------|----------------|-------|
| React.js | Firebase Authentication | Axios |
| Vite | REST APIs | React Query |
| Tailwind CSS | Serverless Hosting | React Router |
| DaisyUI | - | Lottie Animations |
---
## 🚀 Installation
1. **Clone the repository**
```bash
git clone
cd e-courses-client
```
2. **Install dependencies**
```bash
npm install
```
3. **Run the development server**
```bash
npm run dev
```
4. Open `http://localhost:5173` (or the provided URL) in your browser.
---
## 📁 Folder Structure
```
e-courses-client/
├── .firebase/ # Firebase cache/configs
├── public/ # Public assets
│ ├── image/ # Images
│ └── lottie/ # Lottie animations
├── src/ # Source code
│ ├── assets/ # Static assets
│ ├── component/ # React components
│ │ ├── Dashboard/ # Role-based dashboards
│ │ ├── Pages/ # Pages (About, Contact, Login, Register)
│ │ ├── Provider/ # Firebase & Context providers
│ │ ├── Route/ # Routing components
│ │ ├── component/ # Reusable components (Banner, Feedback)
│ │ └── layouts/ # Layout components (Navbar, Footer)
│ ├── App.jsx # Main app component
│ └── main.jsx # Entry point
├── package.json # Dependencies
├── vite.config.js # Vite configuration
└── firebase.json # Firebase hosting config
```
---
## 📄 Page Overview
### **Courses Page**
- Fetches and displays all available courses from the API.
- Shows title, description, tutor name, average rating, and fee.
### **Login & Register**
- Login validates user credentials.
- Register allows new users to create accounts.
### **Dashboard**
- Role-specific dashboards for students, tutors, and owners.
- Tutors can create or update courses.
- Students can view enrolled courses.
### **About & Contact**
- Static informational pages for platform details and contact form.
---
## 🌐 Deployment
- **Hosting:** Firebase
- **Public Directory:** `dist`
- **SPA Support:** All routes redirect to `index.html`
---
## 🔗 Links
- **Live Demo:** https://fir-project-b7c55.web.app/
- **Backend API:** https://github.com/Faysal2123/e-course-server
---
## 👨💻 Author
**Mohammad Foysal**
Frontend & MERN Stack Developer