feed the frog!

"Eat the frog" and pomodoro, but better. Choose music that fits your mood and study subject, like an anime soundtrack to keep you energized (despite the lack of caffeine in your system).

Comment

Inspiration

We are a group of four high school students, who, like many others, have had many self-confrontational moments realizing our... lack of... good study habits. We wanted to make something that we would personally use, but also have a lot of fun making. We've been recommended and exposed to a wide variety of productivity approaches, but we prefer to listen to music while working and realized that different types of tasks require a different vibe of music. Hence, we decided to create feed the frog - a method to keep you focused on any task with music that matches your level of productivity.

tldr: frogs are just cute (and we procrastinate a lot).

What it does

A method to help you stop procrastinating. Although it is based off of popular studying methods, it doesn't need to stop at just that! Whether you are learning a new hobby, trying to improve your coding skills, journaling, or even washing the dishes, feed the frog is here to help.

How we built it

We started planning out the format of the website on Figma, and then used HTML, CSS, and JS to create it. All of the backgrounds and frogs 🐸 were drawn using Adobe Photoshop.

Challenges we ran into

It's been a long time since some of us have used HTML, CSS, and JS, and it has been the first for the others! Learning/ relearning these programs took a bit of time.

Our Accomplishments

This is the first hackathon for half of our team, and only the second for the others! Additionally, most of us only have experience coding within a classroom environment, so we're extremely proud (and relieved) that we were able to pull it off and successfully bring our vision to life.

What we learned

Throughout the process of creating feed the frog, we realized the significance of planning and brainstorming our ideas out. Organizing our process working from Figma to HTML, CSS, and then JavaScript allowed us to effectively bring our design to function.

What's next for feed the frog?

We have a lot of ambitious ideas on features we can implement in the future, once we get more comfortable with website design and JavaScript (and get more sleep). Here are some of the ideas we would like to add to improve feed the frog:

  • Adding Spotify music.
  • Improving the backgrounds by adding animations and more frogs (:D) to make it more interactive.
  • Adding a community function for people to discover and recommend playlists.
  • A function to work and listen to music alongside friends.
  • Adding customization for users to make it more personalized!
  • Having an app or a mobile version for easier access.
  • Different modes for user preferences - dark, light, focus mode.

Built With

Share this project:

Updates