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
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
libsignalto solve the issue of security.
- Bug hunting in the socket.io backend - and possibly a rewrite. The code got super messy after a while.