Aluracord Retro City

---

Status do Projeto: Concluído ✔️

Descrição

Este projeto é um chat que envia e recebe mensagens em tempo real, as mensagens ficam armazenadas num banco de dados no Supabase e sempre que chega uma mensagem nova no servidor todas as telas se atualizam. A aplicação foi desenvolvida com Next.js e SkynexUI.

O projeto foi desenvolvido durante a imersão React da Alura no final de Janeiro/2022, este é uma modificação com novas funcionalidades do projeto original Aluracord Matrix.

Algumas das novas funcionalidades e alterações inclui:

• Estilo: Novas paletas de cores, alteração em quase todo CSS in JSX e nos estilos do SkynexUI.
• 'Validação' de usuário: É preciso digitar um nome de usuário existente no Github com 3 ou mais caracteres pra entrar no chat.
• Loading: Enquanto as mensagens não são carregadas do Supabase exibe uma imagem de loading.
• Informações dos usuários no chat: via onMouseOver nos avatares abre uma div contendo o nome e o avatar do usuário como links para seu Github.
• Validação da mensagem texto: Mensagens vazias não são enviadas para o servidor.
• Validação dos stickers: Mensagens de sticker não cadastrado ou com erros de sintaxe não são enviados para o servidor e acusam erro.
• Tag title e favicon personalizados: Modificação das tags geradas pelo Next.js através do arquivo '_document.js'.

Demo

Confira o projeto no link: https://aluracord-retro-city-bruno2077.vercel.app/

Pré Requisitos

Para instalar o projeto localmente é necessário ter o Yarn (1.22.15) e o Node(14.17.6) instalados na máquina. O git não é necessário mas agiliza a instalação como veremos a seguir. As versões entre parêntesis foram as utilizadas no projeto.

Instalação

A maneira mais rápida de instalar este projeto é abrindo o terminal/cmd e:

# clone este repositório
git clone https://github.com/bruno2077/aluracord-retro-city.git

# abra o diretório da aplicação
cd aluracord-retro-city

# instale o projeto e todas as dependencias com o yarn:
yarn install

# execute o projeto
yarn dev

Como usar

Com o projeto rodando acesse-o no navegador no endereço http://localhost:3000

Na tela de login basta digitar um nome de usuário existente no Github que contenha 3 ou mais caracteres, não é pedido senha nem nada, o usuário só precisa existir no Github.

Em seguida é só enviar qualquer mensagem de texto ou um dos stickers no chat.

Tecnologias

• Javascript
• Next.js
• SkynexUI
• Yarn
• Node
• Supabase

Autor

Desenvolvido por Bruno Borges Gontijo, entre em contato.

Licença

MIT © Bruno Borges Gontijo