Sobre • NLW Heat • Instalação • Tecnologias • Autor

Sobre

Projeto desenvolvido durante a NLW Heat, evento criado pela RocketSeat. Um evento 100% online e GRATUITO, com conteúdo exclusivo e INÉDITO.

Ocorreu do dia 18 ao dia 24 de Outubro de 2021 e teve como intuito mostrar na prática o poder da stack NodeJS + ReactJS + React Native e como essas tecnologias podem te levar até os seus maiores objetivos como programador.

NLW Heat

O NLW Heat foi uma aplicação voltada para o DoWhile 2021 cujo objetivo principal era reproduzir, tanto na web quanto no mobile, os comentários realizados sobre o evento em tempo real. O login dos espectadores é feito com a conta do Github e abaixo podemos ver a home da aplicação com o botão para realizar o login para que o usuário possa comentar sobre o evento:

Após o login feito utilizando a conta do Github, uma caixa de texto é exibida para que o usuário possa registrar seu comentário e torna-lo publico, conforme podemos ver a seguir:

Feito isso o usuário já estará apto a realizar seus comentários que serão exibidos conforme imagem abaixo:

No mobile o comportamento é o mesmo. Inicialmente o usuário terá a opção de login com o Github e o mural com os comentários já enviados por outros usuários:

Após comentários serem enviados por outros usuários, eles já serão disponibilizados nos murais independentemente do login ser realizado ou não, pois o login é necessários apenas para comentar e não para visualizar os comentários, conforme ilustrado a seguir:

Por fim, deixo o GIF abaixo para ilustrar o funcionamento da aplicação de maneira geral:

Instalação

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.

🎲 Rodando o Back End (servidor)

# Clone este repositório
$ git clone git@github.com:MrRioja/nlw-heat.git

# Acesse a pasta do projeto no terminal/cmd
$ cd nlw-heat

# Vá para a pasta backend
$ cd backend

# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn

# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn dev

# O servidor inciará na porta 4000 - acesse <http://localhost:4000>

🖥️ Rodando o Front End (Web)

# Clone este repositório
$ git clone git@github.com:MrRioja/nlw-heat.git

# Acesse a pasta do projeto no terminal/cmd
$ cd nlw-heat

# Vá para a pasta web
$ cd web

# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn

# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn dev

# O servidor inciará na porta 3000 - acesse <http://localhost:3000>

📱 Rodando o App (Mobile)

# Clone este repositório
$ git clone git@github.com:MrRioja/nlw-heat.git

# Acesse a pasta do projeto no terminal/cmd
$ cd nlw-heat

# Vá para a pasta mobile
$ cd mobile

# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn

# Execute a aplicação
$ expo start

# Será aberto no terminal o menu do Expo onde poderá scanear o QR Code para executar o app diretamente no seu celular ou as opções de executar no emulador android ou iOS

Tecnologias

Autor

Luiz Rioja

Backend Developer