How We Won Facebook Developer’s Circle Community Challenge 2019 [India Chapter]

It was around August 2019 when my friends and I attended our first Facebook Developer’s Circle Build Day in Chennai. We were third-year computer science undergraduates at Sri Sivasubramaniya Nadar College of Engineering (SSN), absolutely addicted to hackathons and building cool things that made a difference.

I had a team of like-minded friends who were equally excited and enthusiastic about solving real-life problems and bringing those ideas to life.

We never missed a hackathon and attended all of them, one after the other, regardless of the outcome.

We learnt something out of every project we built and have been developing since our second year of engineering. All in all, we gathered good experience as Full-Stack developers (MERN) for over a year and in the process, won 3 hackathons and lost 3 of them as well.

We came to know about Facebook’s Community Challenge Hackathon, which is conducted online globally every year, through our Developer’s Circle Chennai Lead, Mr. Magesh who got us to participate in it.

Being excited about our first International hackathon, we were ready to take part in and brainstorm for crazy ideas.

The competition has three phases

5000$ — Regional-First place

3000$ — Regional-Second place

1500$ — Regional-Third place

The top 3 ideas along with the Best pre-existing solution award from every country qualify to compete in the global round for 25,000 USD. Along with other cash prizes

Submission phase

Regional winners announcement

Global winners (Grand finale)

There are even bonuses and other cash prizes, so this is a great initiative by Facebook to help out the community by offering a pool of cash prizes at 165,000$ every year to ambitious and talented developers!

The themes for the Facebook community challenge were HTML5 games, SparkAR and React360. We decided on React360 as we were experienced React developers and Data Science enthusiasts.

“We had an idea to bring together a group of remarkable people"

React360 being a relatively new yet quite powerful platform! Unfortunately, it had a very few developers, tutorials and even Stack Overflow and other sources could not offer much help.

This set things up even more interesting for us, as we knew it was going to be challenging. We set out to build a platform where you can watch movies together with friends and strangers with a similar taste.

It uses a recommendation system to achieve this. Additionally, you will be on a real-time group call with everyone in the watch party. You can also use voice commands to control the video player, all while ensuring performance and privacy.

It was a pretty big project and required proper team collaboration. Though we had a month to complete all of this, we had a lot of pressure form college too. This made it hard to concentrate on the work in hand.

So we split ourselves into different teams as per the components we were developing:

Myself and S.kanishq Sunil (WebRTC team):

Peer to Peer Communication

We worked on connecting peers in a watch party. We used WebRTC to establish peer to peer communications and had to build this modularly so it could be integrated with React360 easily.

There weren’t any proper resources for WebRTC, especially for multiple client connections. We read a lot of articles, referred to a lot of youtube videos and understood the core networking principles that are utilized by peer to peer systems.

In the end, we were able to successfully implement a working version of a room based peer to peer mesh network. We established poly duplex calls among all the peers, complete with cleaning and renewal of P2P sessions and launched it on Heroku.

Demo site :

Edit descriptioninfinite-savannah-66032.herokuapp.com

This was a pretty good achievement! We have handled all possible test cases ranging from joining a room, being in a call with up to 6 peers, exiting the room and rejoining the same room.

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com

Myself and Nimish Santosh(Web sockets team)-

Synced Video Player

We handled a lot of test cases such as buffering while still keeping everyone in sync and other similar issues. But, we missed something important!

Eventually, we found out that none of our code would be supported by React360. This is because React360 is relatively new and it’s components were unlike regular HTML5 elements.

We initially took advantage of the listeners of HTML5 audio and video tags to synchronize the connected peers. We couldn’t do that anymore. So we came up with alternate solutions that worked well with React360! We also worked on signaling servers and tracking users’ online status.

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com

Nimish Santosh and Kandavel (voice commands module) —

For this, we needed a reliable way of detecting voice commands. It sounds simple on paper but in reality, it was a pain to get it to work. We used chrome’s webkitSpeechRecognition API through p5’s libraries to get back voice input converted to text.

But this wasn’t nearly as accurate or reliable as we’d hoped. So we came up with a post-processing method to process the speech to text output. It involved the use of a modified trie, homophones and the sequence of occurrence of words to determine the command the user was trying to use.

This worked well, provided you had a good microphone.

Nikamanth and Kandavel (Recommendation Engine, React360) —

Recommendation Engine

The system required a way to socialize and make your time more valuable by making you watch your favorite titles with like-minded peoples.

So to pair up and suggest people, we deployed a user to use cosine based vectorized technique under collaborative filtering technique that suggests only the most ‘similar’ users join the party, with the ratings that they have marked for the movies that they have watched earlier.

So this brings up a new platform to interact and get to enjoy with people having similar interests. This motivates users to communicate and socialize.

Yippe!

https://github.com/nikamanthab/VRflask

React360

And that is where everything started to break.

There were limited modules, articles and documentation on React360. We had to build and even had to modify some of the sample modules from React360 GitHub page to get our peer logic to work.

We constructed a custom virtual keyboard as the only primitive input method in React360 was a Button (VRButton). Then came the challenge where we weren’t able to call the browser’s default javascript objects in the React components as everything runs as service workers and at a point, we had no leads to follow.

But there was a solution for accessing them by writing native module classes in the

client.js

This doesn’t end the trouble, as per the documentation, we could call a callback ONLY ONCE from the

client.js

So basically the real-time listeners for the peer logic, firebase integration and voice recognition were done by creating native module functions to be handled at the

client js

The end game….

All that’s left is to integrate all these ‘mini-projects’ and get it working. After working on it for a month, we finally finished Virtual Galaxy. 

It was possible to accomplish this humongous task only because of excellent teamwork. We got constant support and mentorship from our Dev Circle Lead, Magesh Sathasiva Pandyan‎ who set up talks in relevant fields like VR and Data Science during build days.

After all this hard work, we failed to submit the project on time……. It was heartbreaking.

We had already finished testing the final product way before the stipulated time. All we had to do was to shoot the demo and upload it. But things did not go as planned.

After getting the videos ready , we figured it was time to key in details for the submission page.What we did not anticipate was that there would be a lot of details to fill out.

Submission problems are pretty common, especially at the last moment. Unfortunately, we couldn’t upload our youtube video links on time as we faced a lot of network traffic.

We were devastated and unsure how to get out of the turmoil.

We contacted Mr. Magesh and all possible PoIs. We put our videos everywhere in hopes of attaining support from others and contacted Facebook directly requesting them to reconsider our submission.

Facebook’s Developer Circle representative contacted us immediately and after speaking with us requested Devpost for a re-submission. Since we had already pushed our code and other resources before the given time frame we were cleared and our submission was evaluated by Devpost’s judges. Hurray! We were thankful that our submission got through.

Results!

We eagerly waited until October 16 for the results. The live session had already ended, but we went through it keeping our fingers crossed.

At first, we thought since India comes under Asia, we are included in the Asia Pacific Category.

We were torn to find out we did not even make it to the top 3. But as we continued through the video, the announcer, Jenifer Fong, said ” from India, first place goes to Virtual Galaxy, second place …”, we freaked out.

We qualified for the global round now and working hard to improve our project which has to be submitted before the 30th of October.

We are planning to release all our intricate React360 hacks as npm libraries. This is to open source and help the React360 community.

We also plan on publishing tutorials on how we built and integrated WebRTC, realtime web sockets (Socket.io), firebase with React360.

I hope we win the global round as well!

— Team Virtual Galaxy