PomoFlow is a Pomodoro Technique integrated productivity app that works on desktop & mobile browsers built with React, Express, MongoDB and graphQL.
- Decide on the task to work on selecting from the task list
- Set pomodoro and break timer.
- Start the timer and focus on the task.
- Take a break for 5 minutes when the alarm ring.
- 1x pomodoro( = tomato) added to your counter at the end of each pomodoro.
- Pause, resume and reset timer
- Circular progress indicator
- Customizable timer intervals to suit preference
- Responsive design that works with desktop and mobile
- Ability to group tasks for each project.
- View the list of projects and tasks working on in one glance
- Audio notification at the end of a timer period
- Ability to check your focus time and breaks visualy and audibly using pomodoto timer
- Color transition to switch moods between focus time and break time
- Weather card to check today's weather focus to help plan the day ahead
- Timer circle bar change the colour as progress.
- Ability to delete all related tasks with a project deletion.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Responsive web design
- React - JS library
- GraphQL - For API queries
- MongoDB Atlas - For cloud database
- Express - For Node.js web application framework
- Bootstrap - For styles
- Zapsplat - For sound effect
- React-icons - For icons
- Figma - For favicon & logo design
- OpenWeather - For weather API
- Axios - Javascript library to make HTTP requests
- useSound - For sound effect
- How to Create an Animated Countdown Timer With HTML, CSS and JavaScript - This is an amazing article which helped me finally understand SVG animation. I'd recommend it to anyone still learning this concept.