We saw a Wikipedia link game in the wild and thought that it would be cool to be able to visualize the links you go through as a graph. We then thought about Wikipedia rabbitholes, and it all fit together.
What it does
When you start a session, rabb1thole tracks the Wikipedia pages that you visit and how long you spend on each. When you feel like you've gone deep enough, you can end the session, and rabb1thole will show you a visual representation of the path you took!
How we built it
We built a Chrome extension that is able to track the pages that the user visited, and sent the pages visited to our backend on our website, which then generated the visualization. The extension and website were built in HTML, CSS, JS, and React, while the designs were made using Adobe XD and Figma.
Challenges we ran into
- Getting familiar with the scripts in a Chrome extension/auth
- Figuring out what to put in the UI.
- Connecting backend and frontend in the extension frame.
- Generating a visual representation of an array ## Accomplishments that we're proud of
- Finishing on time
- Coming up with the idea
- Cute UI design
- Figuring out how auth works
- Debugging it enough so that it works ## What we learned
- Do not sleep late
- It's better to make everything in components and put them together than to save them together
- More communication is always better ## What's next for rabb1thole
- Allow user to choose what domain to start in
- Different visualizations
- Continue button
- More streamlined UI
- An auth that actually works reliably