Try it out yourself!

Inspiration

In these times of online schooling, there's no single solution for schools to provide a live environment to students. Apps like Zoom have been criticized for security flaws, and other apps require a lengthy sign-up process for students to access. We aimed to solve these problems and more by implementing an online classroom that's actually designed to be a classroom.

What it does

Class:Room provides a method for teachers to quickly and easily create an online classroom and invite their students. The classroom environment provides a WebRTC video call interface, live text chat, and a live whiteboard for teachers to present ideas to their students. Class:Room is also extensible and customizable: students can rearrange the classroom however suits them best.

How I built it

I used Next.js to provide a React boilerplate. For the backend, socket.io is used. Video feeds are implemented through WebRTC, and the whiteboard is a forked and modified version of react-canvas-draw.

Challenges I ran into

There were several challenges in the creation of this app, mostly related to getting different libraries to work with each other. For example, react-grid-layout combined with react-canvas-draw created infinite recursion and react-spring didn't play well with material-ui. Another major challenge was customizing the libraries to do what the app required - react-canvas-draw isn't designed for live updates and the video chat had to be implemented by hand.

Accomplishments that I'm proud of

I think the UI is really polished and responsive. I strove to make the app as user-friendly as possible, and I think I succeeded while also achieving functionality. I'm also proud that I got nearly all of my goals done by the deadline.

What I learned

This is the first time I used Next.js and almost every other library. I also had no clue how WebRTC worked to begin with, and learned to implement a full app with it.

What's next for class:Room

  • More features in each room, such as administrative functionality and voice connections.
  • End-to-end encryption using libsignal to solve the issue of security.
  • Bug hunting in the socket.io backend - and possibly a rewrite. The code got super messy after a while.

Built With

Share this project:
×

Updates