/moveit-1

Projeto criado na Trilha React da NLW#04 da Rocketseat

Primary LanguageTypeScriptMIT LicenseMIT

Moveit - O pomodoro Gamificado! ⏰🎮

mocknot

📚 Informações sobre o projeto

  • O Moveit foi o App desenvolvido durante a Next Level Week #04 da Rocketseat! Ultilizando a técnica de pomodoro com um toque de gamificação, deixando suas tarefas mais produtivas e mantendo o bem-estar/saúde.

 

💻 Funcionalidades iniciais do projeto

  • Pomodoro interativo, a cada 25 minutos ele gera uma tarefa nova, recompençando com pontos assim que completada;
  • Sistema de níveis, para gerar a gamificação comentada acima;
  • Design moderno e clean;

 

👨🏻‍💻 Funcionalidades desenvolvidas por mim, para levar o projeto ao próximo nível

  • Página home, possibilitando o login;
  • Página 404;
  • Login com o Github, puxando suas informações e armazenando as mesmas no MongoDb;
  • Leaderboard, mostrando os usuários com a maior quantidade de desafios concluídos em conta;
  • Design responsivo e contando com tema dark (transformado todos os códigos css em styled-components);
  • Sistema de conquistas, que são armazenadas no MongoDb;
  • Página de perfil do usuário, mostrando alguns dados sobre a conta + as conquistas que o mesmo possui;
  • SEO da aplicação;
  • Compartilhamento pelo twitter ao subir de nível, gerando automaticamente uma página e imagem customizada para cada usuário, com os respectivos dados!

mockups

 

🚀 Sistema de compartilhamento no Twitter funcionando

Feature Twitter

 

🥇 Sistema de conquistas funcionando

Feature Perfil

 

🎨 Design desenvolvido para os ícones de cada conquista

iconesconquista

 

🛠️ Tecnologias/Ferramentas ultilizadas

ezgif com-optimize (2)

 

🖌️ Layouts usados nesse projeto

 

🖥 Todas as páginas da aplicação

allpages

 

⚙️ Instalação

# Abra um terminal e copie este repositório com o comando
$ git clone https://github.com/GBDev13/moveit.git

# Acesse a pasta da aplicação
$ cd moveit

# Crie um arquivo .env.local e coloque as variaveis
# de ambiente baseado no arquivo .env.example que
# se encontra na pasta moveit

# Instale as dependências
$ yarn install

# Inicie a aplicação
$ yarn start



## Como alterar o tempo do timer? (Está como 6 segundos para testes práticos)
## Abra o arquivo src/contexts/CountdownContext.tsx
## Lá você irá encontrar essas linhas:

const [time, setTime] = useState(0.1 * 60)
setTime(0.1 * 60);

## Para retornar aos 25 minutos, apenas altere o 0.1 para 25

## Também é necessário alterar o tempo da barra de progresso, para
## fazer essa alteração, acesse o arquivo src/styles/components/ButtonStyles.tsx
## Lá você irá encontrar essa linha:

animation: roundtime calc(6 * 1s) linear forwards;

## Para retornar aos 25 minutos, altere de 6 * 1s para 1500 * 1s



# Deploy na Vercel (INFORMAÇÃO SUPER IMPORTANTE)
# Para o sistema de compartilhamento no twitter funcionar
# é necessário usar a versão do Node 12.x, que pode ser alterada nas
# configurações do seu projeto

 

🔗 Link para o projeto online

MoveIt

 

📝 Licença

Este projeto está licenciado sob a Licença MIT. Veja o arquivo de LICENÇA para detalhes.

Feito com 💙 por Gabriel Borges