Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/danicaus/alura-aluracord-imersaoreact

Repositório criado durante imersão React da Alura feita em Janeiro de 2022
https://github.com/danicaus/alura-aluracord-imersaoreact

aluracord imersao-react reactjs supabase-js vercel

Last synced: 4 months ago
JSON representation

Repositório criado durante imersão React da Alura feita em Janeiro de 2022

Awesome Lists containing this project

README 

        


  Discord Alura Memes




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.



---



## Desafios implementados



Além do conteúdo das aulas, segui com alguns desafios propostos e ideias particulares.



### **Tema "Memes"**

Na ideia original, o tema era "Matrix". Fomos desafiados a trazer um tema diferente, apliquei o meme do pai encarando.



### **Dados do usuário do Github**

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](https://youtu.be/TsaLQAetPLU), [Rafa Ballerini!](https://github.com/rafaballerini)



### **Gravar nome do user no localStorage**

Na aula o login do usuário é implementado à url, no entanto usei o armazenamento em localStorage.



### **Botão de enviar**

Adicionado um botão para enviar mensagem no chat, que executa a mesma função que a tecla "Enter", ensinada na Imersão.



### **Botão de remoção da mensagem**

Incluído um botão para excluir a mensagem. Adaptei o CSS para que ele ficasse na extremidade direita da caixa de mensagem.



### **Formato de data**

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.



### **Página de erro**

Foi criada uma página de 404, também com um meme feliz.



---

## **Tecnologias utilizadas**

### **Next**

Aplicação criada com [NextJS](https://nextjs.org/) com [setup manual](https://nextjs.org/docs/getting-started#manual-setup).



Aplicamos o [next/router](https://nextjs.org/docs/api-reference/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.



### **@skynexui**



A fim de facilitar a estilização dos blocos e acelerar a implementação do projeto, foi utilizado componentes já prontos da [SkynexUI](https://github.com/skynexui/components), que são facilmente editáveis para personalização.



[O Storybook](https://storybook.skynexui.dev/?path=/story/introduction--page) dessa biblioteca permite a visualização de possíveis adaptações, o que facilita ainda mais sua implementação.



Valeu, [Dev Soutinho!](https://github.com/omariosouto) ❤



### **Supabase**



O [Supabase](https://supabase.com/) 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*](https://supabase.com/docs/reference/javascript/subscribe).



Extremamente fácil de criar, administrar e usar, além de ser de graça!



### **@crello/react-lottie**



[Biblioteca](https://github.com/crello/react-lottie) para uso de animações baixadas em um arquivo json a partir da página [Lottie Files](https://lottiefiles.com/). 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.



---

## Contribuição



Esse projeto ainda não está bem estruturado para receber contribuições, mas já criei [algumas issues](https://github.com/danicaus/aluracord-imersaoreact-0122/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! 



---

## Agradecimentos



Sou especialmente grata ao professores dessa Imersão [Mario Souto](https://github.com/omariosouto) e [Paulo Silveira](https://github.com/peas) 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! 🤩