Greenlight

Student view page
Live collaborative whiteboard
Video call page
login page
feedback page 2
feedback page 1
quiz creation
creating new class
quiz demo
registration page
start page
teacher view

Inspiration

Since the COVID-19 period, virtual lessons have been on the rise due to its convenience and functionality. However, we have observed that a common sentiment amongst students that virtual lessons are 'a waste of time' due to how ineffective teachers can be when conducting lessons through video calls. This could be partially due to the lack of remote collaboration tools for interactive learning.

Thus, we have decided to come up with an integrated platform for seamless interaction among students and teachers in remote settings, allowing for more engaging and effective lessons to be conducted.

What it does

Greenlight lets teachers create a class, launch a live video session, and run real-time quizzes and scribble on whiteboards, all without leaving the platform. Every class automatically gets its own video room. Students can join, see live content, and respond to quizzes instantly. After the session ends, students can provide real-time feedback through quick questionnaires, contributing to analysing the success of the lesson. Furthermore, the usage of whiteboard functionality during the video calls allow teachers to better convey information to their students, allowing for clear understanding.

It’s built to feel fast and convenient: no need for teachers to switch tabs, send links, or wait for students to catch up. Just hit the green light and start teaching.

How we built it

Frontend: React + TypeScript with Vite for fast development.

Styling: TailwindCSS to build clean UI components quickly.

Video Calls: Daily.co's prebuilt iframe API for seamless video sessions.

Data: Firebase Realtime Database to store class info, room URLs, and quiz states.

Routing: React Router for navigation between main, class, and video call pages.

Whiteboard: LiveBlocks provides a well equipped whiteboard tool, perfect for collaborative work

We designed it so that creating a class automatically generates a persistent video room behind the scenes. When a teacher clicks into the class, the room is ready to go.

Challenges we ran into

We encountered many bugs in our code along the way, the most notable being that of a routing bug, where Daily's video call screen will linger on each page as the user navigates through tabs. These bugs required us to spent a lot of time looking through our code meticulously for errors, and researching to find ways to solve them.

Our members were not fully proficient in all aspects of development: some are more used to using react-native instead of react or more attuned to express instead of firebase and had to learn on the spot, making this project more difficult. However, we were able to cover each other's weaknesses when working on the project