Aplicação de uma 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.
Projeto criado na Imersão React da Alura em Janeiro de 2022.
Além do conteúdo das aulas, segui com alguns desafios propostos e ideias particulares.
Na ideia original, o tema era "Matrix". Fomos desafiados a trazer um tema diferente, apliquei o meme do pai encarando.
Inspirada na ideia dos memes, trouxe alguns dados do Github:
- Data de criação da conta no Github
- Número de seguidores
- Número de pessoas que o user segue
- Quantidade de estrelas recebidas em todos os repositórios
- Quantidade de repositórios públicos
- Número de commits
- Data do último commit
Com isso, essas informações o app seleciona um meme.
Também adaptei uma aplicação que uso no meu perfil para mostrar as linguagens mais usadas pelo usuário:
Link do repositório da aplicação: https://github.com/anuraghazra/github-readme-stats
Obrigada pelo vídeo, Rafa Ballerini!
Na aula o login do usuário é implementado à url, no entanto usei o armazenamento em localStorage.
Adicionado um botão para enviar mensagem no chat, que executa a mesma função que a tecla "Enter", ensinada na Imersão.
Incluído um botão para excluir a mensagem. Adaptei o CSS para que ele ficasse na extremidade direita da caixa de mensagem.
Adicionado o horário da mensagem enviada. O bloco passado na Imersão só enviada a data.
Além disso, como o Supabase grava o horário do post da mensagem sem considerar o fuso horário do Brasil, fiz com que o horário das mensagens obedecesse o horário do Brasil.
Foi criada uma página de 404, também com um meme feliz.
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.
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.
Valeu, Dev Soutinho! ❤
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.
Esse projeto ainda não está bem estruturado para receber contribuições, mas já criei algumas issues, que registram melhorias e bugs já encontrados.
Caso encontre um bug ou tenha uma nova sugestão de melhoria, sinta-se à vontade para criar uma issue para discutirmos sua implementação!
Sou especialmente grata ao professores dessa Imersão Mario Souto e Paulo Silveira pelos aprendizados alcançados com esse projeto, e pela oportunidade de exercitar os conhecimentos que ganhei desde Julho/21, quando comecei a aprender React.
Agradeço também ao time da Alura por essa entrega! Admiro demais vocês! 🤩