Este projeto permite a geração de endereços de e-mail temporários, tornando mais fácil para você se inscrever em serviços online sem se preocupar com spam ou comunicações indesejadas no futuro.
Este projeto está sob a licença MIT.
- Gerar endereço de e-mail temporário
- Receber e-mails de serviços online
- Notificações de e-mail instantâneas, inclusive em dispositivos móveis
- Copiar para a área de transferência o endereço de email através de botão próprio
- Enviar ou desativar notificações para a área de trabalho
- Recuperar sessão de e-mail válida (expira em 10 minutos sem acesso)
- Renderização de HTML para uma visualização mais fácil das mensagens, incluindo links de confirmação
- Possibilidade de baixar e-mails completos por meio de um link ao lado do horário de recebimento.
-
Acesse a aplicação através do link: TempMail.
-
Na tela principal, clique no botão "Gerar" para gerar um endereço de e-mail temporário.
-
Aguarde o endereço de e-mail ser gerado.
-
Utilize esse endereço de e-mail temporário para receber e-mails de serviços online. O endereço será destruído automaticamente após 10 minutos após fechar a janela.
Com esse endereço de e-mail temporário, você pode se inscrever em serviços online sem se preocupar com spam ou comunicações indesejadas no futuro. Além disso, como o endereço de e-mail é gerado automaticamente, você não precisa se preocupar em lembrá-lo ou armazená-lo em lugar seguro.
- Clone o repositório:
git clone https://github.com/petterkraus/temp-mail.git- Instale as dependências do projeto:
npm i- Inicie a aplicação em modo de desenvolvimento:
npm run dev- Acesse a aplicação: Uma vez que a aplicação iniciou, um link será exibido no terminal. Copie e cole-o em seu navegador de web para acessar a aplicação.
Observe que é importante garantir que você tenha o Node.js e o npm instalados em sua máquina antes de seguir as etapas acima.
Aprecio muito qualquer contribuição para este projeto! Se você gostaria de contribuir, aqui estão algumas dicas:
- Reporte bugs ou faça sugestões de recursos abrindo uma issue no GitHub.
- Contribua com o código, corrigindo bugs ou adicionando novos recursos. Antes de fazer uma pull request, por favor, abra uma issue para discutir as suas ideias.
- Ajude na documentação, corrigindo erros ou adicionando informações úteis.
Para acessar a API utilizando o Axios, foi necessário realizar uma requisição POST e enviar uma consulta ao GraphQL. No entanto, a API não tinha suporte a CORS (Cross-Origin Resource Sharing). Depois de algumas tentativas, consegui contornar esta restrição usando o endereço http://cors-anywhere.herokuapp.com/.
Com a resposta da API, comecei a construir o layout para tornar a aplicação funcional. Também publiquei o projeto no endereço: https://temp-mail-petter.netlify.app/
Ao testar o serviço cors-anywhere, encontrei a limitação de precisar solicitar uma autorização para usá-lo. Para contornar este problema, criei uma API (usando o conceito de BFF - Backend for Frontend) como proxy para entregar a resposta da API original. Testei a API localmente com sucesso e publiquei-a online.
Repositório: https://github.com/petterkraus/dropmail-proxy Endereço da API: https://dropmailproxy.onrender.com
Com a compreensão da API, consegui montar a consulta corretamente e enviar o ID gerado aleatoriamente para a API GraphQL, o que iniciou a sessão de email. Isso me permitiu começar a construir a caixa de entrada de forma eficiente. A aplicação se concentra no arquivo App.jsx, para um desenvolvimento mais rápido, sem a necessidade de usar o hook de contexto.
Nesta fase, comecei a trabalhar na funcionalidade de persistência de emails utilizando o recurso de local storage. Desenvolvi uma rotina de verificação de dados armazenados para restaurar a sessão e continuar a utilizar o e-mail. No entanto, ainda não implementei a validação para o caso em que o email tenha expirado.
Refiz o código, corrigindo as funcionalidades principais, dividi as responsabilidades das funções, separei as duas telas da aplicação em componentes, resolvi problemas relacionados ao setInterval e comecei a trabalhar no layout agora que a funcionalidade estava 100%.
Agora que a aplicação estava recebendo emails de forma estável, passei a trabalhar no design da caixa de entrada para torná-la mais legível. Adicionei informações úteis enviadas pela API, sanitizei o código HTML do corpo do email para exibi-lo com segurança, formatei a data para um formato amigável e ajustei pequenos detalhes.
Nesta fase, as notificações foram implementadas usando a funcionalidade nativa dos navegadores que possuem essa funcionalidade. Além disso, foi implementada uma função para encerrar a sessão caso o email gerado pela API tenha expirado.
Implementei a resposividade da aplicação para telas pequenas, garantindo uma melhor experiência ao usuário em dispositivos móveis.
Apliquei melhorias no código e adicionei uma notificação ao copiar o email para a área de transferência. O projeto está agora pronto para ser apresentado.