Sobre   |    Funcionalidades    |    Tecnologias    |    Layout   |    Como usar   |    Licença   |    Aprendizados   |   

📃 Sobre o projeto

A setima edição do NLW promovido pela @RocketSeat serviu como aquecimento para o DoWhile 2021, então nada melhor que o tema do projeto fosse nesse sentido. O objetivo é o desenvolvimento de uma aplicação fullstack que permita os usuarios compartilharem suas expectativas para o evento, utilizando as tecnologias mais atuais do mercado. Aqui se encontra o front-end web da nossa aplicação utilizando ReactJS e autenticação com OAuth do Github.

Outras etapas do projeto:

• Back-end
• Mobile

⚙ Funcionalidades

• Login com a conta do Github
• Compartilhamento dos dados do perfil com Context Api
• Listagem de mensagens recebidas do servidor
• Atualização de mensagens em tempo real com socket.io

Extras adicionados pós NLW

• Validação de formulario.
• Uso da lib Toastify para alertas da pagina.
• Animações com Framer Motion na lista de mensagens e botões.
• Algumas mensagens condicionais melhorias de UX.

✨ Tecnologias

Projeto desenvolvido utilizando as seguintes tecnologias:

• Vite
• Typescript
• ReactJs
• Sass
• Socket.IO
• Framer Motion
• React-toastify
• OAuth Github

🔖 Layout

O layout do projeto está disponivel através do link abaixo:

• Layout Figma

🤔 Como usar

Para usar o projeto é necessario seguir as seguintes etapas:

1. Possuir o backend configurado e rodando
2. Alterar o Client ID no arquivo src > configs > env.ts
3. Alterar as configurações do OAuth do Github Homepage URL e Authorization callback URL para a url da aplicação web

normalmente localhost:3000

4. Seguir os comandos:

  # Clonar o projeto:
  $ git clone https://github.com/weversonneri/nlw-heat-web.git

  # Entrar no diretório:
  $ cd nlw-heat-web

  # Instalar as dependências:
  $ yarn

  # Rodar a aplicação:
  $ yarn dev

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Aprendizados

• Algumas das principais coisas que aprendi nessa etapa
  • Introdução ao Vite
  • Introdução a estilização com Sass
  • Autenticação com OAuth do Github
  • Atualização em tempo real com Socket.io