NLW HEAT Uma aplicação feita com NodeJS, ReactJS e ReactNative, que utiliza a API do Github para fazer a autentiação e obtenção dos dados do usuário.

🎨 Telas da Aplicação Web.

🎨 Telas da Aplicação Mobile.

📃 Sobre o projeto.

Uma aplicação que lista e registra em tempo real, as mensagens cadastradas pelo usuario.

Desenvolvido durante o evento #NLW-Heat da RocketSeat.

Funcionalidades

• Listar em tempo real as útilmas 3 messagens salvas pelo usuário

• Registrar uma nova mensagem

🛠 Tecnologias utilizadas

Back-End

• NodeJS
• TypeScript
• Express
• Prisma ORM
• Socket.IO
• SQL-Lite
• JSONWebToken
• Axios

Frot-End

• ReactJS
• TypeScript
• React-Icons
• Sass
• Socket.IO - Client
• Axios

Mobile

• ReactNative
• TypeScript
• Expo
• Moti
• Socket.IO - Client
• Axios

🚀 Rodando o projeto

A aplicação é dividida em 3 partes:

node_heat : é aplicação back-end responsável pela autenticação com github, e gerenciar as regras de negócio.

web : aplicação web front-end.

nlwheatapp : aplicação mobile

Pré-requisitos

• Git
• NodeJS
• Yarn
  
  

Configurando Back-End

Clone o repositório

# Clone o repositório
git clone https://github.com/WBGreenArrow/NLW_Heat-.git

Pegando Client_ID e Client_Secret no GitHub para aplicação web

Acesse github: https://github.com/settings/developers e faça o login com sua conta. Após fazer o login navegue até OAuth Apps e click em New OAuth App.

Agora vamso registrar uma nova aplicação no nosso perfil do github. Preencha os campos igual imagem abaixo.

Após prencher os campos, click em Register Aplication. Depois de registrar a aplicação é hora de gerar o SECRET_KEY

Click em Generate new client secret

Agore pegue o Client ID e o Client Secret

Com esse dados em mãos é hora de "setar" no back-end :)

Acesse a pasta node_heat e abra o arquivo .env , altere o valor da variável GITHUB_CLIENT_ID com o Client_ID, e GITHUB_CLIENT_SECRET com Client_Secret.

Salve as alterações feita no arquivo .env. Agora vamos rodar o nosso back-end :)

💻 Rodando o Back-End

Navegue até a pasta do projeto clonado e execute os comandos abaixo

# Entra na pasta da node_heats
cd node_heats

# Instala as dependências
npm install

Após concluir a instalação das dependências, ainda no terminal da pasta do back-end execute o comando abaixo

# Inicia a aplicação back-end
yarn start

🖥 Rodando o Front-End

Precisamos fazer uma pequena configuração.

Navegue até a pasta Context e abra o arquivo auth

Vamos passar para variável CLIENT_ID o Client_ID que pegamos no github.

Salve as alterações feias no arquivo, e vamos rodar o front-end.

Navegue até a pasta raiz do front-end e execute os comandos abaixo

# Entra na pasta do front-end
cd web

# Instala as dependências
npm install

Após concluir a instalação das dependências, ainda no terminal da pasta do front-end execute o comando abaixo.

# Inicia a aplicação
yarn start

# Após isso a aplicação pode ser utilizada acessando o endereço http://localhost:3000