Início Profile Projeto
Avatar de

Matheus Ricardo Uihara Zingarelli

Chat do One Piece

  • HTML
  • CSS
  • JavaScript
  • React
  • Nodejs

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

screenshot da tela de login

Chat

screenshot da tela de chat

Destaque para o botão com envio de emojis/stickers

screenshot com destaque para o botão de envio de stickers

Tela 404

screenshot da tela de erro 404

Tela para acesso indevido

screenshot da 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.