friend circles

• 

  home screen

• 

  after interacting with it

Inspiration

I was inspired by habit tracking apps and how we describe friend groups as "circles" to create a web app for myself that can visualize, track, and allow me to reflect on social relationships.

I was also inspired by nature and the idea of creating a digital landscape.

What it does

It's a virtual home for strengthening irl relations!

• It displays the names of the 15 most important people in my life, sorted into three different circles, namely college, family, and high school
• If I've been in touch with a particular person, I can simply click on the circle with their name so that it goes green and increases in size to indicate a thriving relationship. After some time, the circle goes back to it's default state of being grey. Only for demo purposes, the time duration for each circle to return to it's original state is set to one minute –– ideally this would be over longer timescale like a day or two.
• On each reload, the web page displays a random prompt with a specific action that aims at nourishing a relationship in my life.
• Also includes gratitude text box for one social interaction that day that I'm grateful for, whether it is catching up with an old friend or a serendipitous collisions.

How I built it

I built this with React.js using Repl as my IDE.

Challenges I ran into

Shortage of time for building out more functionality such as having the user input names, preserving states over time/when refreshed, etc.

Accomplishments that I'm proud of

Creating a visually pleasing MVP of my idea!

What we learned

• I can kind of prototype an idea in a relatively short amount of time if I focus
• Got more experience with web design and React

What's next for friend circles

• Creating more animations to show when a relationship is flourishing vs when it's withering
• Preserve state
• Improve features/interactivity
• Maybe launch it!

Built With

• javascript
• react
• repl