The original idea stems from a previous experience where all the fellows got together to watch one of Apple events.
While streaming the event we had discussions and some friendly banter which was pretty enjoyable. We hence thought that it could be a good idea to allow fellows to easily be able to discover each other and have conversations on any topic of their choice in a gamified setup.
What it does?
In its current version, our project allows users to adopt an avatar, set a username and freely stroll through the MLH Town and also see & chat with others currently online fellows. If they choose to, they can create rooms for discussion with each other and ask others to join them in a video call.
How we built it?
. PeerJs - Using PeerJS, MLH Township facilitates audio-video calls between fellows by harnessing the power of WebRTC.
. Socket.io - Websockets are the backbone of MLH Township. Websockets are used all the way from managing users to the transfer of metadata for establishing calls between users. Socket.io does all the heavy lifting for managing websockets.
. PixiJS - PixiJS provides the environment for creating different avatars and their movements. The aim of the retro theme is to make people nostalgic and make them feel home.
. React and Node - We chose the industry wide popular combo for developing MLH Township. By having frameworks that were already extensively explored, we eliminated the scenario of getting stranded with a bug in the middle of the development.
. Docker - The containerized architecture for MLH Township not only allowed us to quickly set up development environments but also made hosting the application hassle free.
Challenges we ran into
None of the team members has ever implemented WebRTC in any project. Using the native RTCPeerConnection generated spaghetti code and overwhelmed us. We read numerous blogs and watched video tutorials but all of them were focused on the one-to-one communication. We had to find out our own way to manage different WebRTC connections among users to allow them to join or leave a room at their will.
Accomplishments that we're proud of
- Having WebRTC work and finally see each other's video streams was great.
- Writing performant Socket.io code to synchronize user positions.
- Using PixiJS to animate users
- A focus was also to keep the environment healthy and fun so that no one got frustrated if something wasn’t going their way.
- We weren’t really sure if this would work, but the fact that it does is a pretty big win for us.
What we learned
Making pragmatic choices - Jumping into a framework just because we wanted to learn it or were already familiar with it has cost us a lot of time. Researching thoroughly about a library before using it has become our motto.
Refactor early, refactor often - After some time we felt that we could be better off refactoring the code instead of debugging it.
Working with WebSockets - Websockets provides bi-directional communication between webclient and server. Playing with websockets, that too with a library as SocketIO taught us the underlying complexities of computer networks.
Working with WebRTC - WebRTC is a powerful tool for establishing P2P connections. Using such P2P connections for creating group video calls made our brains tinker a lot and taught us lifelong lessons.
What's next for MLH Township?
- Having mini-games that fellows could play while in a room.
- Make the map more interactive.
- Rich chatbox and reactions.