Sobre • Funcionalidades • Como executar • Tecnologias • Autor • Licença
Veja a demonstração.
A aplicação desenvolvida é um cronômetro para utilizar a técnica pomodoro para que ao final de cada ciclo de foco, o usuário receba um desafio de um exercício, para ajudar a diminuir as chances do usuário sofre uma lesão por falta de se movimentar durante o uso prolongado do computador.
O projeto foi desenvolvido durante o evento NLW#04 - trilha de React da Rocketseat, com o objetivo de criar uma aplicação web com React e Next.JS, em 5 aulas.
Para o desenvolvimento utilizamos ReactJS e Next.js com TypeScript.
Adicionado o login com o Google.
Ao acessar a aplicação é solicitada uma permissão para enviar notificações para o usuário com a finalidade de informar o final de cada ciclo.
O usuário pode iniciar um ciclo de foco, quando o contador chega a zero, um alerta sonoro é emitido, além de uma notificação do navegador (caso o usuário tenha aceito as permissões).
Além disso, é informada uma pontuação e um desafio para que o usuário realize durante o seu intervalo do pomodoro, onde o usuário deve informar se conseguiu ou não efetuar o desafio proposto.
Ao informar que o desafio foi concluído, a pontuação prevista é somada no seu total de pontos e o total de desafios concluídos é atualizado.
Caso o total de pontos seja suficiente para avançar de nível, uma modal é exibida com o novo nível do usuário. Um novo total para o próximo nível é informado na barra de progresso e a pontuação remanescente é acrescentada na mesma barra.
Ao atualizar a página, as informações de nível são recuperadas do Cookie
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.
# Clone este repositório
$ git clone git@github.com:BrunoSaibert/move.it.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd move.it
# Instale as dependências
$ npm install
# ou
$ yarn
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# ou
$ yarn dev
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000
As seguintes ferramentas foram usadas na construção do projeto:
Aplicação (React + Next.js + TypeScript)
Veja o arquivo package.json
- Editor: Visual Studio Code
- Fonte geral: Inter
- Fonte contador: Rajdhani
- Gerar README: Markeditor
Hospedagem (Vercel)
Bruno Henrique Saibert
Feito com ❤️ por Bruno Henrique Saibert 👋 Entre em contato!
Este projeto esta sobe a licença MIT.