-
Main Timer + iOS 15 Default Wallpaper
-
Settings (Timer)
Inspiration
I saw Pomodoro Timers on the Mac App Store, and thought they were a cool thing and kept them in mind. As soon as I saw the Productivity theme, the first thing I thought of was a Pomodoro Timer, and I've always imagined making some type of clock app that looked simple and was very customizable. I took that idea and turned it into a Pomodoro timer.
What it does
A Pomodoro timer is a productivity timer method that works by starting with a Pomodoro timer, by default it's at 25 minutes. When the time is up , it goes on to a 5 minute break. Once time is up, the cycle repeats until the 4th Pomodoro. When the 4th Pomodoro is up, the long break comes up, usually 15 minutes long.
How we built it
Straight from scratch using just HTML, CSS and TypeScript. Using things like Flexbox and Grid, it makes it easy to make a good layout easily. The design of the website was inspired by multiple other Pomodoro Timer websites. I took account the customizability, usefulness and simplicity of each one, which most of them only excelled at one of them. I wanted to take all three and put it into one product.
Challenges we ran into
Definitely the settings menu. This is the first time i've used CSS grid, and it hasn't been an easy experience to work with, especially without any prior knowledge. I'm just experimenting with it, and it's been a tough time. The final product will not have a very polished settings menu, but I 100% made sure that it was functional.
Accomplishments that we're proud of
The implementation of features like custom backgrounds, fonts and sounds. Those are features not seen on a lot of other pomodoro timer websites, and I'm happy that I implemented it and it looks extremely nice. I also think the overall layout of the main timer (excluding the settings menu) looks very nice and clean, what you want in a minimalist pomodoro timer.
What we learned
CSS Grid, switching menus more effectively rather than having multiple functions doing mostly the same thing. Testing is very important, Reading inputted files and using them, and having fun while programming.
What's next for PomodoPro
I will still be working on this project. Adding a web worker that lets the website run more effectively in the background is the priority, then I can fix up the menu and potentially add more features, clean messy code, and much more. This will be a project I will be maintaining for the near future.
Log in or sign up for Devpost to join the conversation.