VinChat - Plataforma de Chat Online

Aplicação de chat online com interação Realtime, login com OAuth2, entre outras features. Foi criado durante a imersão react da @alura com @omariosouto e @peas.

Página inicial - VinChat

🔨 Funcionalidades

• Funcionalidade 1 Autenticação integrada com o Github e Google: permite fazer o login sem digitar senha ou criar uma nova conta!
• Funcionalidade 2 Baseado no realtime: dado dois usuários logados eles podem conversar com atualização em tempo real!
• Funcionalidade 3 Stickers: banco de figurinhas para envio em mensagens!
• Funcionalidade 4 Resizer: é possível decidir o tamanho da janela de chat dinamicamente!
• Funcionalidade 5 Responsivo: segue os padrões de responsividade!
• Funcionalidade 6 Página e barra de carregamento: permite um melhor feedback em relação aos eventos do aplicativo!

⚡ Tecnologias

• React
• Next
• SkynexUI
• Supabase

📁 Acesso ao projeto

Você pode visualizar a última versao da aplicação ou seguir o próximo tópico e rodá-la localmente.

🛠 Abrir e rodar o projeto

Primeiro, você deve ter o node, npm e git instalados em sua máquina, confirme executando os seguintes comandos (se houver erro precisa instalá-los):

node -v && npm -v && git -v

Agora, navegue até o diretório que o projeto ficará e clone o projeto:

git clone https://github.com/vinimrs/VinChat.git
cd VinChat/

Após isso, instale as dependências do projeto com o comando npm install ou npm i:

npm i

Finalmente, execute o comando npm run dev para iniciar a aplicação:

npm run dev

A aplicação deve estar visível em seu navegador, por padrão, no endereço http://localhost:3000.

✅ Melhorias

Ideias de melhorias para o projeto:

• Barra de sticker dinâmica ✅
• Visualização do perfil atraves do icone no chat ✅
• Adicionar opção de deletar, copiar a mensagem
• Adicionar componente de carregamento dos dados ✅
• Adicionar OAuth do Google ✅
• Adicionar testes na aplicação
• Criar uma versão mobile
• Atualizar o chat se uma mensagem for removida

Participação 👇