Skip to content

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.

Notifications You must be signed in to change notification settings

Aszurar/igniteTimer

Repository files navigation

Banner

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.React.webm

Netlify Status Vite React React Router Context-API React Hook Form StyledComponents Radix UI TypeScript JavaScript HTML5 CSS3 Yarn Figma

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


Gif mostrando o projeto

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

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

    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.

🌱 Requisitos Mínimos

  1. NodeJS
  2. ReactJS
  3. Vite
  4. Yarn(ou NPM)
  • Responsividade
Iniciando ciclo Ciclo em andamento

🚀 Tecnologias Utilizadas

Tela inicial no modo responsivo_Tela de Histórico em modo responsivo

🚚 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.
Projeto publicado no Netlify

📦 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 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.

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published