Trilha ReactJS

Projeto   |    Tecnologias   |    Layout   |    Licença

MoveIt

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.

Como é a técnica Pomodoro

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.

Vantagens de usar a técnica Pomodoro

- 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.

Por Silvia Tancredi - Jornalista

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.

Desafios

✔ - 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

Tecnologias 🚀

Esse projeto foi desenvolvido com as seguintes tecnologias:

• Html | 5
• Css | 3
• Typescript | ^4.1.5
• ReactJS | ^17.0.1
• NextJS | ^10.0.7
• NodeJS | ^15.9.0

Layout 🚧

Desktop Screenshot

Ver mais

Mobile Screenshot

Ver mais

Rodando o projeto 🚴🏻‍♂️

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

⏰ Site hospedado na Vercel 🏆

Na sua maquina:

Dependências

  "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.

# 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

# Execute o script "dev"
$ npm run dev

# O projeto inciará na porta: 3000 - acesse http://localhost:3000

Contribuição 💭

Para construir essa aplicação tive a ajuda do professor Diego Fernandes da Rocketseat que disponibilizou video aulas do projeto MoveIt e tive uma ajuda desta grande comunidade que a Rocketseat construiu no Discord. Feito com ♥ by Rocketseat 👋 Participe da nossa comunidade!

Hashtags #

Dias	Hashtags
Dia 1	#RumoAoProxímoNivel
Dia 2	#JornadaInfinita
Dia 3	#FocoPraticaGrupo
Dia 4	#NeverStopLearning
Dia 5	#MissionComplete

Licença ⚖️

Este projeto está sob a licença do MIT. Veja o arquivo LICENSE para mais detalhes.

Contato ✉️

@MatheusVidigal🦊