It was around August 2019 when my friends and I attended our first in . We were third-year computer science undergraduates at , absolutely addicted to hackathons and building cool things that made a difference. Facebook Developer’s Circle Build Day Chennai Sri Sivasubramaniya Nadar College of Engineering (SSN) 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 ( for over a year and in the process, won 3 hackathons and lost 3 of them as well. MERN) We came to know about which is conducted online globally every year, through our Developer’s Circle Chennai Lead, Mr. Magesh who got us to participate in it. Facebook’s Community Challenge Hackathon, 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 . Along with other cash prizes 25,000 USD Submission phase Regional winners announcement Global winners (Grand finale) There are even bonuses and other cash prizes, so this is a great initiative by to help out the community by offering a pool of cash prizes at 165,000$ every year to ambitious and talented developers! Facebook 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 and other sources could not offer much help. Stack Overflow 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 and — Nimish Santosh 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 through to get back voice input converted to text. webkitSpeechRecognition API p5’s libraries 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 , homophones and the sequence of occurrence of words to determine the command the user was trying to use. trie This worked well, provided you had a good microphone. and — Nikamanth 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 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. cosine based vectorized technique under collaborative filtering technique 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 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. custom virtual keyboard But there was a solution for accessing them by writing native module classes in the file. Now the problem boiled down to a simple async call to the native module function from the react component. client.js This doesn’t end the trouble, as per the documentation, we could from the function. To tackle this we had to make that add the function to the event loop after each time the async function gets completed, without flooding the event stack. call a callback ONLY ONCE client.js recursive calls So basically the real-time listeners for the peer logic, integration and voice recognition were done by creating native module functions to be handled at the . firebase 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, who set up talks in relevant fields like VR and Data Science during build days. Magesh Sathasiva Pandyan 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 goes to , second place …”, we freaked out. India, first place Virtual Galaxy 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
![featured image - How We Won Facebook Developer’s Circle Community Challenge 2019 [India Chapter]](https://hackernoon.imgix.net/drafts/4y25325z.png?auto=format&fit=max&w=3840)
