We want ZotBoard to be a place where Anteaters can collaborate with each other during a time of remote learning.

What it does

ZotBoard provides real-time data vision and an open space where Anteaters can freely draw, type out reminders and notes, add shapes, and react with stickers to other contributions on the board.

How we built it

We built the ZotBoard using the fabrics.js library and the canvas aspects of HTML . We used CSS to design our website and used javascript for animations and buttons. In order to offer the collaboration aspect of our project, we used sockets in Python to update the ZotBoard in real-time for other users every time a user makes a contribution.

Challenges we ran into

Originally, we had plans to offer a sticky note option in which users could choose add text to a rectangular-shaped object, but we struggled with adding editing capabilities on that shape. To overcome this, we included a text-box feature instead which can be moved across the ZotBoard.

Accomplishments that we're proud of

We are proud of being able to incorporate a live updating feature to our ZotBoard so that multiple users can view and collaborate on the same board at the same time. Our ZotBoard also features the option to add Peter the Anteater reactions to a contribution, which makes our product appealing to students at UCI.

What we learned

We learned how to use CSS and HTML to design our website. We also used previous knowledge on Python sockets from our programming classes and expanded it to using web sockets with Flask.

What's next for ZotBoard

The next step would be to include a delete feature, more colors, types of boards, and font types that can help a user better organize their work and boost productivity. We also want to add a "rooms" feature for the ZotBoard, so multiple users can work on different boards at the same time. We also plan on adding a save feature so that users can review old ZotBoards.

Share this project: