I love wasting my time down rabbit holes browsing through Wikipedia articles, and I wanted to build a nice and simple UI to accompany that process!
What it does
RabbitHole populates cards with information and descriptions about related Wikipedia articles. A user can click on any of these cards, and the app will open up the Wikipedia article about that card. You can also search for a topic if you're interested in something specific. I also wrote up a Bookmarklet feature, so that if you're already on Wikipedia, you can open up RabbitHole with cards about that page that you're already looking at.
How I built it
Challenges I ran into
I had a lot of trouble with the idea of React re-rendering on state changes. I would change the state of my application and expect the app to reload, but often it wouldn't, or it would complain that I had an undefined value in my state. I finally realized that state updates are asynchronous, which made developing a lot more complicated.
Accomplishments that I'm proud of
I went into this project with absolutely zero experience in React, and I was able to finish up a functioning application with multiple components! I also have little experience in front end in general, so I was able to brush up on concepts like statefulness and API interactions.
What I learned
The most valuable thing I learned from this project was passing down information between components in React after each component individually renders. This project really showed me the beauty of React, in that only parts that get new data have to reload, making applications much more quick and enjoyable to use.
What's next for RabbitHole
I really wanted to implement a trending feature, where I could store searches that people make on RabbitHole and show users the most popular articles being viewed right now. Also, I was planning on writing up code to let users see their "bread crumbs", and see the rabbit holes they've been down in their current session.