Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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-15T17:26:41.237Z (about 1 month 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 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/)
---