🤿 Aplicação "clone" do Discord desenvolvida durante o evento Imersão React 4 da Alura 🤿 Em construção 🚧
• Sobre • Features • Demonstração • Como executar • Tecnologias • Autora •
A Imersão React da Alura é para quem quer expandir o seu conhecimento em JavaScript ao desenvolver projetos de front-end utilizando o React como principal ferramenta.
Durante a imersão, desenvolvemos um novo projeto com Next.js, aplicamos conceitos gerais em novos desafios, utilizamos componentes do React como JSX, useState e useEffect, e adquirimos maior autonomia como front-end, entendendo conceitos fundamentais, não apenas bibliotecas.
Aula 1
Na primeira aula de React, começamos a desenvolver uma área de login no Aluracord (inspirado no Discord). Criamos desde o package.json até os arquivos bases do Next.js para iniciar nosso projeto, além de ter o CSS-in-JS com styled-jsx para cuidar da camada de estilo da nossa aplicação.
Também foi possível customizar o Aluracord, escolhendo um tema da nossa preferência entre filmes, séries, esportes, desenhos etc. Nesse caso, o tema escolhido foi a série britânica Doctor Who, da BBC.
Aula 2
Na segunda aula, aprendemos a lidar com o state do React e como trabalhar com eventos como onClick e onSubmit. Na página de login, agora é possível escrever o nome do usuário do GitHub para entrar no chat. Também demos início a página de chat, ainda sem muitas personalizações.
Como detalhes adicionais, o nome e foto de usuário são alterados automaticamente na área ao lado do formulário, onde o nome também conta com um link para o perfil real do GitHub.
Aula 3
Na terceira aula, criamos e estilizamos a estrutura do chat e fizemos ele funcionar inicialmente sem nenhum Back-End. Entendemos um pouco mais de como podemos trabalhar com state no React e criamos um campo que ao apertarmos o Enter no teclado, envia a mensagem para o chat.
Como detalhe adicional, também foi criado um botão para a mensagem ser enviada clicando.
Aula 4
Na quarta aula, aprendemos a utilizar o Supabase, uma ferramenta Back-end as a Service, a fim de termos um banco de dados real time que guarda as mensagens do chat.
Como detalhe adicional, ao clicar na foto da pessoa que enviou a mensagem no chat, é aberta uma janela com informações do seu usuário do GitHub, bem como um link para seu perfil no username.
Aula 5
Na quinta e última aula, fizemos uma pequena validação de username, implementamos um botão com figurinhas temáticas, e deixamos o chat o mais real time possível.
Como detalhe adicional, foi adicionada uma tela de loading antes do chat renderizar e foram alteradas as imagens de fundo da tela inicial e chat.
O deploy da aplicação pode ser acessado na Vercel.
Devido ao uso do Supabase, este projeto possui apenas uma parte:
- Frontend (pasta raíz do projeto)
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js.
Além disso, é bom ter um editor para trabalhar com o código, como o VSCode.
# Clone o repositório
$ git clone git@github.com:dandara-dias/alura-doctor-who.git
# Entre na pasta do repositório que você acabou de clonar
$ cd alura-doctor-who
# Instale as dependências
$ npm install
# Inicie a aplicação
$ npm run dev
# A aplicação iniciará na porta 3000 - acesse http://localhost:3000 As seguintes ferramentas foram usadas na construção do projeto:
Website (React + JavaScript)
Veja o arquivo package.json
Server (Supabase)
- Editor: Visual Studio Code
- Markdown: Rocketseat
- Paleta de cores: Coolors
- GIFs: Giphy
