Inspiration
Almost all live online education experiences are based on a video stream. (WebEx, Zoom, etc) Instead of having a video stream being central to the learning process, our idea uses the idea of an online whiteboard (drawing software). The basis of the idea is the fact that instead of needing to stream video, viewers will just need to "download" arrays with (x,y,colour) and their browsers will handle the process of executing the data and making it seem like an online whiteboard. This process of only transmitting an array with coordinate information rather than requiring users to stream a live video feed creates a level playing ground for students with varying internet services (more notably, internet bandwidth and speeds, etc).
What it does
An online whiteboard. Essentially, the host of a session will have a paint-like interface where they can draw on the whiteboard to present their lesson. Viewers of the session will be able to join and watch the session live.
How We Built It
Preliminary Design Much of our focus was directed towards making a simple UI, with only the core features needed to execute a whiteboard app - we devised mockups on Figma, and created some many of the icons used in our app using Adobe Illustrator.
Frontend For it's simplicity and ease of development, we chose to implement our front-end through the use of React. The use of React also allowed us to implement the Canvas component - the core of our project - along with the many paint tools required to be able to interact with it.
Serverside-Backend To aid in the realtime functionality of our app, we utilized Firebase's Realtime DB, which allowed us to constantly update a viewer's screen (their canvas) with the newly drawn components within a second. Firebase's seamless integration with React through its other features, such as FirebaseAuth, made it the ideal choice overall for our project. Ultimately, we also utilized Firebase's hosting service to deploy our web app.
Challenges We Ran Into
- The React Context would not update upon logging into Google through Firebase - we were unable to resolve this issue (although the Google sign-in feature itself worked)
- Obtaining the stringified object containing the XY coordinates of each vector (each pen-stroke) was initially hard to implement as the viewer's canvas would often crash due to too many renders occurring at once - we used a combination of the useEffect + useState hooks to resolve this issue, preventing crashes
Accomplishments that we're proud of
We were very proud of the fact that we were able to sync the teacher canvas with the student viewer canvas, with a very small latency (1s >).
What's next for myBoard.space
- Adding a dedicated chat feature for students to interact with their teachers and also functionality for audio
- Implement animated writing strokes for the viewer
- Implement a database system that supports multiple classes
Log in or sign up for Devpost to join the conversation.