Chat do One Piece
Imersão Alura 2022: Chat feito com React (Aluracord)
Este foi um projeto desenvolvido durante uma Imersão da Alura. A proposta foi desenvolver um chat, nomeado Aluracord, utilizando Javascript, Nodejs e componentes React. No chat é possível enviar mensagens de texto, stickers e também gifs.
Estilizei meu projeto com uma temática de One Piece, e dei a ele o nome de "Online Transponder Snail". As páginas estão em inglês, mas o código em si está em português, incluindo comentários e algumas anotações feitas durante as aulas.
🪧 Vitrine.Dev | |
---|---|
✨ Nome | Chat do One Piece |
🏷️ Tecnologias | HTML, CSS, JavaScript, React, Nodejs |
🚀 URL | https://aluracord-online-transponder-snail.vercel.app |
🔥 Desafio | https://www.alura.com.br/imersao-react |
Detalhes do projeto
Instrutores: @alura, @omariosouto, @peas
A Alura é uma escola online de tecnologias, que promove estas imersões (grátis e aberta a todos) em que se aprofunda em uma tecnologia, desenvolvendo um projeto durante 5 dias, com o apoio de uma equipe especializada, que ajuda e ensina por meio de vídeos e lives, além de abrir um servidor no Discord para os participantes conversarem, tirarem dúvidas e compartilharem conhecimentos e resultados.
Para o projeto, foram desenvolvidas quatro telas: login, que puxa a imagem do usuário (no caso, os Piratas do Chapéu de Palha) dos pôsteres disponibilizados na Wiki de One Piece; a tela de chat, em que é possível enviar textos, stickers e também gifs (por meio da URL do gif); uma tela para erro 404; e, por fim, uma tela para usuários não cadastrados que tentem fazer login no chat.
O projeto iniciou sem um back-end para armazenar as mensagens, e depois evoluiu para uma integração com o Supabase, uma ferramenta open source que funciona como um "Back-End as a Service", permitindo criar um banco de dados para armazenar as mensagens do chat e persistir todo o histórico de mensagens trocadas. Infelizmente, por ser gratuito, o Supabase pausa bancos criados que fiquem inativos por muito tempo, então pode ser que ao acessar o site, o banco não esteja mais funcionando e não seja possível conectar ao chat (somente à tela de login).
O chat criado pode ser acessado em https://aluracord-online-transponder-snail.vercel.app.
Telas do projeto
Página de login
Chat
Destaque para o botão com envio de emojis/stickers
Tela 404
Tela para acesso indevido
Agradecimentos
Agradeço à Alura por essa semana intensa em que mergulhei em tecnologias que tinha zero conhecimento, mas que me diverti e aprendi muito. Um agradecimento especial ao Mario Souto, que ministrou as aulas e que manja muito de várias tecnologias.