Sites e serviços online geralmente exigem um endereço de e-mail válido para registrar acessar ou receber conteúdo protegido etc. No entanto o problema é que alguns desses sites podem usar nossos endereços de e-mail para enviar mensagens indesejadas. As pessoas não querem se preocupar mais com spam propagandas no email hackers e ataques de robôs. Uma boa maneira de lidar com isso é usar um endereço de e-mail temporário se você não tiver certeza de que este site é absolutamente confiável e confiável. Dessa forma você pode manter seus e-mails longe de spam e proteger sua privacidade. Este projeto consistem em uma aplicação que consome uma API de email temporário para que os usuários possam utilizar serviços sem expor seu email real.
https://felipeg-almeida.github.io/react-dropmail-challenge/
Algumas funcionalidades do projeto são:
- Gerar um endereço de email temporário;
- Copiar o endereço de email gerado;
- Visualizar a caixa de entrada deste email;
- Para capturar a chegada de novos emails a caixa de mensagens é atualizada a cada 15 segundos;
- Os dados de acesso ao email são salvos no localstorage para que a conta não seja perdida ao atualizar a página. Caso o email tenha expirado o registro é removido do storage.
1. Certifique-se de que você tenha o Node.js e o npm (gerenciador de pacotes do Node.js) instalados em sua máquina. Você pode fazer o download e instalá-los em https://nodejs.org/.
2. Clone o repositório do GitHub
git clone https://github.com/FelipeG-Almeida/react-dropmail-challenge.git
3. Após clonar o repositório você deve entrar no diretório do projeto:
cd react-dropmail-challenge
4. Instale as dependências do projeto listadas no arquivo package.json usando o npm. Isso baixará e instalará todas as dependências necessárias:
npm install
5. Agora que todas as dependências estão instaladas você pode executar os scripts definidos no package.json. Por exemplo para iniciar o projeto em modo de desenvolvimento você pode usar o seguinte comando:
npm run dev
Tecnologias usadas no projeto:
- API Dropmail: https://dropmail.me/api/
- React
- Framework CSS Bulma: https://bulma.io/
Para obter os dados, utilizei a API do DropMail. A comunicação é realizada utilizando GraphQL, enviando todas as requisições para o endereço https://dropmail.me/api/graphql/MY_TOKEN (HTTP) ou wss://dropmail.me/api/graphql/${AUTH_TOKEN}/websocket (WebSocket).
Conforme explicado na documentação, você pode usar qualquer string única de 8 caracteres ou mais como ${MY_TOKEN}.
Nota: tive alguns problemas de cors durante o desenvolvimento utilizando a API, por isso fiz uso do proxy CorsProxy IO
This is a challenge by Coodesh