Legião dos Protetores é uma aplicação web interativa que permite aos usuários cadastrar uma equipe de super-heróis através de um formulário detalhado. Os usuários preenchem as informações necessárias e enviam o formulário, recebendo um e-mail de confirmação com os dados enviados. Este projeto foi desenvolvido utilizando Node.js para o backend, e JavaScript, HTML e CSS para o frontend, proporcionando uma experiência de usuário eficiente e organizada.
-
Cadastro e Validação de Usuário:
- Quando o usuário preenche e envia o formulário, a aplicação processa a rota
api/register, cadastrando o nome e o e-mail no banco de dados do Firebase. - Se o e-mail não existir no banco de dados, o cadastro é realizado com sucesso.
- Quando o usuário preenche e envia o formulário, a aplicação processa a rota
-
Envio de E-mail de Confirmação:
- Após o cadastro, a aplicação processa a rota
api/sendEmail, valida o domínio do e-mail e envia o formulário preenchido para o e-mail do usuário. - Se houver qualquer problema, como um e-mail inválido ou falha no envio do e-mail, o registro no banco de dados será automaticamente removido.
- Após o cadastro, a aplicação processa a rota
-
Verificação de E-mail Duplicado:
- Se o usuário tentar enviar o formulário novamente com o mesmo e-mail, a aplicação verifica o banco de dados através da rota
api/register. - Se o e-mail já estiver cadastrado, um diálogo informará o usuário que o cadastro já existe e não é necessário repetir o envio, garantindo que cada e-mail seja cadastrado apenas uma vez.
- Se o usuário tentar enviar o formulário novamente com o mesmo e-mail, a aplicação verifica o banco de dados através da rota
Essas funcionalidades garantem que o processo de cadastro e envio de confirmação seja eficiente, seguro e que evite duplicidade de registros no sistema.
- Node.js
- Conta no Firebase
- Conta no Google para configurar a senha de aplicativo
public/: Contém os arquivos estáticos (HTML, CSS, JavaScript).src/api/: Define as rotas da aplicação.src/config/: Contém o arquivo de configuração do Firebase.src/server.js: Arquivo principal do servidor Node.js..env: Arquivo de variáveis de ambiente contendo as credenciais do e-mail.serviceAccountKey.json: Arquivo de credenciais do Firebase.
-
Clone o Repositório
git clone https://github.com/FerdiCayet/Legiao-dos-Protetores.git cd legiao-dos-protetores -
Instale as Dependências
npm install
-
Configure o Firebase
- Vá para o Firebase Console.
- Crie um novo projeto ou selecione um projeto existente.
- Vá para Configurações do Projeto > Contas de Serviço.
- Clique em Gerar nova chave privada e faça o download do arquivo
serviceAccountKey.json. - Salve o arquivo
serviceAccountKey.jsonna raiz do projeto.
-
Configure a Senha de Aplicativo no Google
- Vá para a Conta do Google.
- Vá para Segurança > Verificação em duas etapas e ative-a, se ainda não estiver ativada.
- Em Senhas de aplicativo, crie uma nova senha para o seu aplicativo.
- Anote o e-mail e a senha gerados.
-
Configure o Arquivo
.envCrie um arquivo
.envna raiz do projeto e adicione as seguintes linhas, substituindo os valores<YOUR_EMAIL>e<YOUR_PASSWORD>pelas credenciais do Google configuradas anteriormente.EMAIL_USER=<YOUR_EMAIL> EMAIL_PASS=<YOUR_PASSWORD> MODE_ENV=localhost
-
Inicie a Aplicação
npm start
A aplicação estará disponível em
http://localhost:3001.
Após o envio do formulário, o usuário recebe um e-mail de confirmação. Este e-mail contém uma visualização dos dados que foram preenchidos no formulário, como no exemplo abaixo:
Juntos Somos Invencíveis.