Video chat
Mobile responsiveness and multiple rooms
Editable and resizable layout
Live sync of whiteboard, text chat
Customizable rooms

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.