I have tri-weekly Zoom calls as a part of an organization I am involved in, and there are always apparent efficiency issues that have captured my attention. For example, there is no unified way to access a sort of "notepad" in the Zoom client without manipulating your windows in strange ways. And even if you do get a split-screen view with the Zoom client, you won't be able to juggle many windows at once. Zoom does have collaborative features like whiteboard functionality, but there is no cohesive and cross-implemented solution across platforms that allows for the use of multiple productivity tools and that allows for an ease of transition between applets.
What it does
ZoomParty is an all-rolled-into-one web platform that allows teams in all industries to collaborate with ease. The application is fully compatible with all Zoom calls and any user can invite their coworkers or colearners to join in on the "party"! It allows users to leverage multiple collaborative platforms, like Trello, collaborative documents and whiteboards, and custom "applet" integrations right next to a Zoom meeting client. Users can move around, resize, and duplicate applications to maximize productivity. The built-in collaborative document uses Firebase to automatically store the meetings notes or agenda's written in the client. Any user on the same ZoomParty is able to add to the collaborative document in real time. The whiteboard feature also allows users to collaboratively add to a shared whiteboard in real time. The whiteboard is able to "import" images to be displayed on the background of the drawing area by texting in an image (ex. a sheet of notebook paper with ideas) to the Twilio MMS API, which then allows ZoomParty to process and add the image into the Firebase database holding the image data.
How I built it
I built ZoomParty's UI with the React framework. This allowed me to maintain a "controlled" environment for the website's state, allowing for future expansion in the integration of automatic layout setup. The backend of the application was implemented in Firebase, through the Firebase Realtime Database, which allows the in-house collaborative applets, like the Docs app and the Whiteboard within ZoomParty to foster a collaborative and constructive dynamic through real time, live, multi-user editing. Any user on the same ZoomParty is able to open the documents and whiteboard apps and contribute live, with edits being saved instantaneously as they are made into the Firebase Realtime DB.
The whiteboard interface was built off of a past project implementing React Konva, which allows for a canvas interface to be built directly into the React UI. The lines and highlights are stored as objects in the React state, where dragging the mouse instantiates a function that records the relative mouse location and stores the coordinates into the state objects. When the state is changed, the whiteboard applet triggers an update to the Firebase DB, which also refreshes the state of the applet due to the event trigger that is created when the whiteboard app is opened. The "text-in" functionality is made possible through the Twilio MMS API, which allows for texted images to be uploaded to their image stores.
The collaborative document app is based of of the Quill React rich text editor, in which I added an event handler on the opening of the application to automatically ping and fetch the Firebase Realtime Database for updates to the text route of the specific ZoomParty call taking place. Then, it stores the response into the state, and when changes are made within the Quill interface, the state is changed and the Firebase database is updated with all relevant changes to the inputted text. Since the routes of the whiteboard and document data stores are the same for any Zoom call, any user on the same ZoomParty can add, edit, and delete text and drawings in the ZoomParty UI. Here's a sample of the Firebase data structure: /streams/ZOOMPARTYID/[whiteboard/notes]/[lines/highlights/text/activeTool]
Additionally, I used Bulma CSS for integrating a cohesive UI library to form components.
In terms of the window stack, I leveraged React-DND to allow for a windowed environment that has grab handles to expand panes and move functionality. A small FontAwesome icon is placed at the top left of all windows, which uses absolute positioning to always stay on top of the component. I then used the CSS class of the icon has a grab handle.
Challenges I ran into
I initially ran into many issues with the reactDND component, in that it was challenging to deal with the complex window structure appropriately. I also had a few issues initializing the Firebase database and adding all relevant configurations to the React app, but these were solvable after reading the Firebase documentation. There are a few resizing bugs that still persist, and I hope that I can resolve these in future iterations.
Accomplishments that I'm proud of
I am proud of completing ZoomParty to a functional state. As the deadline approached, I felt increasingly stressed as I wasn't sure if I would be able to implement all the features I had meant to implement. I feel that the platform is a unique solution to the problems I had experienced as a student in Zoom calls, and I hope that the tool is able to help other teams and classes move towards a more productive environment that fosters collaboration.
What I learned
I learned a lot in the field of UI design, window management, database control, and collaborative environments. The window position is highly controlled, which also forced me to research more into how React "states" work. I also learned about different data structures, data manipulation, etc. to allow me to use React state in a more effective manner.
What's next for ZoomParty
In the future, I hope to add even more collaborative functionality that brings people closer together. Here's some things on the roadmap:
- Built-in omnidirectional translation services for international collaboration
- Even more web apps or in-house "applets" that can help with project management, slideshow creation, spreadsheet manipulation
- Preset "layout" configurations that the host can automatically set and that will be stored as URL parameters
- Mobile device support through a tabbed layout