https://github.com/rodrigofontesdev/pomodoro

A Pomodoro Timer to keep you focused and motivated built with React.
https://github.com/rodrigofontesdev/pomodoro

react study-project styled-components typescript

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/rodrigofontesdev/pomodoro
• Owner: rodrigofontesdev
• License: mit
• Created: 2024-04-22T13:18:32.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-28T16:03:35.000Z (10 months ago)
• Last Synced: 2024-11-11T06:20:01.181Z (3 months ago)
• Topics: react, study-project, styled-components, typescript
• Language: TypeScript
• Homepage:
• Size: 85 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![cover](https://github.com/rodrigofontesdev/pomodoro/assets/17281370/f76f448f-0b2b-446b-b5f1-d37c3ca4f869)

# 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 [email protected]: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](LICENSE) file for details.