Sobre | Funcionalidades | Tecnologias | Layout | Como usar | Licença | Aprendizados |
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.
- 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
- 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.
Projeto desenvolvido utilizando as seguintes tecnologias:
O layout do projeto está disponivel através do link abaixo:
Para usar o projeto é necessario seguir as seguintes etapas:
- Possuir o backend configurado e rodando
- Alterar o Client ID no arquivo
src > configs > env.ts - Alterar as configurações do OAuth do Github
Homepage URLeAuthorization callback URLpara a url da aplicação web
normalmente localhost:3000
- 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 devEsse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- 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