One of the defining features of humans is our ability to interact and work together. Our team remembers the days when we could go and find a study group in a library, or meet up with a friend to cram for the next test. This action itself allowed us as students to be more productive and efficient. Since the shift to online learning for the past year, most individuals, especially students, have been struggling with the loneliness while studying, as we don't know who's doing what. This is where we wanted to introduce Tether. We wanted to create a platform for people to find other that are working on the same tasks as them, so that they can easily converse with their new found peers and know that there's always someone to Tether with.
What does tether do
Tether allows people to see study groups depicted as graphs and nodes in an interactive dashboard. The user update what they are working on, whether its just relaxing, or studying for their class, and Tether will update the network to show who else is also doing the same. The users can choose to then talk via the chat function or make a group call, as if they were physically working together. Tether reveals study habits and who is in your classes, making the process of figuring out who is working on what if you need help, or just want to hang out extremely fluid and fun.
How I built it
The front end chat and main Tether ui are built with React. We also modeled the front end with Figma before we programmed it, to get a good idea of what we wanted the ui to look like. The network visualization is done with vis.js. All other styling has been done from scratch. The backend for the main ui is run by Firebase. We took advantage of Firebase's Firestore solution which allows integrating realtime updates to clients to be seamless. When new users log in with Firebase's google authentication service, the app will be connected to the realtime service and will update the network view. The video and text chat backends were done with Twillio's API. Twillio allowed us to create direct and group messaging and video.
Challenges I ran into
Learning react for this hackathon was quite difficult, as we were only exposed to the technology a few times. This meant our team was not very well versed with programming in Node.js, so it was challenging to use and integrate our React front end and Firebase. In addition time was a limiting factor in what we could add to our app. Though we got most of the important features in, the chat and video were not linked by button. We also wanted to add realtime translation to the the chat, as we only had a proof of concept.
Accomplishments that I'm proud of
The overall look and feel, along with how you can interact with our app was close to how we wanted the final product to look. Interacting with the network view and seeing the realtime updates come in made the experience very cool and interactive. Completing the main vision we had was awesome!!
What I learned
We all have learned enormous amounts about using React and Node.js. Specifically using React Hooks, asynchronous function and React Components were all used to make Tether possible. In addition we learned how to use the Twillio API and do voice, video, and chat all over the internet.
What's next for tether
We also want to have features to integrate maps for users to show were people are connect to you from. In addition, since we have access to data about when our users study the most and what they study, we want to add some ML to be able to analyze study habits and recommend connections to create better friend and study groups.
- connecting the chat with the main ui
- fleshing out the translate features completely and adding them to the chat and video