Moveit - O pomodoro Gamificado! ⏰🎮

📚 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!

 

🚀 Sistema de compartilhamento no Twitter funcionando

 

🥇 Sistema de conquistas funcionando

 

🎨 Design desenvolvido para os ícones de cada conquista

 

🛠️ Tecnologias/Ferramentas ultilizadas

• React
• Next.js
• Next Auth
• TypeScript
• MongoDb
• Styled Components

 

🖌️ Layouts usados nesse projeto

• Move.it 1.0 (Desenvolvido em aula)
• Move.it 2.0 (Deixado como desafio)

 

🖥 Todas as páginas da aplicação

 

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