https://github.com/felipeg-almeida/react-dropmail-challenge

Desafio front-end que consiste 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://github.com/felipeg-almeida/react-dropmail-challenge

bulma-css dropmail email react

Last synced: 20 days ago
JSON representation

Desafio front-end que consiste 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.

• Host: GitHub
• URL: https://github.com/felipeg-almeida/react-dropmail-challenge
• Owner: FelipeG-Almeida
• Created: 2023-10-25T20:14:23.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-03T19:22:35.000Z (about 1 year ago)
• Last Synced: 2024-10-16T19:06:41.842Z (2 months ago)
• Topics: bulma-css, dropmail, email, react
• Language: JavaScript
• Homepage: https://felipeg-almeida.github.io/react-dropmail-challenge/
• Size: 1.95 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
DropMail.me Challenge




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.




🚀 Demo


[https://felipeg-almeida.github.io/react-dropmail-challenge/](https://felipeg-almeida.github.io/react-dropmail-challenge/)

Tela Desktop 🖥️


![tela 1](https://github.com/FelipeG-Almeida/react-dropmail-challenge/assets/73674044/a060eed6-2825-4c2a-a39f-fe4b7e85bd2d)

![tela 2](https://github.com/FelipeG-Almeida/react-dropmail-challenge/assets/73674044/420fb59a-3f41-4ef5-bae8-86c7ade79b9e)

Tela Mobile 📱




  

    

  



  

🧐 Funcionalidades


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.

🛠️ Passos de Instalação:


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


Tecnologias usadas no projeto:

*   API Dropmail: https://dropmail.me/api/

*   React

*   Framework CSS Bulma: https://bulma.io/

API


Para obter os dados, utilizei a API do DropMail. A comunicação é realizada utilizando [GraphQL](https://graphql.org/), 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](https://corsproxy.io/)

>  This is a challenge by [Coodesh](https://coodesh.com/)

---