Técnica pomodoro é um método de gerenciamento de tempo, que consiste em manter o foco em uma determinada atividade por um período e efetuar pequenas pausas. Para mais informações consulte wiki
O projeto trata-se de uma SPA (Single Page Application) desenvolvida na trilha de Front-end. Utilizando a poderosa biblioteca ReactJs e o framework NextJs. Baseando-se na técnica de pomodoro, com adicional de um sistema de recompensas criamos um mini-game onde ao realizar os ciclos do pomodoro ganhamos XP e subimos de nível ao realizar as tarefas, que vão desde execícios físicos a exercícios para o descanso dos olhos.
NLW (Next Level Week) é um evento gratuito organizado pelo equipe RocketSeat, basicamente uma maratona de programação, onde dentro de uma semana desenvolvemos um produto de software. O evento está em sua quarta edição e é separado por trilhas. Onde cada uma delas são explorados os recursos de cada tecnologia e trabalhado boas práticas de programação.
Trilhas
- ReactJS | Front-end
- Node.js | Back-end
- Elixir | Back-end
- ReactJs | Biblioteca
- NextJs | Framework
- NodeJs v15.5.1 | Ambiente de execução
- Npm v7.3.0 | Gerenciador de pacotes
- Yarn v1.22.10 | Gerenciador de pacotes
- JS Cookie | Biblioteca
A seguir veremos como preparar o ambiente de desenvolimento baseando-se no sistema operacional Mac Os.
- Instalando node através do Homebrew
rafaelcosta$ brew install nodeAo instalar o node já teremos acesso ao gerenciador de pacotes, podemos conferir digitando os comandos a seguir
rafaelcosta$ node -v
v15.5.1
rafaelcosta$ npm -v
7.3.0Opcionalmente podemos instalar o gerenciador de pacote Yarn
rafaelcosta$ npm install --global yarnConfira se a instalação foi efetuada corretamente testando com comando
rafaelcosta$ yarn --version
1.22.10- Clonando o projeto no git
rafaelcosta$ git clone https://github.com/rafaelcostab/pomodoro-game.gitApós concluir o download do projeto, precisaremos instalar as dependências do projeto sendo assim no diretório do projeto
rafaelcosta$ cd /pomodoro-game/pomodoro- Instalando typescript e suas dependencias
rafaelcosta$ yarn add typescript @types/react @typres/react-dom @types/node -D- Instalando biblioteca js cookie
rafaelcosta$ yarn add js-cookie- Adicionando tipagem para o typescript entender a biblioteca js
rafaelcosta$ yarn add @types/js-cookie -DPara colocar a aplicação no ar, faremos o deploy via vercel, caso não tenha será necessário criar uma conta
- Instalando vercel
rafaelcosta$ npm i -g vercelEfetuando login, após rodar o comando abaixo, será solicitado o email da conta cadastrada e em seguida será enviado um email para efetuar a autenticação.
rafaelcosta$ vercel loginPara fazer o deploy da aplicação é bem simples, será necessário apenas estar na pasta raiz do projeto e digigar o comando
rafaelcosta$ vercel