Repository files navigation

This project is ane-learning system for universities, built to manage online education processes, including course content, exams, student progress tracking, and real-time communication between students and teachers. The platform supports multiple user roles: students, teachers, and administrators, leveraging modern technologies for optimal performance, scalability, and user experience.

• User Roles: System Admin, Teachers, Students
• Course Management: Create, update, and manage course content
• Exam Management: Schedule and manage exams, automatic grading
• Assignment Submissions: Students can submit assignments, and teachers can review them
• Real-time Chat: Live chat between students and teachers usingSocket.IO
• Notifications System: Real-time notifications for users
• Cloud Storage: Media storage for lectures, exams, and resources usingCloudinary
• Analytics & Reports: Generate student performance reports
• Fully Responsive UI: Built withMantine UI
• Deployed with Render for seamless scalability

• Node.js &Express.js: For building the REST API and handling socket communication
• MongoDB: NoSQL database for storing user data, courses, exams, etc.
• Mongoose: ORM for MongoDB schema and data management
• Socket.IO: Real-time bidirectional communication for live chat
• JWT Authentication: Secure user authentication system

• React.js: SPA architecture for dynamic, fast user experience
• Mantine UI: Component library for responsive and accessible UIs
• React Query: Efficient data fetching, caching, and synchronizing server state
• Socket.IO Client: Real-time communication for chat and live interactions

• Cloudinary: Media storage for managing images and video files
  • Cloudinary Link

• Figma: UI/UX design, wireframes, and system diagrams
  • Figma Designs
• Jira: Project management and issue tracking tool
  • Jira Link

• GitHub: Version control and collaboration
  • GitHub Repository
• Render: Cloud platform for deploying the backend and frontend
  • Render

The platform includes areal-time chat feature that allows students and teachers to communicate instantly. This feature is powered bySocket.IO, which facilitates real-time, bidirectional event-based communication between the frontend and backend.

• Backend (Node.js + Socket.IO): Manages socket connections and events between users (students, teachers).
• Frontend (React + Socket.IO Client): Allows real-time message exchange, updates the chat UI in real-time.

The system consists of:

1. Frontend (React): Interacts with the backend via REST API and Socket.IO, handles routing, and UI rendering.
2. Backend (Node.js, Express): Serves as the API provider, connects to the MongoDB database, handles business logic, and real-time chat through Socket.IO.
3. Database (MongoDB): Stores all user data, courses, exams, submissions, and chat histories.
4. Cloud Storage (Cloudinary): Stores media files such as images and videos uploaded by users.

You can view the fullsystem diagramhere in Figma.

The core database entities:

• Users: Stores students, teachers, and admins
• Courses: Stores course details, syllabus, and materials
• Exams: Stores exam details, questions, and answers
• Submissions: Student submissions for assignments and exams
• Messages: Stores chat messages between users

e-learning-system/├── client/              # Frontend code (React)│   ├── src/│   ├── public/├── server/              # Backend code (Node.js, Express)│   ├── models/          # Mongoose models│   ├── controllers/     # Request controllers│   ├── routes/          # API endpoints│   ├── sockets/         # Socket.IO events and logic├── config/              # Environment configurations├── README.md            # Project documentation└── .env                 # Environment variables (not shared)

git clone https://github.com/your-repository/elearning-system.gitcd elearning-system

npm run setup-project

Create a.env file in the root directory:

MONGO_URI=<Your MongoDB connection string>CLOUDINARY_CLOUD_NAME=<Your Cloudinary Cloud Name>CLOUDINARY_API_KEY=<Your Cloudinary API Key>CLOUDINARY_API_SECRET=<Your Cloudinary API Secret>

npm run dev

This command will run both the frontend and backend servers concurrently. The real-time chat system will be available once the app is running.

The project is deployed usingRender:

• Backend:API Link
• Frontend:Live App

Refer toRender's documentation for deployment details.

• JWT-based authentication
• Different permissions for admins, teachers, and students

• Teachers can create, update, and delete courses.
• Students can view and enroll in courses.

• Teachers can create exams with automatic grading.
• Students can submit assignments, which teachers can review and grade.

• Students and teachers can chat in real time.
• Message notifications and real-time updates on new messages.

• Real-time notifications for students and teachers (assignment due dates, grades).

• Cloudinary is used for storing media files (lectures, assignments).
• Cloudinary Docs

• Teachers and admins can generate reports for student performance.

• Output: Detailed project requirements, user stories, and wireframes created in Figma.
  • Link to Figma designs:Figma Wireframes

• Output: Basic Node.js and Express API, MongoDB database, user authentication (JWT), and models for courses and exams.
  • Key Features:
    • Authentication system (login, signup)
    • API endpoints for user, course, and exam management.

• Output: React app with routing, course listing, and user dashboards. Basic UI components usingMantine UI.
  • Key Features:
    • Responsive design
    • Basic views for courses, exams, and user profiles.

• Output: Integration withCloudinary for storing images and videos (e.g., lecture materials, student submissions).
  • Key Features:
    • Upload media feature on course and exam creation pages.

• Output: Integrated real-time chat system for communication between students and teachers.
  • Key Features:
    • Real-time message sending and receiving.
    • Notifications for new messages.

• Output: Notification system for students and teachers (e.g., upcoming assignments, grades).
  • Key Features:
    • Web notifications for important updates.

• Output: Thorough testing of the entire system (backend, frontend, and integration). Deployment onRender.
  • Key Features:
    • Test cases for all features.
    • CI/CD pipeline for auto-deploy onRender.

We welcome contributions from the community! To contribute:

1. Fork the repository
2. Clone your fork:git clone https://github.com/your-username/elearning-system.git
3. Create a new branch:git checkout -b feature-name
4. Make your changes and commit them
5. Push to your fork and submit apull request

Please make sure your code follows our guidelines and is well-documented.

• API Documentation:Postman Collection
• Cloudinary Docs:Cloudinary Documentation
• Figma Design:Figma Link
• Render Hosting:Render Documentation