Batch 09 Design
Batch 09 Design
R) ENGINEERING COLLEGE
(An Autonomous Institution)
Department of Information Technology
E-MAIL ALERT ON
WHATSAPP
BATCH NO:09
1. React
2. Node.js v12 or higher
3. WhatsApp API
4. Email Service
5. Terminal/Command Line Interface
HARDWARE REQUIREMENTS
• A WhatsApp API client that connects through the WhatsApp Web browser app.
•It uses Puppeteer to run a real instance of WhatsApp Web to avoid getting blocked.
Imap
• Node-imap is an IMAP client module for node.js
• We need Your email details and password from frontend and in backend we use that data
to fetch your emails using imap.
MODULE DESCRIPTION
Frontend
React
Axios
• For making HTTP requests from the client-side to the server.
DESIGN THROUGH UML DIAGRAM
USECASE DIAGRAM
ALGORITHM DESCRIPTION
1. User Input:
• The user fills out a form on the frontend (built with React) providing:
• Email address
• WhatsApp number
• Message content
• Trigger conditions (optional)
2. Frontend Validation:
• Validate user input to ensure required fields are filled and formats are correct (e.g., email
validation, phone number validation).
ALGORITHM DESCRIPTION
3. Client-Server Communication:
• Upon form submission, the frontend (React) sends a POST request to the backend
(Node.js/Express) containing the form data.
4. Backend Processing:
• The backend (Node.js) receives the request and validates the data again for security purposes.
• If validation passes, the backend triggers the email sending process using Nodemailer to send an
alert to the provided email address.
• Simultaneously, it uses the WhatsApp API to send a WhatsApp message to the provided number
with the specified message content.
ALGORITHM DESCRIPTION
6. Frontend Feedback:
• The frontend displays a success or error message to the user based on the response received
from the backend.
WIREFRAMES OF THE PROJECT
Dashboard :
The dashboard includes alert configurations.
Each alert configuration includes fields for:
• Email address
• WhatsApp number
• Message content