Elearning-React 🎓

Welcome to the Elearning platform! Enroll in courses, access content, and start your learning journey! 📚

Live Demo

📑 Table of Contents

• 🎯 Features
• 📸 Screenshots
  • 💻 Desktop
  • 📱 Mobile
• 🔧 Tech Stack
• 📋 Prerequisites
• 🚀 Getting Started
  • 📥 Installation
  • 🔐 Environment Configuration
• 🏁 Usage
• 📁 Folder Structure
• 📚 API Documentation
• 🌍 Deployment
• 💖 Donate
• 📜 License
• 📝 Author

🎯 Features

• 🔑 Multi-User Login & Signup: Three types of logins and signups are available - Student, Teacher, and Admin. Each role has specific permissions and access.
• 🔓 Flexible Login Options: Users can log in using either their username or email.
• 🔒 JWT Token Authentication: Secure login and access with JWT token authentication.
• 📚 Course Enrollment: Students can enroll in courses and access course content.
• 🎥 Course Content: Access materials like videos, articles, and other resources after enrollment.
• ⏯️ Last Watched Video: The platform saves the last watched video, allowing students to resume where they left off.
• ⚙️ Admin and Teacher Features (Under Development): Admins and teachers will soon have features to manage students, courses, and other administrative tasks.
• 📱 Responsive Design: The platform is responsive and optimized for both desktop and mobile devices.
• 🖥️ User-Friendly Interface: Simple and easy-to-use interface designed for an intuitive learning experience.

📸 Screenshots

💻 Desktop

Landing Page	Login Page
Course View	Course Content

---

📱 Mobile

Landing Page	Login Page
Course View	Course Content

🔧 Tech Stack

📋 Prerequisites

To run this project locally, ensure you have the following software, tools, and configurations installed:

1. 🟢 Node.js

• 🚀 Required for running the frontend development server and handling dependencies.
• 📥 Download from Node.js Official Website.

2. 📦 npm (Node Package Manager)

• 🛠️ Used to manage project dependencies.
• ✅ Check if npm is installed by running npm -v in your terminal.

3. 🌿 Git

• 🌐 Version control system required to clone the repository.
• 📥 Download from Git Official Website.

4. 🖋️ Code Editor

• 💡 Recommended: VS Code for JavaScript, React, and CSS support.

5. 🌐 Browser

• 🔍 Google Chrome, Firefox, or any modern browser for running the web app.
• 📤 Ensure your browser is up-to-date for the best performance.

6. 🧰 Additional Tools

• 🛠️ Postman (for testing API endpoints, if necessary).

These tools are 🔑 essential for setting up and running the frontend of the Elearning-React project locally.

🚀 Getting Started

To get this project up and running on your local machine, follow the instructions below:

📥 Installation

1. Clone the Frontend Repository
   Clone the repository to your local machine using Git:

   git clone https://github.com/srikanthkanniyappan/Elearning-React.git
   

2. Navigate to the Project Directory
   Move into the project directory:

   cd Elearning-React
   

3. Install Dependencies
   Use npm to install the required dependencies:

   npm install
   

🔐 Environment Configuration

You need to configure the environment variables for the project to work correctly.

1. Create a .env file
   In the root of your project, create a .env file and add the following:

   VITE_API_URL=http://127.0.0.1:8000/api/
   

   This URL will connect your frontend to the Django backend. 🌐

2. Refer the Backend Repository for API Documentation
   Since the backend is developed in Django, please refer to the Django Backend Repository for API documentation and additional setup instructions. 📖

   • 🔗 Backend Repository: Elearning-Django

Once these steps are completed, you'll be ready to run the frontend and connect to the backend. 🚀

🏁 Usage

After completing the installation and environment configuration, follow these steps to run and use the application:

1. 🎬 Start the Development Server

Run the following command to start the application in development mode:

npm run dev

• The app will be available at: http://localhost:5173/ 🌐

2. 🌟 Explore the Features

1. 📝 Sign Up: Create an account as a Student, Teacher, or Admin.
2. 🔑 Login: Login using your username or email.
3. 📚 Enroll in Courses: Browse available courses and enroll in the ones that interest you.
4. 🎥 View Content: Access videos and materials for your enrolled courses.

3. ⏯️ Resume Learning

The app saves your last watched video so you can pick up right where you left off!

4. 🛠️ Admin & Teacher Tools (Under Development)

• Admins and Teachers will soon have tools to manage users, courses, and content.

5. 🌐 Deployment

The app is already deployed on Vercel. Check out the live demo:
Live Demo 🚀

📁 Folder Structure

Below is the standard folder structure of the Elearning-React project:

Elearning-React/
├── node_modules/         # Contains all npm dependencies
├── public/               # Static files and assets
│   ├── icons/            # Icon files used in the project
│   └── images/           # Image files used in the project
├── src/                  # Main source code of the project
│   ├── components/       # Reusable React components
│   ├── pages/            # Page components for routing
│   ├── routes/           # React Router configurations
│   ├── services/         # API service calls using Axios
│   ├── App.jsx           # Main app component
│   ├── index.css         # Global CSS styles
│   ├── main.jsx          # React DOM rendering
├── .gitignore            # Git ignored files and folders
├── .env                  # Environment variables
├── eslint.config.js      # ESLint configuration file
├── index.html            # HTML entry point for the app
├── package.json          # Project metadata and dependencies
├── package-lock.json     # Lock file for npm dependencies
├── postcss.config.js     # PostCSS configuration
├── tailwind.config.js    # TailwindCSS configuration
├── vercel.json           # Vercel deployment configuration
└── vite.config.js        # Vite configuration for the project

📚 API Documentation

The API for this project is powered by a separate Django backend. For details on the API endpoints, models, and how to interact with them, please refer to the backend repository's API documentation.

🔗 Backend Repository:

Elearning-Django

📜 Key API Endpoints:

• Authentication:

  • POST /api/login/ – User login
  • POST /api/signup/ – User registration
  • POST /api/login/refresh/ – Refresh access token

• Course Management:

  • GET /api/courses/all-courses/ – Fetch all available courses
  • GET /api/courses/course-list/ – Fetch all enrolled courses
  • GET /api/courses/course-details/{courseId}/ – Fetch a specific course details by courseId
  • POST /api/courses/enroll/ – Enroll in a course
  • POST /api/courses/enrollment/update/ – Update enrollment status
  • POST /api/courses/course/{courseId}/last-watched/update/ – Update last watched video for a course
  • GET /api/courses/course/{courseId}/last-watched/ – Get last watched video for a course

• Course Content & Video Management:

  • GET /api/courses/course-videos/{courseId}/ – Fetch all videos for a course
  • GET /api/courses/videos/{videoId}/ – Fetch details of a specific video by videoId
  • POST /api/courses/videos/upload/ – Upload a video to the course

• User Profile:

  • GET /api/authentication/user/profile/ – Get user profile information
  • POST /api/authentication/user/status-update/ – Update user status
  • GET /api/authentication/user/check-online/ – Check if user is online

🌍 Deployment

1. 🚀 Deploy Backend First

Before deploying the frontend, ensure the backend (Django) is deployed. Follow the instructions in the Django Backend Repository for backend deployment.

2. 🔗 Get the Backend API URL

Once the backend is deployed, retrieve the API URL. This will be used to configure the frontend.

3. 📝 Update the .env File

In the .env file of the React frontend project, update the VITE_API_URL with the production URL of the deployed backend:

VITE_API_URL=<Your_Backend_Production_URL>/api/

4. 🌐 Deploy the Frontend to Vercel

Follow the steps below to deploy the frontend on Vercel:

• ✍️ Sign Up or Log In to Vercel:
  Visit Vercel and set up your account.

• ⚙️ Add the vercel.json File:
  Create a vercel.json file in the root directory with the following content:

  {
    "rewrites": [{ "source": "/(.*)", "destination": "/" }]
  }
  

• 🔗 Import the Repository:
  Link your GitHub repository to Vercel.

• ⬆️ Deploy:
  Vercel will automatically build and deploy your project. Once deployed, you will receive a production URL.

5. 🔌 Backend API Integration

Ensure that the backend API is running and accessible via its production URL. Update the VITE_API_URL in the .env file accordingly.

For more information on deployment, refer to the Vercel Documentation.

💖 Donate

If you appreciate this project and would like to support its continued development, you can donate via the button below:

Your support helps keep the project alive and improves future updates! Thank you for your generosity! 🙏

📜 License

This project is licensed under the MIT License.

📝 Author

Srikanth Kanniyappan 👨‍💻

• GitHub: srikanthkanniyappan :octocat:
• LinkedIn: srikanthkanniyappan 👔
• X: @srikanniyappan 🐦