diff --git a/src/data/projects/pomodoro-timer.md b/src/data/projects/pomodoro-timer.md new file mode 100644 index 000000000..88d2db60d --- /dev/null +++ b/src/data/projects/pomodoro-timer.md @@ -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. \ No newline at end of file