https://github.com/aszurar/ignitetimer
O projeto Ignite Timer é um site que simula um timer para a prática de Pomodoro. Nele temos 2 telas: Tela de Início, onde é possível registar o novo ciclo, iniciar o timer e encerrar; Tela de Histórico, onde é possível ver o histórico de cada ciclo iniciado anteriormente.
https://github.com/aszurar/ignitetimer
axe axe-core context-api css date-fns html ignite-reactjs javascript netlify react react-hooks react-router react-router-dom reactjs styled-components type usereducer vite vitejs zod
Last synced: about 1 month ago
JSON representation
O projeto Ignite Timer é um site que simula um timer para a prática de Pomodoro. Nele temos 2 telas: Tela de Início, onde é possível registar o novo ciclo, iniciar o timer e encerrar; Tela de Histórico, onde é possível ver o histórico de cada ciclo iniciado anteriormente.
- Host: GitHub
- URL: https://github.com/aszurar/ignitetimer
- Owner: Aszurar
- Created: 2023-10-22T04:15:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-24T18:52:31.000Z (about 1 year ago)
- Last Synced: 2025-02-10T10:26:34.177Z (3 months ago)
- Topics: axe, axe-core, context-api, css, date-fns, html, ignite-reactjs, javascript, netlify, react, react-hooks, react-router, react-router-dom, reactjs, styled-components, type, usereducer, vite, vitejs, zod
- Language: TypeScript
- Homepage: https://ignite-timer-aszurar.netlify.app//
- Size: 329 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #6 - React: ****
## Ignite Timer
- O projeto Ignite Timer é um site que simula um timer para a prática de Pomodoro. Nele temos 2 telas:
- **Tela de Início**, onde é possível registar o novo ciclo, iniciar o timer e encerrar;
- **Tela de Histórico**, onde é possível ver o histórico de cada ciclo iniciado anteriormente.
- O propósito do projeto é praticar o uso do React com **Styled-Components**, Navegação com **React Router DOM**, TypeScript e **localStorage** para persistência de dados.
- O site foi publicado com CI/CD por meio da plataforma **[Netlify](https://www.netlify.com/)**.
- Acesse e teste o projeto em: ****
Ignite Timer
[Ignite Timer](https://github.com/Aszurar/igniteTimer/assets/64987824/baaf4710-baca-4067-ba0e-3509092b180c)
[](https://app.netlify.com/sites/ignite-timer-aszurar/deploys) [](https://vitejs.dev/) [](https://react.dev/) [](https://reactrouter.com/en/main) [](https://react.dev/learn/scaling-up-with-reducer-and-context) [](https://react-hook-form.com/) [](https://tailwindcss.com/) [](https://www.radix-ui.com/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://yarnpkg.com/) [](https://www.figma.com/)
---
**[Vídeo no Youtube](https://www.youtube.com/watch?v=u1aEHPypsSc)**
---
## :information_source: Sobre
- O projeto **ignite timer** pode ser um projeto simples, mas que foi abordado conceitos importantes para o desenvolvimento de web apps com **React**, **TypeScript**, **Styled Components** e navegação com React Router DOM.
- A ideia desse projeto é implementar um timer para a prática de Pomodoro, onde é possível registrar um novo ciclo, iniciar o timer e encerrar. Além disso, é possível ver o histórico de cada ciclo iniciado anteriormente.
- Assim abordamos como podemos criar rota e navegação entre páginas no React, como podemos criar um contexto, trabalhar com tempo em minutos e segundos, gerenciar o Estado por meio do useReducer, persistir os dados com localStorage, desenvolver a parte visual com Styled-Components, dentre outros tópicos...
- A acessibilidade foi levada em consideração, com o uso da lib **[axe-core](https://www.npmjs.com/package/@axe-core/react)** para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do **[Radix UI](https://www.radix-ui.com/)** para componentes acessíveis como Modais e Tooltips.
- O projeto Ignite Timer é o 2º projeto realizado em aula do curso Ignite ReactJS de 2022 da [Rocketseat](https://www.rocketseat.com.br/).
- **Tela inicial**
---
## :interrobang: Motivo
- Esse projeto tem o objetivo de praticar o uso do **React com Styled-Components, Navegação com React Router DOM, TypeScript e localStorage** para a construção de uma aplicação web.
### Funcionalidades:
1. Cadastro de cada ciclo do Pomodoro.
2. Navegação entre telas e aplicação do Layout pelo React Router DOM.
3. Persistência de dados com **localStorage**.
4. Exibição do histórico de ciclos.
5. Implementação da navegabilidade entre páginas com **React Router DOM**.
6. **Componentes acessíveis** com **Radix UI** como ToolTip;
7. **Uso do useReducer** e **Context API** do React para o gerenciamento de estado da aplicação em conjunto com a divisão da lógica de **actions** e **reducers** para o gerenciamento de estado;
8. Entender e praticar construção de interfaces com **Styled Components** aplicando responsividade e breakpoints;
### O que foi aprendido de novo?
1. Implementação da Navegação com React Router DOM;
2. Construção de Layouts com React Router DOM;
3. Aprofundamento nos conceitos de Styled Components e Context API.
4. Implementação de responsividade total com Styled-Components;
5. Design das telas responsivas
- Esse design das telas para celular foi uma adaptação minha, tanto seu Figma quanto sua implementação não há no projeto original, é só uma tentativa para prática.
- **Tela de Histórico**
---
## :art: Design
- No design, eu acrescentei as telas responsivas para celular, uma melhoria que fiz por mim mesmo, não há no projeto original.
Ignite Timer
[](https://www.figma.com/file/ZFx7ibCTZ9pgPsrvwryMhW/Ignite-Timer?type=design&node-id=0-1&mode=design&t=lTSkIabOQ7ISiv0R-0)
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. ReactJS
3. Vite
4. Yarn(ou NPM)
- **Responsividade**
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
2. **[Date FNS](https://date-fns.org/)**
3. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
4. **[Netlify](https://www.netlify.com/)**
5. **[NodeJS](https://nodejs.org/en/)**
6. **[Phosphor React](https://www.npmjs.com/package/phosphor-react)**
7. **[Radix UI](https://www.radix-ui.com/)**
8. **[React](https://pt1.br.react.dev/)**
9. **[React Router DOM](https://reactrouter.com/en/main)**
10. **[React Hook Form](https://react-hook-form.com/)**
11. **[Styled Components](https://styled-components.com/)**
12. **[TypeScript](https://www.typescriptlang.org/)**
13. **[Vite](https://vitejs.dev/)**
14. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**
15. **[zod](https://zod.dev/)**
- **Responsividade**
_
---
## :truck: Entrega e distribuição continua
****
- Para a publicação da aplicação foi por meio da plataforma **[Netlify](https://www.netlify.com/)** onde é possível publicar de forma rápida, fácil e simples projetos React que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.
- Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção, sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.
- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
git clone https://github.com/Aszurar/igniteTimer
```
- É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:
- [Instalação do NodeJS](https://nodejs.org/en/)
- [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
yarn
```
### Execução
- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
```bash
yarn dev
```
---
Desenvolvido por :star2: Lucas de Lima Martins de Souza.