There really isn't a great tool that allows us to collaborate on projects in real time. Jira is a nice piece of software, but the issue is that every time we try to collaborate on a card with teammates, we must refresh a page to see changes. We decided there was a better way, so we created Vibe.

What it does

Vibe allows users to have a project management board, and make changes in real time, without each end client having to refresh the page to see changes. We also allow users to then click on a card and "collaborate," which enables them to have a digital canvas to draw and upload images/text on for their team to see in real time.

How we built it

The stack relies heavily on WebSockets. When a user raises an "event," which in this case is making a drawing stroke on a canvas, or moving a card between categories on our board, the event is sent between clients using WebSockets. We then pass the event to the persistence layer (Java API), which relays the completed event to every client currently connected.

The frontend is built with Bootstrap, we have the server running on AWS.

Challenges we ran into

It was tough to get this done in 24 hours, for one! I think that the most difficult part of getting this project done was handling the relay of completed events using the Java API.

Accomplishments that we're proud of

Getting this working! We spent 25 good working hours on executing on our plan. We are very excited to have WebSockets working right, because it's something we didn't have experience with before this Hackathon.

What we learned

Give yourself more than 10 minutes to deploy to AWS, and IntelliJ doesn't work on Mac all the time :). Seriously, though, learning how to write discriminators in JS to sort cards on the client side was very enriching.

What's next for Vibe

We will see! Hopefully the demo goes well, then it will be used for all of my personal projects!!!

Share this project: