github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5916 Commits
209 Branches
4 Tags
445 MiB
 
 
 
 
 
Tag: Branch: Tree: 9948873866
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '9948873866'
${ noResults }
developer-roadmap/src/data/projects/pomodoro-timer.md

2.5 KiB
Raw Blame History

title description isNew sort difficulty nature skills seo roadmapIds
Pomodoro Timer Create a pomodoro tracker application for productivity true 28 intermediate Frameworks [HTML CSS JavaScript Frameworks] [{title Pomodoro Tracker} {description Create a pomodoro time tracker application for productivity tracking.} {keywords [frontend project frontend frameworks javascript frontend project idea]}] [frontend]

The goal of this project is to learn and practice frontend development skills by building a Pomodoro Timer, a productivity tool based on the Pomodoro Technique. The Pomodoro Technique is a time management method that uses a timer to break work into intervals (typically 25 minutes) separated by short breaks.

Requirements

You will create a Pomodoro Timer web application using the frontend framework of your choice e.g. React, Vue or Angular. Here is the list of requirements for the application:

  • User should be able to start stop and resume a pomodoro timer.
  • User should be able to configure the default interval configuration; default work session should be 25 minutes, short break should be 5 minutes and longer break after 4 work sessions should be 15 minutes.
  • Application should display the current session type (e.g., Work, Short Break, Long Break).
  • It should also track the number of tracked work sessions
  • Play a sound when a session ends to notify the user.
  • Ensure the app is accessible and visually appealing on both desktop and mobile devices.

You can use any existing pomodoro apps for the UI inspiration e.g.

Technical Requirements

  • Use HTML, CSS, and JavaScript (or a frontend framework/library such as React, Vue, or Angular).
  • Implement state management for the timer and session tracking.
  • Use a modular and reusable code structure.
  • Maintain proper accessibility standards (e.g., keyboard navigation, ARIA labels).

Feel free to deploy the application on GitHub Pages, Vercel or Cloudflare pages

By completing this project, you will enhance your frontend development skills while building a functional and customizable Pomodoro Timer application. This knowledge will prepare you for more advanced projects and improve your ability to create interactive and user-friendly web applications.