#6 - React: https://ignite-timer-aszurar.netlify.app//
-
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.React.webm
Sobre | Motivo | Design | Requisitos | Tecnologias | CI/CD | Baixar e Executar
-
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
- 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.
- Cadastro de cada ciclo do Pomodoro.
- Navegação entre telas e aplicação do Layout pelo React Router DOM.
- Persistência de dados com localStorage.
- Exibição do histórico de ciclos.
- Implementação da navegabilidade entre páginas com React Router DOM.
- Componentes acessíveis com Radix UI como ToolTip;
- 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;
- Entender e praticar construção de interfaces com Styled Components aplicando responsividade e breakpoints;
- Implementação da Navegação com React Router DOM;
- Construção de Layouts com React Router DOM;
- Aprofundamento nos conceitos de Styled Components e Context API.
- Implementação de responsividade total com Styled-Components;
- 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
- No design, eu acrescentei as telas responsivas para celular, uma melhoria que fiz por mim mesmo, não há no projeto original.
- NodeJS
- ReactJS
- Vite
- Yarn(ou NPM)
- Responsividade
-
O projeto foi desenvolvido utilizando as seguintes tecnologias:
-
Responsividade
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.
-
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 das dependências:
-
Execute o comando abaixo dentro da pasta do projeto
yarn
-
-
Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
yarn dev
Desenvolvido por 🌟 Lucas de Lima Martins de Souza.