#6 - React: https://ignite-timer-aszurar.netlify.app//

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.

• Acesse e teste o projeto em: https://ignite-timer-aszurar.netlify.app//

  Ignite Timer

  Ignite.Timer.Ignite.React.webm

Sobre |  Motivo |  Design |  Requisitos |  Tecnologias |  CI/CD |  Baixar e Executar 

---

Vídeo no Youtube

---

ℹ️ 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 para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do Radix UI 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.

• Tela inicial

---

⁉️ 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

  

---

🎨 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

---

🌱 Requisitos Mínimos

1. NodeJS
2. ReactJS
3. Vite
4. Yarn(ou NPM)

• Responsividade

---

🚀 Tecnologias Utilizadas

• O projeto foi desenvolvido utilizando as seguintes tecnologias:

  1. axe-core/react
  2. Date FNS
  3. JavaScript
  4. Netlify
  5. NodeJS
  6. Phosphor React
  7. Radix UI
  8. React
  9. React Router DOM
  10. React Hook Form
  11. Styled Components
  12. TypeScript
  13. Vite
  14. Yarn
  15. zod

• Responsividade

_

---

🚚 Entrega e distribuição continua

https://ignite-timer-aszurar.netlify.app//

• Para a publicação da aplicação foi por meio da plataforma Netlify 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.

---

📦 Como baixar e executar o projeto

Baixar

• Clonar o projeto:

   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
  • Instalação do Yarn

• Instalação das dependências:

  • Execute o comando abaixo dentro da pasta do projeto

      yarn

Execução

• Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:

    yarn dev

---

Desenvolvido por 🌟 Lucas de Lima Martins de Souza.