Project-Debately at HackOn 2.0 : Third Prize Winners

Gatij Taranekar
HackOn
Published in
3 min readJun 24, 2021

About the Hackathon

HackOn 2.0 was a fully online, largest student-led hackathon, where around 8000+ students registered and 350 + teams participated in this 2-day long hackathon where students from all around the globe worked on some very innovative and wonderful ideas, towards solving many real-life problems. The four themes provided to us were Mental Wellness, Diversity and Inclusion, COVID-19 Impact, and Open Innovation. We built our project revolving around the theme, Diversity, and Inclusion. We were able to build this project because of some amazing sponsors such as Symbl.ai, Magic, MLH, and GoDaddy. Our team (Team Tier-4), developed a debate platform (Debately), using Symbl.ai API to analyze the audio during the debate and we used the Magic API for user registration and login.

Here’ s a link to our submission: https://hackon.hackerearth.com/challenges/hackathon/hackon/dashboard/e90aeb1/submission/published/debately/

Problem Statement

Our team believes that debates help us have healthy discussions, and solve problems within the society which helps to build a diverse and inclusive society, but since the last few years online and TV debates are downgraded. We have to build an AI-based audio chatting web app using react, webrtc and Symbl.ai to conduct and practice healthy debate. All the team members of tier-4 are of different political ideologies, but debates have helped us to share experiences, solve problems and work together in a team. We decided to build a tool using which people could have healthy debates and conversations. This led to the development of Debately.

Inspiration

Communication is the bridge between confusion and clarity. Communication is at the root of recognizing the diversity and boosting inclusion. This was the inspiration for Debately. Study. The idea of two individuals, having a conversation, hearing what isn’t being said, and expressing their ideologies, without fear of hate or unacceptance, had to be brought to life. Debately accomplishes precisely that. Individuals from all around, irrespective of race, religion can come together and debate on controversial or sensitive topics, share their side, or pour their heart out, or simply improve their language and communication skills while maintaining anonymity.

Tech Specifications

The following was our tech stack

  • Front End: ReactJS, Magic, webRTC
  • Back End: FastAPI, MongoDB, Symbl AI, Firebase

ReactJS:

ReactJS allowed us to divide our front-end into various components and integrate these components whenever and wherever required. Also, there are very good state management API that comes inbuilt in ReactJS which makes managing and sharing of states between various components very easy.

Magic:

Magic Links provide a way to authenticate users without a password. Developed by Fortmatic, a Magic Link is a link that is generated by the Magic SDK whenever a user signs up or logs into an application.

When a user signs up or logs in, the following occurs:

  1. A magic link is generated and sent to the user’s email address
  2. The user clicks the link and magic authenticates the user
  3. If successful, the user is redirected back to the original point of authentication; if unsuccessful, an error page is shown

Implementation for Magic links in our project was inspired by this blog

https://blog.logrocket.com/authenticating-react-applications-with-magic-links/

webRTC:

With WebRTC, you can add real-time communication capabilities to your application that works on top of an open standard. It supports video, voice, and generic data to be sent between peers, allowing developers to build powerful voice and video communication solutions. The technology is available on all modern browsers as well as on native clients for all major platforms. The technologies behind WebRTC are implemented as an open web standard and available as regular JavaScript APIs in all major browsers.

Audio streams were captured using the browser’s navigator API and using webRTC’s mediaStream object, it was shared among the participants of the debate room. Using firebase and webRTC connection objects a connection was set up between the debaters. The same audio streams were also shared with Symbl AI’s servers to analyze the audio in real-time.

Fast API & MongoDB:

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints. MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB

--

--