Code Monkey home page Code Monkey logo

nlw_heat-'s Introduction

manipulae-music_logo

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.

get-codes-img

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

get-codes-img



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

get-codes-img



Agore pegue o Client ID e o Client Secret

get-codes-img

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.

get-codes-img


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

nlw_heat-'s People

Contributors

wbgreenarrow avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.