rodrigofontesdev / pomodoro

A Pomodoro Timer to keep you focused and motivated built with React.

Pomodoro

A simple Pomodoro Timer app that will help you manage your time and let you focus on any tasks.

The purpose of this project was learn about important tools and concepts of React. Like CSS-in-JS, routes, hooks, controlled and uncontrolled components.

Prerequisites

• Node.js
• Git

Getting Started

• Clone the repository (git clone [e-mail]:rodrigofontesdev/pomodoro.git)
• Install dependencies (npm install)
• Run application (npm run dev)

Features

• Add a new cycle
• Interrupt a cycle
• Cycle history

I've Learned

• CSS-in-JS styling technique with Styled Components
• Verify code quality with ESLint
• How make routes with React Router DOM
• Controlled and uncontrolled components
• Form validation with React Hook Form and Zod
• Perform side effects in components (useEffect())
• Share data between components and avoid prop drilling (Context API)
• Manage complex states (useReducer())
• Immutable state in a more convenient way with Immer

Built With

• React
• TypeScript
• Styled Components

License

This project is licensed under the MIT License - see the LICENSE.md file for details.