https://github.com/pabloxt14/ignite-timer
O Ignite Timer nada mais é que um projeto que permite ao usuário cronometrar as suas tarefas no dia a dia, além de lhe permite ver um histórico de todos as tarefas já realizadas.
https://github.com/pabloxt14/ignite-timer
dark-theme date-fns light-theme phosphoricons react-hook-form reactjs styled-components usereducer zod
Last synced: 5 months ago
JSON representation
O Ignite Timer nada mais é que um projeto que permite ao usuário cronometrar as suas tarefas no dia a dia, além de lhe permite ver um histórico de todos as tarefas já realizadas.
- Host: GitHub
- URL: https://github.com/pabloxt14/ignite-timer
- Owner: PabloXT14
- Created: 2022-07-11T20:24:23.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-26T19:08:29.000Z (over 2 years ago)
- Last Synced: 2024-11-29T00:14:03.745Z (7 months ago)
- Topics: dark-theme, date-fns, light-theme, phosphoricons, react-hook-form, reactjs, styled-components, usereducer, zod
- Language: TypeScript
- Homepage: https://ignite-timer-pearl.vercel.app/
- Size: 4.46 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- 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`.
## 📝 License
Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
## ✍ Author
Made with 💜 by PabloXT14
