Skip to content
AM
All projects
EdTech / Final-year project

E-Classroom

A virtual classroom for teachers and students that combines class rosters, assignments, notes, group chat and live video, with random attendance checks and in-class questions sent to randomly chosen students.

  • React
  • JavaScript
  • Firebase
  • Agora
  • React Router
  • Tailwind CSS
Source code

Architecture

Overview

E-Classroom is a virtual classroom web app built as a final-year university project for two kinds of users: teachers and students. It is a single-page React app with no custom server. Firebase supplies authentication, Cloud Firestore holds profiles, classes, groups and notes, Firebase Storage holds assignment files and note attachments, Firebase Cloud Messaging delivers class reminders, and Agora's WebRTC SDK runs the live video sessions. All application logic lives in the browser.

System

text
 Teacher / Student browser (React SPA, React Router)
   |-- Firebase Auth -------- email/password, role kept in displayName
   |-- Cloud Firestore ------ studentdata, teacherdata, createClass,
   |                          groups/{id}/messages, notes
   |-- Firebase Storage ----- thrAssignments/{class}/
   |                          stdAssignments/{class}/{studentId}/
   |                          notes/{uid}/
   |-- Agora RTC ------------ camera, mic and screen-share tracks
   '-- FCM ------------------ reminder push 5 min before a class
                              (service worker shows it in the background)

Key design decisions

Serverless on Firebase. With no backend to write or host, all the effort went into classroom features. Pages call the Firebase SDK directly from React components, so each one reads and writes its own Firestore documents.

One document per class. A class is a single Firestore document named after the class. It holds a map of enrolled students plus the teacher ID and schedule fields. Attendance flags, quiz questions and answers are stored on each student's entry, so one read gives the teacher the whole roster with each student's status.

Flag-driven random checks. For a random attendance check or a random question, the teacher's client picks a random enrolled student and sets popUp or questionPopUp on that student's entry. The student's view sees the flag and opens a modal, and the answer is written back to the same document, where the teacher's roster table shows it.

Role stored on the auth profile. At sign-up, the chosen role (student or teacher) is saved as the Firebase user's display name and copied into a role-specific profile collection. Login reads it back and sends the user to the matching dashboard.

Managed WebRTC. Video uses Agora's SDK rather than hand-rolled peer connections. The app publishes local camera and mic tracks and subscribes to remote ones. Screen share replaces the camera track with a screen track, and clicking a tile enlarges it into a main frame.

Stack

  • Frontend: React 18 (Create React App), React Router 6, Tailwind CSS, React Icons
  • Auth: Firebase Authentication (email/password)
  • Data: Cloud Firestore
  • Files: Firebase Storage
  • Realtime: Firestore snapshot listeners (group chat, notes), Agora RTC (video)
  • Notifications: Firebase Cloud Messaging with a background service worker

Key Implementation Highlights

  1. Built live class sessions on Agora RTC with mic and camera toggles, screen sharing, a session timer, and click-to-enlarge video tiles.

    Realtime

  2. Built separate teacher and student dashboards with React Router, sending users to the right one by the role saved at sign-up.

    Frontend

  3. Modelled each class as one Firestore document mapping enrolled students to their attendance, question, and answer state.

    Data

  4. Implemented random attendance checks and random questions that prompt one randomly chosen student and show replies in the teacher's roster.

    Frontend

  5. Built assignment exchange on Firebase Storage, with teacher uploads per class and student submissions stored in per-student folders.

    Media

  6. Added group chat over Firestore snapshot listeners, with teachers creating groups from the student directory and searching by registration number.

    Realtime

  7. Wired Firebase Cloud Messaging with a background service worker to push reminders to enrolled students five minutes before a scheduled class.

    Integration

  8. Built a notes module where students write text notes or attach files, with live updates and deletion that also removes the stored file.

    Frontend

Interested in the technical details?

Let's Talk