configuracao.md

@@ -8,6 +8,31 @@ Aqui deve ser explicado como configurar o Ambiente para que os Desenvolvedores d
 * Deve ser explicado a configuração de **TODAS** as partes do projeto, tanto BACK,BANCO,FRONT,etc...
 * Além de explicar aqui, deve ter em cada Repositório o **RESUMO** de como instalar para quando os Desenvolvedores baixarem o projeto possam configurar por lá também
 
+# Instalação do Node
+
+#### Instalação
+
+O download do instalador do Node pode ser realizado pelo seguinte [link](https://nodejs.org/en/).
+
+Faça o download e siga os passos de instalação da versão mais recente que possua LTS (Long Term Support).
+
+#### Verificação 
+
+Depois de instalar o Node, abra um novo terminal para verificar se a mesma foi realizada com sucesso.
+
+Execute o seguinte comando `node -v` e verifique se o retorno é semelhante ao apresentado abaixo (caso a versão seja diferente não se preocupe).
+
+```
+C:\user\node -v
+v12.18.3
+```
+
+Depois execute o seguinte comando `npm -v` e novamente verifique se o retorno é semelhante (lembre-se: a versão não precisa ser a mesma).
+
+```
+C:\user\npm-v
+v6.14.6
+```
 
 # Clonando o projeto
 
@@ -16,8 +41,11 @@ Para ser necessário clonar o projeto, é preciso primeiro acessar a página do
 Na página inicial do time, você irá encontrar todos os repositórios referentes à esse projeto:
 
 1.[Frontend](https://tools.ages.pucrs.br/olive/olive-frontend)
+
 2.[API de Usuários](https://tools.ages.pucrs.br/olive/olive-commons-lib)
+
 3.[API de Receitas](https://tools.ages.pucrs.br/olive/olive-recipes-api)
+
 4.[Wiki](https://tools.ages.pucrs.br/olive/olive-wiki)
 
 > Não é necessário clonar a Wiki pois é mais fácil editar diretamente pelo próprio Gitlab, em forma de markdown.
@@ -32,3 +60,33 @@ Após selecionar o repositório que deseja clonar, irá aparecer um botão escri
 
 Pronto, você agora possui uma instância local do repositório! :smile:
 
+
+# Configuração do Ambiente de Desenvolvimento Frontend
+
+### Configurando a IDE
+
+Para o desenvolvimento do código e fácil controle de versionamento (GitLab) sugerimos a instalação do [Visual Studio Code](https://code.visualstudio.com/). O mesmo além de ser uma ótima ferramenta para desenvolvimento conta com extensões que serão essenciais para padronização do código do projeto.
+
+Depois de instalar o Visual Studio Code, acesse sua aba de extensões e instale as seguintes:
+
+* ESLint: Para que a IDE identifique padrões do React que estão sendo desrespeitados.
+* Prettier: Para que a IDE realize a indentação do código de maneira correta.
+
+Caso deseje também, baixe a extensão do Material (Material Theme) no seu VS Code para uma melhor apresentação visualmente da estrutura do projeto
+
+Depois de adicionar as extensões necessárias, falta apenas uma configuração para podermos começar o desenvolvimento. No seu teclado pressione as teclas `ctrl` `shift` `p` para acessar a aba de pesquisa do Visual Studio Code. Pesquise por `settings` e abra o arquivo com nome `Prefernces: Open Settings (JSON)`. Nesse arquivo adicione as seguintes linhas:
+
+```
+"editor.formatOnSave": true,
+"[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+```
+
+> Caso o mesmo já esteja presente, desconsidere.
+
+### Executando o Projeto
+
+Depois de clonar o repositório do GitLab para a sua máquina, acesse o projeto pelo terminal (pode ser diretamente pelo terminald o VS Code) e execute `npm install`. Esse comando irá fazer o download e todas dependências do projeto (esse comando pode demorar bastante para ser executado, então não se preocupe).
+
+Para executar o projeto execute o seguinte comando no terminal `npm start`.
\ No newline at end of file