Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/digoarthur/move.it
NLW#04 - Rocketseat - Utilizando a técnica Pomodoro, esta aplicação possui um crônometro onde o objetivo é executar a tarefa do seu interesse.
https://github.com/digoarthur/move.it
css3 deploy figma html5 nextjs nlw-4 productivity spring typescript
Last synced: 28 days ago
JSON representation
NLW#04 - Rocketseat - Utilizando a técnica Pomodoro, esta aplicação possui um crônometro onde o objetivo é executar a tarefa do seu interesse.
- Host: GitHub
- URL: https://github.com/digoarthur/move.it
- Owner: DIGOARTHUR
- License: mit
- Created: 2021-04-07T16:41:28.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-22T20:32:24.000Z (5 months ago)
- Last Synced: 2024-08-22T22:33:38.267Z (5 months ago)
- Topics: css3, deploy, figma, html5, nextjs, nlw-4, productivity, spring, typescript
- Language: TypeScript
- Homepage:
- Size: 322 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#### Stacks:
Sobre a aplicação |
Interfaces |
Stacks |
Rodando Aplicação |
Por quê? |
# 
Sobre a aplicação
> Utilizando a técnica [`Pomodoro`](https://pt.wikipedia.org/wiki/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`](https://www.typescriptlang.org/) (TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript, oferecendo melhores ferramentas em qualquer escala.)
* [`Map`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map) (Método que executa uma iteração em uma array com retorno de outra array formatada, trabalhada de diversas formas.)
* [`padStart`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/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`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties) (Variáveis aplicados no CSS, como de cores por exemplo)
* [`Reset CSS`](https://www.alura.com.br/artigos/o-que-e-reset-css) (Resete de config. de medidas da página)
* [`Flexbox`](https://origamid.com/projetos/flexbox-guia-completo/) (Modelo Layout)
### Framework / Lib
* `Estrutura` (Estruturação de pastas e arquivos)
* `Evitar conflito CSS`(.modules)
* `next/link` (Aplicação de rotas)
* [`Componente`](https://reactjs.org/docs/components-and-props.html) (Uso de componentes)
* [`Estado`](https://reactjs.org/docs/state-and-lifecycle.html) (Uso de hooks para controle de estado e ciclo de vida da aplicação)
* [`Props`](https://reactjs.org/docs/state-and-lifecycle.html) (Recurso utilizado para passar atributos de um componente pai para outro componente filho)
* [`Context API`](https://reactjs.org/docs/context.html) (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
:warning: 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
```
5.3 Verifique se a mudança foi realizada
```
git remote -v
```
# 
Por quê?
A cada NLW que a [@Rocketseat](https://github.com/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. ♥
