Skip to content

๐Ÿ… Pomodoro Countdown App: Boost productivity with this React-based time management tool, featuring TypeScript, Styled Components, Context Provider, Local Storage, React Hook Form, and Zod validation. ๐Ÿš€

Notifications You must be signed in to change notification settings

GiovanniOliveira75/pomodoro-countdown-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

5 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Pomodoro Countdown App

The Pomodoro Countdown App is a time management tool built using React with TypeScript. It leverages Styled Components for styling, implements Context Provider for share data across components, utilizes Local Storage for data persistence, and employs React Hook Form for form handling with Zod for validation. This app is designed to help you boost your productivity by breaking your work into focused intervals, typically 25 minutes each, followed by short breaks. This technique, known as the Pomodoro Technique, can enhance your concentration and productivity while reducing the feeling of burnout.

Features

  • Pomodoro Timer: Set a timer for your work sessions and break times.
  • Task Tracking: Keep track of your tasks and completed Pomodoro sessions.
  • User-Friendly Interface: A clean and intuitive interface for a seamless user experience.

Tech Stack

  • React: A JavaScript library for building user interfaces.
  • TypeScript: A statically typed superset of JavaScript.
  • Styled Components: CSS-in-JS library for component styling.
  • Context Provider: For share data across components.
  • Local Storage: For data persistence.
  • React Hook Form: For handling forms.
  • Zod: For form validation.

System Requirements

Before you can use the Pomodoro Countdown App, make sure your system meets the following requirements:

Getting Started

To use the Pomodoro Countdown App, follow these steps:

  1. Clone the repository to your local machine:
git clone https://github.com/GiovanniOliveira75/pomodoro-countdown-app.git
  1. Open the app in your preferred code editor.

  2. Install the required dependencies using the package manager of your choice:

npm install
# or
yarn install
  1. Start the app:
npm run dev
# or
yarn dev
  1. Access the app in your web browser at http://localhost:5173.

Acknowledgments

  • The Pomodoro Technique was developed by Francesco Cirillo in the late 1980s. Learn more about it here.

About

๐Ÿ… Pomodoro Countdown App: Boost productivity with this React-based time management tool, featuring TypeScript, Styled Components, Context Provider, Local Storage, React Hook Form, and Zod validation. ๐Ÿš€

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published