Study Buddy

Collaborate! In real time!
Logo
App

Problem

In these times of isolation, many of us developers are stuck inside which makes it hard for us to work with our fellow peers. We also miss the times when we could just sit with our friends and collaborate to learn new programming concepts. But finding the motivation to do the same alone can be difficult.

Solution

To solve this issue we have created an easy to connect, all in one platform where all you and your developer friends can come together to learn, code, and brainstorm together.

About

Our platform provides a simple yet efficient User Experience with a straightforward and easy-to-use one-page interface.

We made it one page to have access to all the tools on one screen and transition between them easier.

We identify this page as a study room where users can collaborate and join with a simple URL.

Everything is Synced between users in real-time.

Features

Our platform allows multiple users to enter one room and access tools like watching youtube tutorials, brainstorming on a drawable whiteboard, and code in our inbuilt browser IDE all in real-time. This platform makes collaboration between users seamless and also pushes them to become better developers.

Technologies you used for both the front and back end

We use Node.js and Express the backend. On the front end, we use React. We use Socket.IO to establish bi-directional communication between them. We deployed the app using Docker and Google Kubernetes to automatically scale and balance loads.

Challenges we ran into

A major challenge was collaborating effectively throughout the hackathon. A lot of the bugs we faced were solved through discussions. We realized communication was key for us to succeed in building our project under a time constraints. We ran into performance issues while syncing data between two clients where we were sending too much data or too many broadcast messages at the same time. We optimized the process significantly for smooth real-time interactions.

What's next for Study Buddy

While we were working on this project, we came across several ideas that this could be a part of. Our next step is to have each page categorized as an individual room where users can visit. Adding more relevant tools, more tools, widgets, and expand on other work fields to increase our User demographic. Include interface customizing options to allow User’s personalization of their rooms.

Try it live here: http://35.203.169.42/

Our hopeful product in the future: https://www.figma.com/proto/zmYk6ah0dJK7yJmYZ5SZpm/nwHacks_2021?node-id=92%3A132&scaling=scale-down

Thanks for checking us out!

Built With

Submitted to

nwHacks 2021
- Winner 1st Place
- Winner Honorable Mention

Created by

My role in this project was full stack developer and end to end product designer. I assisted in designing and testing the prototype as well as integrating the design with React. I implemented the real-time whiteboard, communicating with socket.io, added Dark Mode, researching and integrating the SphereEngine IDE.

James Young
I did all the designs like creation of the brand, wireframing and final interactive prototype.
Worked on the front end of the web-app with James and Rafid.
Prepared the pitch, edited the Video and presented it.

Eric Lee
I worked on the backend architecure and the front end to implement syncing video playback and URL. Also worked on the UI layout and help teammates fix bugs. I deployed the application on Google Kubernetes and set up the domain name mapping.

Rafid Pranta
I worked on the backend, setting up socket.io and connecting it to the front end. I dockerized the app and worked with Rafid on deploying to Kubernetes. I implemented the chat and fixed critical bug in the video player's synchronization.

Léo Abiguime