🚧 Aplicação finalizada! 🚧

🏁 Tópicos

👉 Sobre
👉 Funcionalidades
👉 Layout
👉 Demonstração
👉 Como executar
👉 Tecnologias
👉 Autor
👉 Licença

💻 Sobre o projeto

Uma aplicação que simula a utilização da técnica de pomodoro com o intuito de tornar devs mais produtivos e mais saudáveis.

Abaixo disponibilizei um link para o site hospedado:

---

⚙️ Funcionalidades

• Front-end;
  • Pagina Principal;
  • Cronômetro;
  • Barra de Experiência;
  • Desafios;
  • Botão de Falhei - Cancela Desafio e Reseta Cronômetro;
  • Botão de Completei - Adiciona Experiência do Desafio e Reseta Cronômetro;
  • Apresenta um Modal quando usuário sobe de nível;
  • Os dados do usuário são salvos em cookies;
  • Alternância entre tema claro e escuro.

A milha extra...

• Troca de temas da interface, na qual o tema é salvo dentro de um cookie;
• A troca de temas é feita pela propriedade data-theme da tag html;
• Foi adicionado rotas para uso do MongoDB como banco de dados da aplicação;
• Foi criado uma Side Bar;
  • Navegação entre Página principal e de Rankings;
  • Botão de LogOut;
  • Troca de Temas;
• Página de Login;
  • Layout Completo;
  • Login pelo Github com NextAuth;
  • Usuário é registrado no banco de dados (se não existir);
• Página Principal:
  • Os dados do usuário são atualizados;
• Página de Rankings;
  • Layout Completo;
  • É criado um ranking de quem tem mais experiência;
• A aplicação está responsiva.
• A aplicação está totalmente funcional em produção.

---

🎨 Layout

Página de Login

Página Principal

Modal que aparece ao súbir de nível

Página de Rankings

---

🕹️ Demonstração

---

🚀 Como executar o projeto

Este projeto contém apenas uma parte:

1. Frontend (pasta web)

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, Yarn. Além disto é bom ter um editor para trabalhar com o código como VSCode

Váriaveis de Ambiente

Veja o arquivo .env.sample

🧭 Rodando a aplicação web (Frontend)

# Clone este repositório
$ git clone https://github.com/grochavieira/moveit.git

# Acesse a pasta do projeto no seu terminal/cmd
$ cd moveit

# Vá para a pasta da aplicação Front End
$ cd web

# Instale as dependências
$ yarn install

# Execute a aplicação em modo de desenvolvimento
$ yarn dev

# A aplicação será aberta na porta:3000 - acesse http://localhost:3000

---

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

Website (React + TypeScript)

• Next.js
• Context
• js-cookie
• css-Modules
• MongoDB
• Next-Auth
• React Icons

Veja o arquivo package.json

Utilitários

• Editor: Visual Studio Code
• Fontes: Rajdhani, Inter

---

🦸‍♂️ Autor

_{🌟 Guilherme Rocha Vieira 🌟}

---

📝 Licença

Este projeto esta sobe a licença MIT.

Feito com 😆 por Guilherme Rocha Vieira 👋🏽 Entre em contato!

---