• 

  home page

• 

  explore page

passionfruit!

a simple website for anyone to discover a new passion or hobby

• explore page with links to specific hobbies (reload for new list)
• has a meter that shows an popularity rank from 0-100, with 0 as not popular and 100 as very popular
• resources for further exploration of the hobbies
• another page to visualize all the hobbies as bubbles on the screen (not finished)

Dev Notes

What it Does

So, I think that a lot of people might not know what they want to do with their free time or as a career, so I decided to make a more visually appealing to find hobbies. In the current version of the website, the main thing is the explore page that displays random hobbies with an interest rank from 0-100 and a link to the Wikipedia page for it. The interest rank on the explore page is pretty ambiguous without a tooltip... Also, I called it "passionfruit" because, like, people have passions...

How I built it

I started out with the data part, using BeautifulSoup to scrape Wikipedia's list of hobbies and then used the unofficial Google Trends api (not really) called pytrends to give a value for how widely searched a hobby is. Then I did the UI/UX with React, Bootstrap, and routing with hookrouter (even though hookrouter almost broke npm). Firebase was really simply to do hosting with, so thanks Google.

Challenges we ran into

Hmmm...there were a lot, and I don't have time to list them :)

What I learned

Haha... what did I learn? Find teammates. Work fast. Web design takes too long. Webpack compiles react apps for firebase nicely. Don't wait until the last minute to record the video demo. Graphic libraries for the web are complicated to interpolate. Some R&B music is actually really good. 429 errors are terrifying if you are using an "unofficial" api. Do your homework before you dedicate two days of your life to a hackathon. Javascript is quirky.

Built With

• aseprite
• beautiful-soup
• bootstrap
• firebase
• pytrends
• react
• two.js