ChronoMail: Agendador de E-mails Automatizados com Cron Job - Front end 🕰️📧

Link para acessar o projeto (🚧 em construção)

Descrição 📄
Requisitos Funcionais e Requisitos Não Funcionais 📋
Diagrama de Caso de Uso 🖥️
Diagrama de Classes 📚
Tecnologias Utilizadas 💻
Pré-requisitos 🛠️
Configuração Back-end ⚙️
Contribuições 🤝

Descrição 📄

Este é um projeto feito para o meu tcc, onde construi uma solução full stack que permite aos usuários agendar o envio de e-mails personalizados em uma data específica. A interface de usuário (UI) em React permite a inserção de dados como nome completo, e-mail, data de envio, assunto e mensagem. O back-end, utilizando NestJS, processará essas requisições e armazenará os dados em um banco de dados MySQL. Um cron job programado realizará o envio dos e-mails na data especificada, utilizando a API do MailerSend. O nome ChronoMail conjuga o conceito de tempo (Chrono), com o foco da aplicação (Mail), além de especificar o método de automatização (Cron Job).

---

Requisitos Funcionais e Requisitos Não Funcionais 📋

Requisitos Funcionais (RF) ✅:

RF1: Agendamento de E-mails:

Os usuários devem poder agendar e-mails fornecendo as seguintes informações: nome, email do destinatário, data de envio, assunto e mensagem

RF2: Envio Automático de E-mails:

O sistema deve enviar automaticamente os e-mails na data e hora especificadas pelos usuários, por meio da integração com o SendGrid.

RF3: Confirmação de Agendamento:

Os usuários devem receber uma confirmação após agendarem um e-mail, indicando que o agendamento foi bem-sucedido.

Requisitos Não Funcionais (RNF) ❌:

RNF1: Usabilidade:

A interface de usuário deve ser intuitiva, permitindo o agendamento de e-mails de maneira simples e direta.

RNF2: Performance:

O sistema deve processar rapidamente o agendamento e garantir o envio de e-mails no tempo agendado, sem atrasos.

RNF3: Segurança:

As informações do usuário e o conteúdo do e-mail devem ser protegidos para garantir confidencialidade e integridade. Isso inclui a criptografia de dados sensíveis em trânsito e em repouso.

RNF4: Escalabilidade:

O sistema deve ser capaz de lidar com um aumento no volume de e-mails agendados sem perder desempenho.

RNF5: Disponibilidade:

O sistema deve estar disponível constantemente, permitindo que os usuários agendem e-mails a qualquer hora.

RNF6: Conformidade:

O sistema deve estar em conformidade com regulamentos de proteção de dados e privacidade, como o GDPR ou a LGPD.

---

Diagrama de Caso de Uso 🖥️

Descrição: O usuário preenche e submete o formulário de agendamento de e-mails com os dados do destinatário, data de envio, assunto e corpo do e-mail. O sistema valida as informações e as armazena no banco de dados para envio futuro.

Ator Primário: Usuário

Fluxo Principal:

1. Usuário seleciona a opção para agendar um novo e-mail.
2. Usuário preenche o formulário com todos os detalhes necessários.
3. Sistema valida as informações.
4. Sistema salva o agendamento no banco de dados.
5. Sistema mostra uma mensagem de sucesso.

Fluxo Alternativo: Caso alguma informação esteja inválida, o sistema alerta o usuário e solicita a correção dos dados.

Pós-condições: E-mail é agendado para ser enviado automaticamente na data e hora especificadas

---

Diagrama de Classes 📚

Entidade: Mail (E-mail Agendado)

• ID (Primary Key, UUID): Identificador único do e-mail agendado.
• DestinationName (String): Nome do destinatário do e-mail.
• DestinationAddress (String): Endereço de e-mail do destinatário.
• DueDate (Timestamp): Data e hora em que o e-mail deve ser enviado.
• Subject (String): Assunto do e-mail.
• Body (Text): Corpo da mensagem de e-mail.
• Status (String): Status atual do e-mail (ex: aguardando, enviado, falhou, etc.).
• CreatedAt (Timestamp): Data e hora em que o agendamento do e-mail foi criado.
• UpdatedAt (Timestamp): Data e hora da última atualização do agendamento.

---

Tecnologias Utilizadas 💻

Front-end 🎨

• React: Usado para construir a interface do usuário devido à sua eficiência em renderização e vasto ecossistema de componentes reutilizáveis.

Back-end 🔧

• NestJS: Framework de backend escolhido por sua arquitetura modular e integração eficiente com TypeScript, melhorando a qualidade do código e produtividade
• MySQL: Sistema de gerenciamento de banco de dados relacional, utilizado para armazenar informações de agendamentos de e-mails e dados de usuários
• Cron Jobs: Implementados dentro do NestJS para gerenciar o agendamento e o envio de e-mails.
• Swagger API: Utilizado para a documentação da API.

Integração e Serviços Externos 🌐

• MailerSend: Utilizada para o envio de e-mails. A escolha por MailerSend se dá pela sua robustez, capacidade de escalabilidade e funcionalidades avançadas.

Ferramentas de Desenvolvimento e Suporte 🛠️

• Visual Studio Code (VS Code): Editor de código escolhido por sua flexibilidade, vasta gama de extensões disponíveis e suporte integrado para desenvolvimento com React e NestJS.
• GitHub: Para versionamento de código e colaboração entre desenvolvedores.
• Postman: Ferramenta para testar e documentar as APIs desenvolvidas, permitindo validar todas as requisições e respostas do backend antes da integração com o frontend.
• Railway: Deploy para a parte de back end.
• Vercel: Deploy para a parte de front end.

---

Pré-requisitos para rodar o projeto 🛠️

Certifique-se de ter instalados antes de executar o projeto:

• Node.js - (v.20.10.0)
• npm - (v.10.5.2)

---

Configuração e Instalação Front-end ⚙️

1. Clone este repositório para o seu ambiente local.

git clone https://github.com/htamagnus/chronomail-frontend-react-tcc.git

---

2. Navegue até a pasta back-end e execute o seguinte comando para instalar as dependências (Node 20):

npm install

---

3. Configurações de back-end:

• Certifique-se de ja ter configurado o back-end a partir desse repositório
• Crie um .env com o valor para REACT_APP_BASE_URL

---

4. Inicie o projeto com o seguinte comando:

npm run start

---

Contribuições 🤝

Sinta-se à vontade para contribuir para este projeto. Se você encontrar problemas ou tiver sugestões de melhorias, abra uma issue ou envie um pull request.

---