alexandredev3 / moveit-nlw04

O Move.it é um app que usa a técnica de Pomodoro, esse app faz com que pessoas que passa muito tempo na frente do computador realizar exercícios físicos - NLW#05

Descrição   |    Layout   |    Tecnologias   |    Funcionalidades   |    Instalação   |    Autor   |    Licença

📄 Descrição

O Move.it é um app que usa a técnica de Pomodoro, esse app faz com que pessoas que passa muito tempo na frente do computador realizar exercícios físicos.

🎨 Layout

Você pode acessar o Layout pelo Figma atravês desse link.

🛠 Tecnologias

Este projeto foi desenvolvido com as seguintes tecnologias

• Next.js
• React.js
• TypeScript
• SWR
• NextAuth
• FramerMotion
• StyledComponents

📋 Funcionalidades

• Fazer cadastro pelo o GitHub.
• Quando o usuário se cadastra um toast é rendelizado dando boas vindas para o novo usuário.
• Leaderboard.
• Validação para validar se o usuário completou o tempo necessário para porder completar um desafio, evitando trapaças.
• Iniciar um ciclo de 25 minutos.
• Abadornar ciclo.
• Dispara um efeito sonoro quando o ciclo chega ao fim.
• Manda uma notificação quando o ciclo chega ao seu fim.
• A cada ciclo libera um novo desafio.
• Usuário ganha XP a cada desafio concluído.
• Usuário pode subir de nível.

📕 Instalação

Pré-requisitos

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 https://github.com/alexandredev3/moveit-nlw4.git

# Vá para a pasta moveit-nlw4
$ cd moveit-nlw4

# Instale as dependências
$ npm install 

# Execute aplicação
$ npm run dev

# O app vai está rodando na porta 3000 - acesse <http://localhost:3000>

👨 Autor

_{Alexandre Costa}

Feito com ❤️ por Alexandre Costa 👋👋 Entre em contato!🚀

📝 Licença

Copyright © 2020 Alexandre Costa.
This project is MIT licensed.

moveit-nlw04's Issues

Bug na ExperienceBar

Explicação

Quando um usuário entra pela primeira vez, os valores dos cookies demoram para carregar ou algo do gênero, e os valores de width e left que são calculados com os valores dos cookies bugam e resultam em NaN.

Correção

Se definir no css dos elementos o width: 0 e left: 0 respectivamente, já resolve.

---

Se quiser testar, abre a aplicação em uma nova janela no modo anônimo que já aparece