For rationale and demo: SLIDES/VIDEO

Profile

We are from Montgomery Blair High School. Our Discord usernames are kmh#0778 and vivi#5230.

Inspiration

Social interaction is integral to our well-being, and in the wake of COVID-19 and self-quarantine, online communication is our savior. But chatting is currently fragmented across many platforms -- some friends use Google Hangouts, some use Discord, you might be in an organization or two that uses Slack, and some people use Telegram (why???). We set out to fix that, and wrap it all up in a clean, customizable user interface.

What it does

MasterChat provides as easily extensible chatting UI that can have new chatting platforms added as simple modules. During the course of the hackathon, we implemented modules for Discord and Hangouts, but adding more would be easily doable.

How I built it

The backend is written in Node.js and uses websockets and HTTP requests to communicate directly with Discord's API. It also uses the hangupsjs library to communicate with the Hangouts API.

The frontend is written with Vue.js, and makes use of a few Bootstrap components. It communicates with the backend through a websocket.

Challenges I ran into

Converting Hangouts's and Discord's message and user formats into a single format for use by the frontend was pretty difficult. It took a lot of thinking and messing around to come up with a nice layout for organizing and normalizing the data.

What's next for MasterChat

We plan on implementing more features of the underlying chat platforms in our interface, including read indicators, typing indicators, message reactions, and pins. We would also like to implement modules for more chat platforms.

Built With

Share this project:

Updates