https://github.com/luancss/ignite-timer

É um timer no estilo pomodoro para você controlar seus ciclos de estudos e tarefas no dia a dia.
https://github.com/luancss/ignite-timer

date-fns immer phosphor-react react react-hook-form react-router-dom rocketseat styled-components typescript zod

Last synced: 1 day ago
JSON representation

É um timer no estilo pomodoro para você controlar seus ciclos de estudos e tarefas no dia a dia.

• Host: GitHub
• URL: https://github.com/luancss/ignite-timer
• Owner: Luancss
• Created: 2023-10-09T18:35:23.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-09T17:19:03.000Z (about 1 year ago)
• Last Synced: 2023-11-10T02:28:12.477Z (about 1 year ago)
• Topics: date-fns, immer, phosphor-react, react, react-hook-form, react-router-dom, rocketseat, styled-components, typescript, zod
• Language: TypeScript
• Homepage: https://ignite-timer-luancss.vercel.app
• Size: 1.14 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    

    Ignite Timer





 Demonstration |

 Deploy |

 Technologies |

 Layout |

 Clipboard |

 Settings



---

O Ignite Timer nada mais é que um projeto que permite ao usuário cronometrar as suas tarefas no dia a dia, além de le permite ver um histórico de todos as tarefas já realizadas.

**Objetivos**: os principais objetivos desta aplicação foi treinar a atilização das seguintes ferramentas/tecnologias: 

  - Lidar com datas e horarios através da biblioteca `date-fns`

  - Utilização de formulários com `React Hook Form`

  - Aplicação de temas dark e light utilizando o `Styled Components`

  - Uso do hook `useReducer` do React para centralizar as alterações em um estado complexo

  - Outros...

* Caso goste do projeto marque a estrelinha⭐ e compartilhe para me ajudar 👍, e me siga para ver outros projetos meus.

## 📷 Demonstration



  

  



## 💻 Deploy

Clique no link a seguir para executar o projeto na sua máquina: Link

## 🚀 Technologies

Esse projeto foi desenvolvido com as seguintes tecnologias:

✔ [Vite](https://vitejs.dev/)




✔ [ReactJS](https://reactjs.org/)




✔ [TypeScript](https://www.typescriptlang.org/)




✔ [Styled Components](https://styled-components.com/docs)




✔ [Phosphor Icons](https://phosphoricons.com/)




✔ [date-fns](https://date-fns.org/docs/Getting-Started)




✔ [React Hook Form](https://react-hook-form.com/)




✔ [Zod](https://github.com/colinhacks/zod)




✔ [React Router](https://reactrouter.com/en/v6.3.0/getting-started/overview)




✔ [Immer](https://github.com/immerjs/immer)




## 🎨 Layout

Você pode visualizar o layout do projeto através [desse link](https://www.figma.com/file/nCeslCY32mG7newtwTpuks/Ignite-Timer-(Community)?node-id=11%3A599). É necessário ter conta no [Figma](https://www.figma.com/) para acessá-lo.

## 📋 Clipboard (Pré-requisitos)

Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:

* [Git](https://git-scm.com)

* [NodeJS](https://nodejs.org/en/)

* [Yarn](https://yarnpkg.com/) ou [NPM](https://www.npmjs.com/)

## ⚙ Settings

Segue os comandos para baixar e executar o projeto na sua máquina:

* `git clone` + `URL do Projeto`: clonar este repositório.

* `cd Ignite-Timer`: acessa a pasta do projeto no terminal.

* `yarn`: para baixar as dependências do projeto.

* `yarn dev`: 

    - Executa o projeto em modo/ambiente de desenvolvimento.

    - Abra [http://localhost:3000](http://localhost:3000) para ver o projeto rodando no Navegador.

    - A página será recarregada se você fizer edições no código, e se tiver algum erro será mostrado no console.

* `yarn build`: 

    - Compila a aplicação para a produção na pasta `build`.

## ✍ Author





    Made with 💜 by Luancss