-
-
Notifications
You must be signed in to change notification settings - Fork 40.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f629987
commit 67d8fcc
Showing
1 changed file
with
53 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
--- | ||
title: 'Pomodoro Timer' | ||
description: 'Create a pomodoro tracker application for productivity' | ||
isNew: true | ||
sort: 28 | ||
difficulty: 'intermediate' | ||
nature: 'Networking' | ||
skills: | ||
- 'HTML' | ||
- 'CSS' | ||
- 'JavaScript' | ||
- 'Frameworks' | ||
seo: | ||
title: 'Pomodoro Tracker' | ||
description: 'Create a pomodoro time tracker application for productivity tracking.' | ||
keywords: | ||
- 'frontend project' | ||
- 'frontend frameworks' | ||
- 'javascript' | ||
- 'frontend project idea' | ||
roadmapIds: | ||
- '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. | ||
|
||
- [time.fyi - Pomodoro Timer](https://time.fyi/pomodoro) | ||
- [Pomofocus - Pomodoro Tracker](https://pomofocus.io/) | ||
|
||
## 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](https://pages.github.com/), [Vercel](https://vercel.com/) or [Cloudflare pages](https://pages.cloudflare.com/) | ||
--- | ||
|
||
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. |