Stacks:

Tools:

---

Sobre a aplicação   |    Interfaces   |    Stacks   |    Rodando Aplicação   |    Por quê?   |   

Sobre a aplicação

Utilizando a técnica Pomodoro, esta aplicação possui um crônometro onde o objetivo é executar a tarefa do seu interesse no tempo que, por padrão, é de 25 minutos. A cada término é mostrado uma atividade de relaxamento e, se caso você complete a tarefa, é acrescido XP, caso contrário não se ganha nada e o cronômetro é resetado. Este projeto aborda o uso da estrutura NextJS, conceito de Context API, Componentização, o uso do TypeScript, conceitos de JS.

Interfaces

DESKTOP

Tela Principal

Mobile

Stacks

Lógica

• TypeScript (TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript, oferecendo melhores ferramentas em qualquer escala.)
  • Map (Método que executa uma iteração em uma array com retorno de outra array formatada, trabalhada de diversas formas.)
  • padStart (O método que preenche a string original com um determinado caractere, ou conjunto de caracteres, (várias vezes, se necessário) até que a string resultante atinja o comprimento fornecido.)
  • split (Método que faz a quebra de uma string em um array de strings, a partir de um caracter divisor existente na mesma.)

Estilização

• 
  • Global Style
    • Variáves (Variáveis aplicados no CSS, como de cores por exemplo)
    • Reset CSS (Resete de config. de medidas da página)
  • Flexbox (Modelo Layout)

Framework / Lib

• Estrutura (Estruturação de pastas e arquivos)
• Evitar conflito CSS(.modules)
• next/link (Aplicação de rotas)
• Componente (Uso de componentes)
• Estado (Uso de hooks para controle de estado e ciclo de vida da aplicação)
• Props (Recurso utilizado para passar atributos de um componente pai para outro componente filho)
• Context API (Usado para compartilhar dados de Estado, Funções etc... entre componentes diferentes. Faz com que a visão seja global.)

Gerenciador / Pacotes

Versionameto

IDE

Rodando a Aplicação

1. Clonar repositório:

git clone https://github.com/DIGOARTHUR/Move.it.git

2. Instalar dependências

yarn install

3. Rodar aplicativo

yarn dev

4. Acesse http://localhost:3000/ e navegue pelo site

⚠️ 5. Trocar URL do repositorio remoto (caso necessário)

5.1 Ver qual o repositorio atual

git remote -v

5.2 Mudar a URL do repositorio remoto

git remote set-url origin <LinkDoNovoRepositorio>

5.3 Verifique se a mudança foi realizada

git remote -v

Por quê?

A cada NLW que a @Rocketseat organiza, busco sempre aprimorar o que vi nas anteriors e conhecer recursos novos. Estou em um momento de muita construção e esses projetos feitos em React vem me enriquecendo cada vez mais. Ainda quero desenvolver Aplicações mais complexas mas, antes, quero deixar sólida a base. Aqui aprendi conceitos e aplicação de NextJS, mais sobre TypeScript e sobre outros recursos base do React.

---

Quero agradecer a Rocketseat por estes eventos, vocês não tem ideia do quanto contribuem para a comunidade. ♥