Knotty

Inspiration

We notice that sometimes, during networking events, after connecting with new people through LinkedIn or any other social media platforms, we might forget who we added and why we added them. This situation also might happen when we try to keep in touch with large groups of people in a classroom or at a conference. Hence, there should be a solution to manage the different relationships that a person has, to not only keep in touch, but also provide a quick reference on whom we can ask for help.

What it does

Our website visualises all the relationships that the user has in graphs. From the centre node named You, several nodes are connected to it, each representing a category of relationships, such as friends, family, business, etc. Users can click on each category node to see their contacts or subcategory nodes. For each person users are related to, they can save important information such as name, contact information, and additional notes.

If a user has a LinkedIn account, they can download a CSV file that contains essential information about their connections and upload it to our website. Additionally, if any categorised node has too many relationships, users can use the search bar to filter out relevant contacts, thereby reducing the number of people connected to that node. Finally, there is an AI agent that helps users create new relationships or make immediate changes to any current contacts.

How we built it

For the user interface, we use React, vite.js, JavaScript, CSS, and HTML
For graph visualization, we use the library d3.js
For Cloud/Backend, we use Cognito for sign in system, s3 for cloud storage, and amplify for deployment
To build our chatbot, we use a Gemini API key

Challenges we ran into

First of all, it took us a few hours to come up with and finalise this idea, since we want to create a product that is as unique as possible. After that, we ran into some implementation problems, such as choosing the most appropriate library to display the graph and integrating a Gemini model to build an AI agent that supports users using the website. Additionally, at the beginning, we struggled with using AWS cloud services, including Cognito, Amplify, and s3. Finally, there have been major arguments about the choice of designing the user interface for our website to be user-friendly with students and adults, who are our target users.

Accomplishments that we're proud of

We finally found a solution for managing different relationships, since we usually know a lot of people, but do not always remember all of them.
For the first time that we use AWS services to deploy a website, Knotty has been able to conduct standard sign-up or log-in systems
We finished this project 2 hours ahead of the deadline.

What we learned

How to call the API from Gemini models to build a chatbot.
How to use cloud services from AWS such as Cognito, Amplify, and s3.
Selecting different libraries to display the relationship graph.
Collaborate under an intense schedule.

What's next for Knotty

Improving the user interface such that it supports accessibility features, including but not limited to: dark mode, text size, screen readers, and keyboard navigation
Collect real users' feedback to improve web experiences and consider deleting or adding new features.