Projeto criado na Imersão React da Alura.
A Imersão React desenvolveu um projeto de sala de chat para troca de mensagens entre usuários. Contém uma tela de login, que se comunica com a api do Github para trazer a foto e o nome do usuário.
Após entrar na sala de chat, o usuário consegue enviar mensagens, que são armazenadas em um banco de dados. No caso desse projeto, foi utilizado o Supabase para essa finalidade.
Aplicação criada com NextJS com setup manual.
Aplicamos o next/router para redirecionamento de página entre o login e a página de chat. Isso permite com que a transição entre as páginas seja feita do lado do browser, melhorando a performance de carregamento da aplicação.
Usei a função ServerSideProps para exportar a chave e a url de requisição para o Supabase. Com isso, o Next pode se comunicar com o Node e obter as chaves de ambiente e passar como props para a página de chat, e essa página pode se comunicar com o Supabase sem expor as variáveis no browser.
A fim de facilitar a estilização dos blocos e acelerar a implementação do projeto, foi utilizado componentes já prontos da SkynexUI, que são facilmente editáveis para personalização.
O Storybook dessa biblioteca permite a visualização de possíveis adaptações, o que facilita ainda mais sua implementação.
O Supabase foi usado como um serviço de backend. Ele pode ser usado de várias formas, mas neste projeto foi usado como um database para armazenar e alterar as mensagens enviadas.
Para atualização do chat em tempo real, foi usada a feature de subscribe.
Extremamente fácil de criar, administrar e usar, além de ser de graça!
Biblioteca para uso de animações baixadas em um arquivo json a partir da página Lottie Files. Permite adicionar a animação como um componente React, bem como configurar alguns parâmetros para a animação.
As animações são muito lindas! 😍
Usada na página 404.