workmate

Enhancing Education with Interactive Whiteboards. Work with your Mates on Challenging Questions using a large assortment of tools, streamlined to make things intuitive

Comment 3

Inspiration

Ever heard of workmate. Tiiiirred of working on that same old problem all by yourself, maybe your even a little lonely and wish for some company. Whether you wanna study with your close buddies or meet new peers who aren't very near, workmate allows you to connect with others to solve that one nagging question you had from that practice exam. After all, if you can put many great minds into one hard problem, then you for sure will ace that next exam when it comes. So study, work and collaborate as workmate gives you the tools and environment to do so, anywhere and maybe even everywhere when you just need that final bit of assistance to push you through that mental block.

Sometimes it can be difficult to find people for that specific problem you have. On forums, you might have to venture from link to link just to find a hint of the topic you're looking for. Wouldn't it be easier to find people who are already there, eager to work it out together. Our idea with workmate took inspiration from skribbl.io, with its simple UI and efficiency in finding people, taking on an approach dedicated for high school and University students.

What it does

workmate is your ultimate collaborative hub designed to bring people together to solve problems, share knowledge, and achieve goals. Whether you're studying for an exam, working on a project, or simply looking to brainstorm ideas, workmate provides a seamless platform to connect with others in a productive and engaging environment.

To use the web application: First, from the login page, enter your user name, you display name as you enter a chat room. Next, you will find yourself in the lobby page where you have the ability to choose from a selection of subject specific chatrooms. After clicking on a room, you will finally be able to talk and collaborate with your mates.

Our features within the Chatroom include:

  • Using the Whiteboard feature, display your working out, where other people can synchronously write and draw to solve questions.
  • Additionally, save/export whiteboards for future reference
  • Share your question with the class by publishing a question in the Question Textbox, allowing others to be able to view your problem.
  • See your mates in the chat room queue on the left side list.
  • Finally be able to communicate with each other through the Chatbox at the bottom right

How we built it

The application was built using the React JS framework for the front end, providing a dynamic and responsive user interface. We designed it to allow users to log in with their usernames, join or leave lobbies, and interact with a shared whiteboard. For the whiteboard functionality, we utilized Fabric.js, a powerful library that enabled users to draw seamlessly using various tools such as pens, shapes, and erasers. To streamline the styling process and maintain a clean codebase, we employed Tailwind CSS, which allowed us to implement responsive designs efficiently while keeping the code concise and maintainable.

On the backend, we leveraged Python WebSockets to handle real-time communication between clients. The WebSocket server runs alongside our JavaScript application on an AWS server, ensuring smooth and synchronized interactions. This backend component is responsible for managing all client communications, including ensuring that all users can view and interact with the same whiteboard in real-time, participate in shared chatrooms, and collaborate on questions or tasks. The WebSocket implementation was crucial for maintaining consistency across user sessions, enabling features like live drawing updates, chat messages, and lobby management.

Despite the technical complexities, this architecture allowed us to create a cohesive and interactive experience for users, though it required careful coordination between the frontend and backend to ensure seamless functionality.

Challenges we ran into

One of the biggest challenges we faced was syncing up the whiteboard to ensure it was visible and usable by all users in real-time. This functional component likely took the longest time to implement due to the complexities involved in sharing and synchronizing metadata across multiple users simultaneously. A significant amount of effort was spent on designing the data structure for the whiteboard, ensuring efficient real-time updates, and handling edge cases like latency and connection drops. By the time we achieved a stable synchronization mechanism, there was limited time left to optimize performance and add advanced features. External factors, such as server limitations and network inconsistencies, further complicated the process and slowed down progress.

Hosting the server and application on AWS also proved to be a slight challenge, particularly in resolving access to the correct ports and IP addresses over the internet. A fair amount of time was spent configuring security groups, setting up proper port forwarding, and ensuring that the server was accessible to users without compromising security. Navigating the AWS management console and understanding the nuances of networking settings required some trial and error. Fortunately, these issues were resolved relatively quickly compared to other challenges, thanks to available documentation and community support. However, the process still consumed valuable time that could have been spent on further refining the application's features and performance.

Another big challenge we ran into was integrating AI into our application. A lot of time was spent figuring out how to use the tools which where given, figuring out the API calls, navigating the Langflow UI. Even after we had managed to make successful API calls, by the time we had accomplished so, there was very limited time to properly integrate the AI application into our web application. This was also partially due to external factors including certain servers shutting down and slowing down progress.

Accomplishments that we're proud of

Some of our accomplishments we are proud of are connecting the front end and back end using Websockets. This allowed for in-real-time collaboration, where users can see updates instantly without refreshing the page. This also includes in publishing questions and built-in chat function for users to communicate via text. Another feat that we accomplished was hosting our product on a public server using AWS, which was a major step from hosting on our local servers. Our Whiteboard was built by using Fabric.js, including many customisable options for users to use. To connect all users together, we managed user authentication, where user can log in with a unique username, and the server maintains a list of logged-in users through tracking their Websocket connection. We also included a user-friendly interface, allowing all users to understand the purpose of all of the functionality within our app.

Making the AI API call functional was also a major achievement in our opinion. Being the first time we had ever integrated AI into an application, Langflow definitely made much of the process much more comprehendible and intuitive. When we were finally able to maximize the efficiency of the API call from minutes to seconds, it certainly was a moment to celebrate. By removing some of the nested API calls within our Langflow customised flow, we were able to take a significant amount of load off the server side, being able to make prompts within a matter of seconds.

What we learned

Technical Skills We have learnt many technical skills, such as implementing Websockets, allowing synchronous communication between users. Getting the servers to run cohesively with our backend also proved to be one of our major stepping stones and challenges we happened to encounter during our time within the Unihack. Furthermore, we learnt to integrate AI via an agent into workmate, utilizing the tools within Langflow to generate a task specific agent which provides relevant questions and accurate solutions to the user. With the help of WolframAlpha's LLM API, we where able additionally source 'MateAI', with a comprehensive library of formulas, theory knowledge and extensive calculations.

Communication One of the most important and unique issues that we had to overcome for this particular hackathon was the issue of communication. Our team composed of people with clashing schedules and differing availabilities, meaning we had to set up an effective communication system in order to ensure everybody was on track. We learnt to become more organised and responsive, distinctly lining out actionable items in order to ensure streamline progression. Furthermore, this allowed us to ensure team members would not run into duplicate tasks, where we spent a good majority of our time planning direction.

What's next for workmate

We intend on improving a lot aspects due to restrictive time constraints within the hackathon. Look forward to additional QOL features to workmate in the future. These include:

  • Ability to create and customise your own chatrooms for more specialised usages
  • Public and private chatrooms
  • Improved UI
  • Implementing AI into web application on server side
  • More Whiteboard functionality:
    • Different pen tools
    • Undo button
    • Text box to allow for words on Whiteboard
    • Upload PNG to Whiteboard
  • Upload PDF, URLs containing course content so MateAI can generate more catered questions
  • Additional customisation to user profiles
  • And more

Additionally, look forward to additional modes other than collaborative work. We intend on adding a Ranked or competitive version of workmate in the future with its own reward and points system.

Built With

+ 3 more
Share this project:

Updates