Butterfly Effect

In this world of constant movement and results, it is hard to keep track of the small achievements you make, especially if they aren't celebrated by a medal or acclamation. Too often people are judged by the final result; everyone sees a shiny new medal on the shelf, but they don’t see the late nights, the continuous grit, the failed attempts, the tiny breakthroughs, or the continuous growth that made it all possible. That journey deserves to be told, that tiny breakthrough celebrated—and we wanted to show you just that. Inspired by the Butterfly Effect, we set out to visualize how seemingly insignificant actions gradually shape our skills, experiences, and identity. Butterfly Effect celebrates the path that you took to get there, not just the result.

What it does

Currently, Butterfly Effect transforms a GitHub profile into an interactive constellation.

Each programming language becomes the anchor of its own constellation, while repositories become like stars part of that constellation using an algorithm that organizes dense clusters into a clean, readable sky. Rather than browsing a flat list of repos, users can explore the interactive sky that reflects their technical interests, experience, and growth.

That constellation then turns into a year-in-review called the Butterfly Wrapped, which turns that constellation into a personalized recap of your improvements, highlighting mini-achievements and celebrating overall growth.

Finally, Polaris, our AI growth coach, analyzes the same constellation and provides personalized recommendations for what to learn next based on the user’s existing experience instead of a generic learning roadmap.

How we built it

For our frontend, we used the Next.js framework with React, styling our platform with TailwindCSS. We also used the GitHub REST API in order to fetch user data and generate insights. For the user's coding constellation, we implemented a layout algorithm in Typescript to generate a unique constellation based on the total number of coding languages the user has built a project in. We also used Typescript to score a user's technical activity given a user's GitHub commit data across all repositories, and from that score, used React to render an interactive storybook detailing the user's accomplishments.

Challenges we ran into

When designing the visualization, we ran into an issue – when developers have lots of repos to look through, simply connecting them to a node in the middle with a straight line would be very cluttered and hard to see. Instead, we developed a dynamic layout to separate dense clusters while preserving their relationship to that middle node—hence the constellation structure. Additionally, not everyone on our team had prior experience with GitHub, so we had to spend some time learning its developer ecosystem and API in order to start importing data.

Accomplishments that we're proud of

Creating a polished visual identity inspired by the night sky and the Butterfly Effect.
Building a scalable graph layout that remains clean, legible, and beautiful as projects grow.
Integrating AI into both storytelling (Butterfly Wrapped) and personalized coaching (Polaris).
Turning a static GitHub profile into an engaging, interactive experience that tells a developer's story.

What we learned

Since some of our teammates were unfamiliar with GitHub, we learned how to navigate GitHub’s developer ecosystem and collaborate effectively as a team.

What's next for Butterfly Effect

GitHub is really just the start.

In the future, we imagine Butterfly Effect incorporating tools such as Notion, Google Calendar, LinkedIn, and many more to create galaxies of constellations that represent the whole little universe that is a person.