Sage | Devpost

Inspiration

Sage was inspired by a passion to create a platform that connects people with shared interests in order to communicate live. While scrolling through social media posts and group chats connects you with people around the world, there is no effective way to text and video chat with a group of people who share your interests in a specific topic. We aimed at a simple, but impactful solution. By creating a discussion platform that allows users to create and join temporary rooms with live chat, group video calls, collaborative white boards, interactive code playgrounds, and a vast multitude of alternative collaborative mechanisms, we were able to connect individuals willing to discuss topics they feel passionate about. While it is wise to learn from experience, it is wiser to learn from the experiences of others, and with a passion to create a more powerful social environment and bring people closer together in the light of this pandemic, we created this powerful platform.

What it does

Sage serves to fulfill one task: make a powerful live topic-based discussion platform. Biding by this mentality, Sage brings the act of collaborating and chatting with users into an intuitive interface. Users can use Sage to talk through text channels, voice channels, and drawing rooms with all the users who share your interests With Sage, users can create and join discussion rooms in order to create a curated feed of relevant rooms based on Facebook group interests and custom-input matching tags tailored to each user. Users have the ability to add and remove tags in order to better match them with rooms that match their interests. Sage takes the task of learning from new people and forging new experiences in a time of need and transforms it into an enjoyable task as numerous features simplify the job at hand while providing an elegant UI.

How we built it

Sage was built on a variety of technologies. Initially, front-end design was done using Diagrams.net for rough, preliminary planning, and later with Figma, focusing on the major parts of the app. From there, our team split up front-end work and back-end work amongst ourselves. The Front-end was built primarily using React and MaterialUI with the integration of Facebook for Authentication as well as the possibility to get generic data to help create “recommended tags” for users on our app. Furthermore, our real-time communication and collaboration mechanisms were set up through an Express server with Socket.io implementation. This allowed us to transform what would have been a very static format of communication into a more dynamic, interactive experience. The data was stored using Amazon Web Service’s Relational Database Service - specifically through a mySQL database and PHP for our API routing and endpoint creation. Communication between the front-end and back-end was done using JQuery, and we used domain.com to get a custom domain for our API as well as the web application itself.

Challenges we ran into

Sage ran into a few challenges with fleshing out t working with the Facebook API as well as with React and mySQL. Our team had a little bit of experience with React and mySQL so it wasn’t too bad, but we ran into a lot of small errors that had seemingly no plausible cause, so we ended up spending a lot of time on something very minor yet crucial. The React development process was especially slow at first due to some issues with project setup in the beginning, but we quickly gained momentum. In addition, we ran into the problem of running out of open API calls from Facebook, as we initially had an inefficient system for authentication and data retrieval. We lost a large amount of time in trying to explore some very new territory and argued about giving up that functionality, but ultimately decided that we would keep trying because exploring new territory is what a hackathon is all about! :) Eventually we were able to figure out how to use the APIs and it turned out even better than we expected. With cooperation and teamwork between all our members, we were able to turn difficult situations into memorable ones.

Accomplishments that we are proud of

Sage was actually the first time a few of us encountered/actively used technologies like Socket.io and Express and that quickly became a fulfilling experience in itself. Furthermore, considering the time span, it was both stressful and exciting to learn these technologies to get to development as soon as possible while retaining the information for later use. Most of all, as individuals who have done hackathons in the past and seen our share of failure, we felt extremely proud about the amount of code that we ended up getting written and the functionality that we were able to implement. Of course, there was still more that we wished to have done, but when compared to the first hackathon that we had done together, the progress that we made in becoming a more functional team over a mere three hackathons really showed The UI design aspect in particular shined in our project which was an equally pride-worthy moment. In addition to that, we were very, very happy to get the functionality down for real-time messaging and drawing boards within each class. It was a struggle, but the fun and worry in pulling something off at the very, very last second was an amazing experience for us all.

What we learned

As a team, we undeniably learned many new things about newer technologies that shaped the course of our project. Outside of our code, we learned more about the time constraint and the importance of planning/sticking to the plan. We saw ourselves drifting towards more ambitious goals, but learning to stick to the essentials and create something that simply works was a great learning. In essence, we learned the importance of making a product that is impressive, scalable, and dynamic in order to maximise effectiveness. In terms of technologies, we learned how to better use Socket.io functionality, Express, and React alongside how to work well collaboratively in order to host our web application and store data in the back end. Alongside that, as we were starting to run out of time, we were forced to step out of our comfort zones and take on new, different tasks.

What's next for Sage

Sage definitely has the capacity to go much further than it is now in the form of extra features and integration. While we have added Facebook signup integration, we could also use Facebook’s Ad Interest API to automatically create relevant tags to personalize content. We could also add more features, such as screen sharing, and integrate other services into the app, making for a richer experience, such as notifications, mentions, and file sharing. With these features, we can allow for a much better user experience and stick with our core mission of bringing people together in a fun, interactive, and dynamic manner to help build connections.