Hobby Harbor

The perfect hub to find a new hobby and meet new people! Boasting over 700 different hobbies, Hobby Harbor is sure to have at least one new skill or interest that you'll be dying to try out.

Comment

Inspiration

I'm someone who loves learning new things and seeing myself improve over time. But sometimes, it can be hard to get out of your bubble and try out new things... Seeing how the theme for this year's HackBeanPot was "Exploring the Ocean", I feel like a website encouraging people to explore new things was a perfect project to work on!

What it does

Hobby Harbor is a very simple website that acts as a sort of database for users to find new hobbies to explore. Using the handy search feature, people can find a specific hobby they are interested in or, if they aren't completely sure on what they are looking for, can find a bunch of hobbies that fall under a broad category.

How we built it

Completely built with simple HTML, CSS, and Javascript. Considered using a framework, but ultimately decided against it as web development is still very new to me. Also used templates provided by bootstrap because they look very nice and I suck at design :(

Challenges we ran into

A good first half of programming for me was trying to figure out what tech I wanted to focus on. I wasted a bunch of time downloading web frameworks like React, just to not use them in the end. It was also a sharp learning curve trying to tackle a web framework after just learning about the basics so I am glad I decided to drop it halfway.

I also realized that even though the syntax of JavaScript is similar to other languages I have worked with, there are many features unique to the language that definitely threw me for a loop and slowed down the development process. I do really like JavaScript though and I want to try working with it more in the future.

Another challenge was trying to figure out how to obtain images for every hobby profile without completely wasting my time and going insane. Still haven't found a solution to that as you will notice the images aren't exactly related to its corresponding hobby.

Accomplishments that we're proud of

I'm really happy with how the filter/search function turned out. Also being able to "mass-produce" the profiles for all the different hobbies using the tag in HTML in conjunction with JS was also super satisfying. Seeing the website go from a blank slate to a populated webpage was very satisfying.

What we learned

I learned a lot about the relation between HTML/CSS and JavaScript. This project barely scratched the surface in terms of what is possible in web development and I want to experiment with more features/challenges.

What's next for Hobby Harbor

I genuinely think Hobby Harbor can be really cool. I want it to become more self-sufficient. In other words, Hobby Harbor should have the ability to be its own standalone community/social network.

In the future, I would love to implement an account system, community chats for each hobby so newbies can talk with veterans, more resources to learn about each hobby WITHIN the website itself and not just a link that redirects you somewhere else, etc. I'm definitely going to return to this project and improve it one day once I'm more experienced.

Built With

Share this project:

Updates