Resonate

Welcome
Login/Sign up
Create your unique post
Resonate with others!
Connect with others just like you!
Personal Profile

Inspiration

Our inspiration for creating Resonate was to make a website where underrepresented genders can come together, share their experiences, and build connections. We noticed that underrepresented individuals sometimes feel like they don't belong, and their voices aren't heard. Therefore, we created Resonate to provide a safe space where people can find others who share similar interests and goals. We believe it's important to have a platform where everyone feels included and supported.

What it does

The web app takes text input from the user and uses Cohere's "Entity Extraction" and "Text Classification" APIs to categorize the user's intention into tags, such as "gym buddy", "eat out", "study buddy", and "look for a mentor". Additionally, it generates tags by extracting keywords from the prompt. Users can also edit and specify the tags they want. During the matching process, the app pairs up users based on the tags generated from their prompts and any additional ones they manually added. Users can then chat with their buddies and arrange to meet in person for activities, such as exploring a new café, studying together for a midterm, or discussing topics related to their field of interest.

The web app also includes a page where users can post questions and answers, as well as resources such as links and videos. Cohere's "Content Moderation" API is used to flag and delete any posts with inappropriate content.

How we built it

First, we discussed the main features that we wanted to include in our app, and then decided whether to create a mobile application or a web app. Team members worked on designing the app using Figma, and added more details and pages until we covered the functions we wanted for our web app. Next, we started constructing the actual website using HTML, CSS, and JavaScript based on the Figma design.

Challenges we ran into

As it was our first time using Figma, becoming familiar with the various functions and how to construct a prototype was quite a challenging but exciting experience. Implementing most of the design with HTML, CSS and JavaScript in a short period was also quite difficult, as we had many pages and functions that we wanted to implement. Dealing with user input and making requests to the API also took quite a lot of time to figure out.

Accomplishments that we're proud of

Having an awesome and aesthetically pleasing prototype was very gratifying, as we were able to implement all the functions that we wanted into the design, as we also had transitions between the pages (e.g. animation when a user first opens the page and while matching). We are also very proud of being able to convert a design (images and text) to an actual website (HTML/CSS/JavaScript).

What we learned

We learned how to use Figma to design and create a prototype for our website, which was a new experience for all of us. We also learned to be flexible and plan efficiently, which was essential for this project as there was much to be done in the short timeframe. We had to search for resources on Google and rapidly learn new technologies. Collaborating on a project in real time also allowed us to enhance our skills in teamwork.

What's next for Resonate

If we are to continue working on Resonate, the next step would be to convert the entire Figma design into HTML/JavaScript/CSS while preserving the most critical functions, such as processing all user input and providing suggested labels. Additionally, we aim to include more tags, particularly those that are manually added frequently, to make the platform more inclusive of diverse individuals and their interests and goals.

Built With

Submitted to

cmd-f 2023
- Winner Diversity in CS Project Hub

Created by

I was responsible for designing the UI and prototype of our project. Working on this project provided me a valuable learning opportunity. This was also my first time using Figma, I learned quite a lot from this experience :)

Corina Dong
I came up with the project idea and worked on the front-end, using HTML5, CSS3 and JavaScript to replicate the Figma demo created by our team's designers. In addition, I had a great experience learning the Cohere API and touched on a little bit of back-end work.

Hanzhi Chen
I contributed to brainstorming what our app should be like, as well as designing the UI and creating the prototype of our project.
It was my first time designing and using Figma, and I learned immensely from this experience.

Josephine H
I worked on the design part, using Figma to design the UI/UX. I also helped with project management, coming up with the project name and refining project ideas.

Jiawei Liu