<h1 align="center"> <br> <img src="./.github/logo-full.svg" width="500" heigh="150" alt="logo move.it"> </h1> <h4 align="center"> Trilha ReactJS <img src="./.github/logo-icon-react.svg" height="15" alt="logo icon react"> </h4>  <p align="center"> <img alt="Plataforma" src="https://img.shields.io/static/v1?label=Plataforma&message=Mobile/PC&color=5965E0&labelColor=8257e6"> <a aria-label="Completado" href="https://nextlevelweek.com/episodios/omnistack/edicao/4"> <img alt="Moveit" src="https://img.shields.io/badge/MoveIt-NLW 4.0-5965E0?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAALVBMVEVHcExxWsF0XMJzXMJxWcFsUsD///9jRrzY0u6Xh9Gsn9n39fyMecy0qd2bjNJWBT0WAAAABHRSTlMA2Do606wF2QAAAGlJREFUGJVdj1cWwCAIBLEsRU3uf9xobDH8+GZwUYi8i6ucJwrxKE+7D0G9Q4vlYqtmCSjndr4CgCgzlyFgfKfKCVO0LrPKjmiqMxGXkJwNnXskqWG+1oSM+BSwD8f29YLNjvx/OQrn+g99oQSoNmt3PgAAAABJRU5ErkJggg==&labelColor=8257e6"></img> </a> <img alt="Tamanho do repositório" src="https://img.shields.io/github/repo-size/NyctibiusVII/MoveIt?color=4CD62B&labelColor=8257e6"> <a href="https://github.com/NyctibiusVII/MoveIt/blob/master/LICENSE"> <img alt="Licença" src="https://img.shields.io/static/v1?label=License&message=MIT&color=5965E0&labelColor=8257e6"> </a> <a href="https://picpay.me/Matheus_nyctibius_vii"> <img alt="Donate" src="https://img.shields.io/static/v1?label=$&message=Donate&color=5965E0&labelColor=8257e6"> </a> </p> <p align="center"> <a href="#moveit-">Projeto</a>   |    <a href="#tecnologias-">Tecnologias</a>   |    <a href="#layout-">Layout</a>   |    <a href="#licença-%EF%B8%8F">Licença</a> </p>

MoveIt <img src=".github/logo-moveit.svg" width="28" alt="logo icon">

Projeto desenvolvido para gerenciar melhor o seu tempo, saúde mental e física usando a técnica de pomodoro. Projeto realizado na Next Level Week #4 @Rocketseat.

<br> <details> <summary>Como é a técnica Pomodoro</summary>

Pomodoro significa tomate em italiano. A fruta faz alusão ao tempo durante o qual você pode fazer determinada tarefa.
Cada pomodoro é dividido em quatro pomodoris, e cada um destes equivale a 30 minutos.

O método Pomodoro é simples e dura (n) horas. Primeiro, você realiza uma atividade durante 25 minutos.
Quando acabar o tempo, descansa 5 minutos. Assim sucessivamente até que complete as (n) horas.

O conceito do Pomodoro é que a pessoa que vai estudar ou executar uma tarefa demore, exatamente, 25 minutos.
Concluindo-a ou não, ele deve parar e descansar 5 minutos.

</details> <details> <summary>Vantagens de usar a técnica Pomodoro</summary>

- Alivia a ansiedade;
- Aumenta o foco e a concentração por meio da redução das interrupções.
- Aumenta a conscientização das decisões.
- Aumenta a motivação e mantém-na constante.
- Reforça a determinação para atingir os objetivos.
- Melhora o processo de trabalho ou estudo.
- Reforça sua determinação de continuar a aplicar-se em face de complexas situações.

</details>

Por Silvia Tancredi - Jornalista

<br>

Funcionalidades

Gerenciar seu tempo.
Níveis de xp aumentados conforme sua evolução na técnica pomodoro.
Compartilhamento de seu progresso (Twitter) com imagem dinâmica via URL de (1200 x 630).
Notificação auditiva e visual.
Modal Cookies consent
MongoDB
Site responsivo.

<details> <summary>Desafios</summary>

✔ - Documentar bem o projeto
✔ - Melhorar o estilo: Responsividade e Design
✔ - Confetes atras do modal quando passar de level
✔ - Barra de progresso (tempo restante) em baixo do botão (Abandonar ciclo e Ciclo encerrado)
✔ - Bloquear funcionalidades se não estiver logado
✔ - Banco de dados
✔ - API-REST
✖ - Next PWA

Funcionalidades:
    - Mensagem de aviso ao sair da pagina ("O timer esta ativo!")
    ✔ - Trocar o tema da aplicação: Light e Dark
    ✔ - Consumo de api-rest
    ✔ - Banco de dados externo (MongoDB)
    ✔ - oAuth github (Pagina de login)
    ✔ - COOKIES:
        ✔ - Cookies consent
        ✔ - Guardar dados
        ✔ - Alterar dados
        ✔ - Deletar dados
    ✔ - MongoDB:
        ✔ - Guardar dados
        ✔ - Alterar dados
        ✔ - Deletar dados
    ✔ - Sidebar lateral #Desktop:
        ✔ - Logo (img)
        ✔ - Home
        ✔ - Leaderbord
        ✔ - Settings
    ✔ - Float action button #Mobile:
        ✔ - Home
        ✔ - Leaderbord
        ✔ - Settings
    ✔ - Toast:
        ✔ - Cor dinâmica
        ✔ - Icon dinâmico
        ✔ - Texto dinâmico
        ✔ - ToastBar countdown
        ✔ - Animação de entrada e saida
    - Telas:
        ✔ - Home
        ✔ - Leaderbord
        - Settings
        ✔ - Login
        ✔ - 404
    ✔ - Compartilhar com o Twitter:
        ✔ - Botão em baixo do modal (Compartilhar no Twitter (img))
            ✔ - Texto com:
                ✔ - qts Desafios
                ✔ - qts xp
                ✔ - qts Level
            ✔ - Link para a img dinâmica
            ✔ - Hashtags
            ✔ - Autor
        ✔ - Criar img dinâmica para compartilhar:
            ✔ - (API) image-generator:
                ✔ - qts Desafios
                ✔ - qts xp
                ✔ - qts Level

</details>

Tecnologias 🚀

Esse projeto foi desenvolvido com as seguintes tecnologias:

Layout 🚧

Desktop Screenshot

Mobile Screenshot

Rodando o projeto 🚴🏻‍♂️

"Só vou dar uma olhadinha...":

<a href="https://moveit-nyctibiusvii.vercel.app/">⏰ Site hospedado na Vercel 🏆</a>

Na sua maquina:

<details> <summary>Dependências</summary>

  "dependencies": {
    "axios": "^0.21.4",
    "chrome-aws-lambda": "^10.1.0",
    "js-cookie": "^3.0.0",
    "next": "^11.1.2",
    "next-themes": "0.0.15",
    "puppeteer-core": "^10.2.0",
    "react": "^17.0.2",
    "react-confetti": "^6.0.1",
    "react-copy-to-clipboard": "^5.0.4",
    "react-dom": "^17.0.2",
    "sass": "^1.42.1"
  },
  "devDependencies": {
    "@types/js-cookie": "^2.2.7",
    "@types/node": "^16.11.6",
    "@types/react": "^17.0.19",
    "@types/react-copy-to-clipboard": "^5.0.1",
    "@types/react-dom": "^17.0.9",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.1.2",
    "typescript": "^4.4.2"
  }

Ex: $ npm install _____ para instalar as dependências

Utilize a tag -D para instalar as dependências de desenvolvimento. Utilize a tag @types para instalar o suporte a Typescript. Utilize a tag @latest para instalar a versão mais recente.

</details>

# Clone o repositório
$ git clone https://github.com/NyctibiusVII/MoveIt.git

# Acesse a pasta do projeto no prompt de comando
$ cd moveit

# Instale as dependências
$ npm install

# Exec

MoveIt

Install / Use

README

MoveIt <img src=".github/logo-moveit.svg" width="28" alt="logo icon">

Por Silvia Tancredi - Jornalista

Funcionalidades

Tecnologias 🚀

Layout 🚧

Desktop Screenshot

Mobile Screenshot

Rodando o projeto 🚴🏻‍♂️

"Só vou dar uma olhadinha...":

Na sua maquina: