Frogii

Frogii's user interface!
Frogii's user interface!

Inspiration

I was heavily inspired by study music videos on youtube. On those videos, they would display a cute picture with music playing in the background. It was this exact video that sparked the idea for frogii: link. From there, I got inspired to fuse a lot of the things I like to use when studying into one app.

What it does

Frogii is a productivity and relaxation app with a target demographic of students! Frogii's goal is to at least make your day better, or make studying a bit more enjoyable! Frogii can play music, generate motivational quotes and has a pomodoro timer to use.

How we built it

I used visual studio code and live server to run the website while writing the code. Overall, I used html, css and javascript to complete the website. The prototype was made on figma, and the frog illustration was also made by the vector tool on figma as well.

Challenges we ran into

I had a lot of positioning issues with html and css, and it was my first time using an overlay. I ended up using a lot of grids to format the page properly. I also made a lot of careless mistakes in javascript, which made debugging harder for myself because I couldn’t find where I misplaced syntax.

Accomplishments that we're proud of

I recently learned git, and I’m proud that I was able to practice using it in this hackathon! I’m also happy that I was able to complete most of what I wanted. In my previous hackathon, I wasn’t even able to complete ⅓ of what we planned.

What we learned

I definitely learned more about javascript, and got to get more used to the syntax. In addition to that, I got a little bit better at making my websites more responsive. It’s definitely not fully responsive, but it can still hold its shape when full-screened on 2 different aspect ratios.

What's next for Frogii 🌱

Animate the frog! I want it to move depending on buttons the user chooses (i.e when they play music, the frog will do a little dance)
Allow users to pick their own music (link Spotify, Youtube, Itunes)
Let users decide the length of the timer, instead of the built in 25 and 10
Make the website more lively and less static