Inspiration

We were inspired to create Fabric after seeing the negative effects of not having a whiteboard in online learning. Most teachers resorted to writing on a piece of paper and attempted to record it over a Zoom call. This often resulted in poor quality and overall infeasibility.

What it does

Fabric is an online whiteboard that allows teachers to carry out online lectures almost like in a real classroom setting. Our custom anonymous chat service has a fully functional profanity filter to encourage students to ask questions without getting singled out but at the same time automatically moderating the chat to be safe and friendly for a classroom setting.

How we built it

We built Fabric using HTML, CSS, and JavaScript using the Visual Studio Code text editor. The site is hosted on Heroku to run Flask. Socket.io was used to quickly and securely communicate between the server and the client for live updates of messages and the whiteboard.

Challenges we ran into

One of our largest issues was Git merge conflicts. In order to overcome this we used Visual Studio Code Live Share. Another problem we encountered was real-time synchronization for the whiteboard and chat service. We solved this by implementing Socket.io with SSL.

Accomplishments that we're proud of

We are very proud of our real-time synchronization of our whiteboard and chat as they are very fast and secure. Additionally, our anonymous messaging system with a profanity filter allows for students to not be afraid to ask questions while also keeping the classroom environment safe and friendly.

What we learned

This was our first time creating a real-time updating application with Socket.io and hosting it using Heroku. We also built our Flask skills a lot with this project by using asynchronous functions. In the end, we think it turned out really nice.

What's next for Fabric

In the future, we definitely want to add more abilities to the drawing palette. In addition, we would like to have common shapes and letters automatically correct when you draw them. Other additions may include some sort of voice chat or Google Meet integration and a mobile phone app.

Built With

Share this project:

Updates