8226

ARIFA INSTITUTE OF TECHNOLOGY

CSE

47388D9AA71C2F9864245626D9982F6D

822623104034

NAME: IBM-NJ-EMAIL REMINDER SYSTEM

RITHWAN S

7418840664
 •

Email reminder System

Phase 1 — Problem Understanding & Requirements
Date :
Problem Statement:
Background:
In today’s fast-paced digital environment, individuals and organizations often struggle to keep track
of important tasks, deadlines, and events. Missed emails and forgotten follow-ups can lead to lost
opportunities, reduced productivity, and poor communication.

Problem:
There is no simple, centralized system that allows users to schedule reminders for specific emails or
tasks and receive timely notifications. Existing email platforms lack customizable reminder features
that integrate seamlessly with user workflows.

Objective:
To design and develop an Email Reminder System that enables users to:

• Schedule reminders linked to specific emails or tasks.

• Receive notifications via email or other channels (e.g., SMS, desktop alerts).

• Customize reminder frequency, timing, and priority.

• View, edit, and manage upcoming reminders in a user-friendly dashboard.

Target Users:

• Professionals managing high volumes of email communication.

• Students and educators tracking assignments and deadlines.

• Teams coordinating projects and follow-ups.

• Anyone seeking better time and task management.

Expected Outcomes:

• Increased productivity and task completion rates.

• Reduced missed deadlines and forgotten communications.

• Enhanced user control over email-based workflows.

Users & Stakeholders:

Users
These are the individuals who will directly interact with the system:

1. Individual Professionals

• Use the system to manage follow-ups, meetings, and deadlines.

 •

Need reminders for client communications and internal tasks.

2. Students

• Use it to track assignment due dates, exam schedules, and project submissions.

• Benefit from reminders tied to academic emails.

3. Educators

• Schedule reminders for grading, class announcements, and meetings.

• Use it to follow up on student queries or administrative tasks.

4. Project Managers

• Set reminders for team updates, deliverables, and stakeholder communications.

• Coordinate across multiple email threads and timelines.

5. Small Business Owners

• Use reminders for customer inquiries, vendor follow-ups, and billing cycles.

• Need integration with CRM or invoicing systems.

Stakeholders
These are the people or entities with a vested interest in the system’s success:

1. Product Owner / Client

• Defines the vision, goals, and scope of the system.

• Ensures the system aligns with business needs.

2. Development Team

• Builds and maintains the system.

• Includes front-end and back-end developers, testers, and UI/UX designers.

3. System Administrators

• Manage deployment, security, and performance.

• Ensure uptime and data integrity.

4. Marketing & Sales Teams

• Promote the system to target users.

• Gather feedback to improve adoption and retention.

5. Customer Support Team

• Assists users with onboarding, troubleshooting, and feedback.

• Plays a key role in user satisfaction.

6. Compliance & Legal Advisors

 •

Ensure the system adheres to data privacy laws (e.g., GDPR, HIPAA).

• Review terms of service and user agreements.

User Stories:
Here are some well-crafted User Stories for your Email Reminder System, organized by user type
and functionality. These stories follow the format: As a [user type], I want to [goal], so that
[benefit].

Individual Professionals
• As a professional, I want to set reminders for important client emails, so that I never miss a
follow-up.

• As a busy employee, I want to receive daily summaries of pending reminders, so that I can
prioritize my tasks efficiently.

• As a user, I want to snooze reminders, so that I can reschedule them when I’m not ready to
act.

Students
• As a student, I want to tag academic emails with deadlines, so that I get notified before
assignments are due.

• As a student, I want to view all my reminders in a calendar format, so that I can plan my
study schedule.

Educators
• As an educator, I want to set recurring reminders for weekly grading tasks, so that I stay
consistent with evaluations.

• As a teacher, I want to link reminders to specific student emails, so that I can track
unresolved queries.

Project Managers
• As a project manager, I want to assign reminders to team members, so that responsibilities
are clearly distributed.

• As a manager, I want to monitor reminder completion status, so that I can ensure

accountability.

Small Business Owners

• As a business owner, I want to set reminders for invoice follow-ups, so that I maintain cash
flow.

• As a vendor, I want to receive alerts for unread customer emails after 48 hours, so that I can
respond promptly.

System-Level Stories
 •

As a user, I want to customize the reminder frequency and notification channel, so that it
fits my workflow.

• As a user, I want to search and filter reminders by keyword or date, so that I can find what I
need quickly.

• As a user, I want to integrate the system with my existing email provider (e.g., Gmail,
Outlook), so that setup is seamless.

MVP Features:
Core MVP Features
1. Email Reminder Creation

• Users can set reminders linked to specific emails or custom tasks.

• Options to choose date, time, and frequency (one-time, daily, weekly).

2. Notification System

• Email-based alerts for upcoming or overdue reminders.

• Optional desktop or mobile push notifications.

3. Reminder Dashboard

• Simple interface to view, edit, and delete reminders.

• Sort and filter by date, priority, or status.

4. Email Integration

• Connect with Gmail or Outlook using OAuth.

• Select emails from inbox to attach reminders.

5. Recurring Reminders

• Ability to set reminders that repeat on a schedule (e.g., every Monday).

6. Snooze & Reschedule

• Users can snooze reminders or change the due date with one click.

7. User Authentication

• Secure login and registration system.

• Basic profile management (name, email, password).

8. Reminder Status Tracking

• Mark reminders as completed or pending.

• Visual indicators for overdue items.

Optional Early Add-ons (if time permits)

• Searchable Reminder History
 •

Priority Tags (High, Medium, Low)

• Dark Mode UI

• Basic Analytics (e.g., completed reminders per week) Wireframes / API

Endpoint List:
Great! Here's a structured overview of both Wireframes and API Endpoint List for your Email
Reminder System MVP. This will help you visualize the user experience and define the backend
architecture clearly.

Wireframes Overview
These are the key screens your system should include:

1. Login / Signup Page

• Email and password fields

• OAuth options (Google, Outlook)

• "Forgot password" link

2. Dashboard

• List of upcoming reminders

• Filters: Date, Priority, Status

• Button: “Create New Reminder”

3. Create Reminder Page

• Select email (from inbox or paste ID)

• Title / Description

• Date & Time picker

• Repeat options (None, Daily, Weekly)

• Priority selector (Low, Medium, High)

• Save / Cancel buttons

4. Reminder Details Page

• Full reminder info

• Linked email preview

• Edit / Delete / Mark as Done / Snooze

5. Settings Page

• Notification preferences (email, push)

• Connected email accounts

 •

Time zone & language settings

API Endpoint List

Here’s a RESTful API structure for your backend:

Authentication

/api/auth/signup

/api/auth/login

/api/auth/logout

/api/auth/profile

Email Integration

/api/emails

/api/emails/:id

/api/emails/connect

Reminders

/api/reminders

/api/reminders

/api/reminders/:id

/api/reminders/:id

/api/reminders/:id

/api/reminders/:id/status

Notifications

/api/notifications

/api/notifications/test

Settings

/api/settings

/api/settings
 •

Acceptance Criteria:
Here’s a clear and actionable set of Acceptance Criteria for your Email Reminder System MVP. These
criteria define what “done” means for each feature and help ensure quality and usability.

Acceptance Criteria

User Authentication
• Users can successfully register with email and password.

• Users can log in and log out securely.

• Invalid credentials trigger appropriate error messages.

• Session tokens expire after a set period or on logout.

Email Integration
• Users can connect their Gmail or Outlook account via OAuth.

• System can fetch a list of recent emails from the connected account.

• Users can select an email to attach a reminder.

• If email integration fails, users are notified with a clear error.

Reminder Creation
• Users can create a reminder with title, description, date/time, and priority.

• Users can link a reminder to a specific email.

• Reminder must be saved to the database and appear in the dashboard.

• Required fields must be validated before submission.

Reminder Dashboard
• Users can view a list of all active reminders.

• Reminders are sorted by due date by default.

• Users can filter reminders by status (pending, completed, overdue).

• Clicking a reminder opens its detail view.

Notifications
• Users receive email notifications at the scheduled time.

• Notifications include reminder title, description, and linked email (if any).

• Users can snooze or mark reminders as done from the notification.

Recurring Reminders
• Users can set reminders to repeat daily, weekly, or monthly.

• Recurring reminders generate future instances automatically.

 Users can cancel or edit recurrence settings.

Reminder Management
• Users can edit reminder details (title, time, priority).

• Users can delete reminders.

• Users can mark reminders as completed.

• Completed reminders are archived or hidden from the active list.

Settings
• Users can update notification preferences (email, push).

• Users can disconnect email accounts.

• Changes are saved and reflected immediately.

 •

Phase 2 – Solution Design & Architecture

Date :
Tech Stack Selection:
Tech Stack Breakdown for Email Reminder System
1. Frontend (User Interface)

Choose based on your comfort and future scalability:

• [Link] – Highly recommended for dynamic UIs, reusable components, and strong
ecosystem.

• Tailwind CSS or Material UI – For fast, responsive styling.

• Vite or Create React App – For bootstrapping your project quickly.

2. Backend (API & Business Logic)

You’ll need a robust backend to handle scheduling, validation, and user management:

• [Link] + [Link] – Lightweight, fast, and perfect for RESTful APIs.

• NestJS – If you want a more structured, scalable TypeScript-based framework.

• Python (FastAPI) – If you prefer Python, this is fast and async-friendly.

3. Database

For storing users, reminders, logs:

• PostgreSQL – Reliable, relational, and supports scheduling logic well.

• MongoDB – If you prefer flexibility with document-based storage.

• Use Prisma (with PostgreSQL) or Mongoose (with MongoDB) for ORM/ODM.

4. Authentication

• JWT (JSON Web Tokens) – For stateless, secure user sessions.

• OAuth2 – If you plan to integrate with Google or Microsoft accounts.

5. Email Service

• SendGrid – Reliable, scalable, and free tier available.

• Resend or Mailgun – Developer-friendly alternatives.

• Use nodemailer for local testing or SMTP fallback.

6. Scheduling & Background Jobs

• BullMQ (Redis-based) – For queueing and delayed jobs.

Agenda (MongoDB-based) – If you use MongoDB.

• node-cron – Simple cron jobs for MVP phase.

7. Hosting & Deployment

• Render or Railway – Easy deployment for full-stack apps.

• Vercel or Netlify – For frontend hosting.

• PlanetScale or Supabase – Managed DBs with generous free tiers.

8. Monitoring & Logging

• LogRocket or Sentry – For frontend error tracking.

• Winston or Pino – For backend logging.

MVP-Friendly Stack Suggestion

If you're aiming for speed and simplicity:

• Frontend: React + Tailwind

• Backend: [Link] + Express

• Database: PostgreSQL + Prisma

• Email: SendGrid + nodemailer

• Scheduler: node-cron (upgrade to BullMQ later)

• Hosting: Render (backend) + Vercel (frontend)

UI Structure/API Schema Design:

UI Structure (React + Tailwind CSS)
Here’s a modular layout that supports your core features:

1. Authentication Pages

• /login – Email + password, with validation

• /register – Name, email, password, confirm password

• /forgot-password – Email input, reset link flow

2. Dashboard

• /dashboard

• Sidebar: Navigation (Reminders, Profile, Settings)

• Header: User info, logout

• Main Panel: Upcoming reminders, quick actions

3. Reminder Management

• /reminders
 •

o List View: Title, date/time, status (sent/pending) o

Actions: Edit, delete, resend

• /reminders/new

• Form: Title, description, date/time picker, recurrence (optional), email recipient(s)

4. Profile & Settings

• /profile – Update name, email, password

• /settings – Notification preferences, timezone, email templates

5. Error & Loading States

• /404, /500 – Friendly error pages

• Global loading spinner, toast notifications

API Schema Design (RESTful, [Link] + Express)

Here’s a clean, scalable schema with validation and security in mind:

1. Auth Routes

POST /api/auth/register

POST /api/auth/login

POST /api/auth/forgot-password

POST /api/auth/reset-password

2. User Routes

GET /api/user/me

PUT /api/user/update

3. Reminder Routes

GET /api/reminders // List all reminders

GET /api/reminders/:id // Get single reminder

POST /api/reminders // Create new reminder

PUT /api/reminders/:id // Update reminder

DELETE /api/reminders/:id // Delete reminder

POST /api/reminders/:id/send // Manually trigger send

4. Scheduler & Email

Handled via background jobs (e.g., BullMQ):

• Queue reminders based on scheduledAt

• Retry failed sends

 Log delivery status

Data Handling Approach:

1. Data Modeling
Design your schema to support reminders, users, and delivery logs:

Entities:

• User

o id, name, email, passwordHash, timezone, createdAt

• Reminder

o id, userId, title, description, scheduledAt, recurrence, recipientEmail, status,

createdAt

• DeliveryLog

• id, reminderId, sentAt, status, errorMessage

Use PostgreSQL + Prisma for relational integrity and easy querying.

2. Data Input & Validation Frontend:

• Use React Hook Form + Zod/Yup for form validation.

• Validate email format, future date/time, recurrence rules.

Backend:

• Validate all incoming data using Joi or Zod.

• Sanitize inputs to prevent injection attacks.

3. Security & Privacy

• Password hashing: Use bcrypt or argon2.

• JWT tokens for session management.

• Rate limiting and input sanitization to prevent abuse.

• Encrypt sensitive fields if needed (e.g., recipient emails).

4. Data Flow & Scheduling Reminder

Creation:

• User submits → validated → stored in DB → scheduled via job queue.

Job Queue:

• Use BullMQ (Redis) to enqueue reminders.

• Worker checks scheduledAt, sends email via SendGrid, logs result.

Retry Logic:
 •

• Failed jobs retry with exponential backoff.

• Log errors for diagnostics.

5. Data Retrieval & Display

• Dashboard fetches reminders via paginated API.

• Status indicators: pending, sent, failed.

• Delivery logs accessible per reminder.

6. Data Cleanup & Archiving

• Auto-delete failed logs after X days (configurable).

• Archive sent reminders after 30 days to reduce load.

• Use cron jobs for periodic cleanup.

7. Testing Strategy
• Unit test validation logic and DB models.

• Integration test reminder creation → scheduling → delivery.

• Use mock email service for test environments.

Component/Module Diagram:
Module Highlights
Frontend

• Auth Module: Handles login, registration, and password recovery.

• Reminder Dashboard: Displays reminders, allows creation/editing.

• Settings/Profile: User preferences, timezone, email templates.

• Notification Center: Shows delivery status, errors, and alerts.

Backend

• Auth Controller: Manages user sessions, password hashing, JWT.

• Reminder Controller: Core CRUD logic, validation, scheduling.

• User Controller: Profile updates, settings management.

• Scheduler Module: Queues reminders, triggers email jobs.

• Email Service Layer: Abstracts email provider logic.

• Database Layer: ORM models, migrations, queries.

Basic Flow Diagram:
Basic Flow Diagram (Textual Representation)
[User]

[Login/Register]

[Dashboard]

[Create Reminder] ---> [Reminder Saved in DB]

[Scheduler Checks Reminder Time]

[Trigger Email Job]

[Send Email via SendGrid]

[Log Delivery Status]

v
 [Update Reminder Status]

Flow Breakdown
1. User Authentication o User logs in or registers. o

JWT token issued for session.

2. Dashboard Access o User views upcoming reminders.

o Can create, edit, or delete reminders.

3. Reminder Creation o Form captures title, description,

date/time, recipient email.

o Reminder stored in database.

4. Scheduler Activation o Background job (e.g., BullMQ)

checks for due reminders.

o Triggers email job when scheduledAt time is reached.

5. Email Dispatch o Email sent via SendGrid or

nodemailer.

o Retry logic if delivery fails.

6. Status Logging

• Delivery success/failure logged.

• Reminder status updated (sent, failed, etc.).

Phase 3 – MVP Implementation

Date :
Project Setup:
Tech Stack
• Frontend: React, TailwindCSS or Bootstrap
 • Backend: [Link], Express

• Database: MongoDB (with Mongoose)

• Email Service: Nodemailer or SendGrid

• Scheduler: node-cron or Agenda

• Auth: JWT or OAuth (optional for MVP)

Key Features
• User registration/login (optional for MVP)

• Create, edit, delete reminders

• Schedule email delivery

• Dashboard to view upcoming reminders

• Email delivery logs

API Endpoints (MVP)

/api/reminders

/api/reminders

/api/reminders/:id

/api/reminders/:id

/api/reminders/:id

Backend Setup
• [Link]: Express setup, middleware, routes

• models/[Link]: Mongoose schema

• controllers/[Link]: CRUD logic

• services/[Link]: Email sending logic

• utils/[Link]: Cron job to check and send emails

Frontend Setup
• [Link]: Routing setup

• pages/[Link]: View all reminders

• pages/[Link]: Form to create reminder

• components/[Link]: Display individual reminder

• services/[Link]: Axios for API calls

Environment Variables (.env)
PORT=5000

MONGO_URI=your_mongodb_connection_string

EMAIL_USER=your_email@[Link]

EMAIL_PASS=your_email_password_or_app_token Development

Scripts
In [Link]:

"scripts": {

"start": "node backend/[Link]",

"dev": "nodemon backend/[Link]",

"client": "npm start --prefix frontend",

"fullstack": "concurrently \"npm run dev\" \"npm run client\""

Core Features Implementation:

🧠 Backend: [Link] + Express + MongoDB
1. Reminder Model (models/[Link]) const

mongoose = require('mongoose');

const reminderSchema = new [Link]({

email: { type: String, required: true }, subject:

{ type: String, required: true }, message: { type:

String, required: true }, sendAt: { type: Date,

required: true }, sent: { type: Boolean, default:

false }

});

[Link] = [Link]('Reminder', reminderSchema);

2. 🧭 API Routes (routes/[Link])

const express = require('express'); const router = [Link](); const

reminderController = require('../controllers/reminderController');
[Link]('/', [Link]); [Link]('/',

[Link]); [Link]('/:id',

[Link]); [Link]('/:id',

[Link]); [Link]('/:id',

[Link]); [Link] = router;

3. 🧰 Controller Logic (controllers/[Link])

const Reminder = require('../models/Reminder');

[Link] = async (req, res) => { try

const reminder = new Reminder([Link]); await

[Link](); [Link](201).json(reminder);

} catch (err) { [Link](400).json({ error:

[Link] });

};

// Implement getAllReminders, getReminderById, updateReminder, deleteReminder similarly

4. 📤 Email Service (services/[Link])

const nodemailer = require('nodemailer');

const transporter = [Link]({ service:

'gmail',

auth: {

user: [Link].EMAIL_USER, pass:

[Link].EMAIL_PASS

});

[Link] = async (reminder) => {

await [Link]({ from:

[Link].EMAIL_USER, to:
[Link], subject:

[Link], text: [Link]

});

};

5. ⏰ Scheduler (utils/[Link])
const cron = require('node-cron'); const Reminder =

require('../models/Reminder'); const { sendEmail } =

require('../services/emailService'); [Link]('* * * * *', async () => { const

now = new Date(); const reminders = await [Link]({ sendAt: { $lte:

now }, sent: false }); for (const reminder of reminders) { await

sendEmail(reminder); [Link] = true; await [Link]();

});

🎨 Frontend: React
1. Create Reminder Form ([Link])
import { useState } from 'react';

import axios from 'axios'; function CreateReminder() { const [form, setForm] =

useState({ email: '', subject: '', message: '', sendAt: '' }); const handleSubmit = async

(e) => { [Link](); await [Link]('/api/reminders', form);

alert('Reminder created!');

};

return (

<form onSubmit={handleSubmit}>

{/* Input fields for email, subject, message, sendAt */}

<button type="submit">Create Reminder</button>

</form>

);

}
2. 📋 Reminder List ([Link])
import { useEffect, useState } from 'react'; import

axios from 'axios';

function ReminderList() { const [reminders,

setReminders] = useState([]);

useEffect(() => { [Link]('/api/reminders').then(res =>

setReminders([Link]));

}, []);

return (

<ul>

{[Link](r => (

<li key={r._id}>{[Link]} - {[Link]}</li>

))}

</ul>

);

✅ Next Steps
• Add form validation and loading states

• Protect API with basic auth or JWT (optional for MVP)

• Add logs or dashboard for sent reminders

• Deploy backend (e.g., Render, Railway) and frontend (e.g., Vercel, Netlify)

Data Storage(Local State/Database):

🧠 Local State (Frontend)
Used for:

• Form inputs (email, subject, message, sendAt)

• UI feedback (loading, success, error)

• Temporary filtering or sorting of reminders

Example (React):
const [formData, setFormData] = useState({

email: '', subject: '', message: '', sendAt: ''

});

Use this state to control form inputs and submit to the backend via Axios or Fetch.

🗄️ Database (Backend)
Used for:

• Persisting reminders

• Tracking sent status

• Querying upcoming reminders for scheduling Recommended: MongoDB with

Mongoose Reminder Schema:

const reminderSchema = new [Link]({

email: String, subject: String,

message: String, sendAt: Date, sent:

{ type: Boolean, default: false }

});

🔄 Data Flow Summary

1. User fills form → stored in local state 2. Form submitted → sent to Express API 3. API stores
data in MongoDB

4. Scheduler checks DB every minute for due reminders

5. Email sent → DB updated (sent: true) Testing Core

Features: ✅ 1. Backend Testing
Unit Tests (with Jest or Mocha) Focus on

testing:

• Reminder creation logic

• Email sending service

• Scheduler behavior Example: Reminder Creation test('should create a reminder',

async () => { const res = await request(app)

.post('/api/reminders')
 .send({ email: 'test@[Link]',

subject: 'Test Reminder', message: 'This

is a test.', sendAt: new Date([Link]()

+ 60000)

});

expect([Link]).toBe(201); expect([Link]).toBe('test@[Link]');

});

🔁 Integration Tests
Simulate full flow:

• Create reminder → wait for sendAt → check if email was sent and sent: true

Use a mock email service (like nodemailer-mock) to avoid sending real emails during tests.

🧪 Frontend Testing
Component Tests (with React Testing Library) Test:

• Form input and submission

• Reminder list rendering

• Error and success messages Example: Form Submission test('submits reminder

form', async () => { render(<CreateReminder />);

[Link]([Link](/email/i), { target: { value: 'user@[Link]' } });

[Link]([Link](/create reminder/i)); await waitFor(() =>

expect([Link](/reminder created/i)).toBeInTheDocument());

});

🔗End-to-End Testing (with Cypress or Playwright)

Simulate real user behavior:

• Navigate to form

• Fill and submit reminder

• Wait for scheduled time

• Confirm email delivery (mock or log check) Version Control(GitHub) :

🗂️ 1. Initialize Git Locally
In your project root: git

init

Create a .gitignore file to exclude sensitive or unnecessary files:

# .gitignore node_modules/ .env dist/ build/

🚀 2. Create a GitHub Repository

• Go to GitHub

• Click New Repository

• Name it something like email-reminder-system

• Choose Public or Private

• Don’t initialize with README (you already have one locally)

🔗 3. Connect Local Repo to GitHub

git remote add origin [Link] git branch M
main git add . git commit -m "Initial commit" git push -u origin main

🧪 4. Branching Strategy
Use branches to isolate features and avoid breaking the main codebase: git checkout -b

feature/create-reminder After development: git add . git commit -m "Add reminder creation

feature" git push origin feature/create-reminder Then open a Pull Request on GitHub to merge

into main.

🔍 5. Commit Best Practices

• Use clear, concise messages:

o Add email scheduler o Fix

reminder form validation o Stuff I

changed

• Commit often, but meaningfully:

• One commit per logical change

🛡️ 6. Security Tips
• Never commit .env or credentials

• Use GitHub Secrets if deploying with GitHub Actions

• Enable 2FA on your GitHub account

Phase 4 – Enhancements & Deployment
Date :
Additional Features:
User Management
• User Accounts & Authentication

• o Sign up / login with JWT or OAuth

• o Password reset via email

• User Roles • Admin vs regular user (e.g., admin can view all reminders)

Reminder Enhancements
• Recurring Reminders o Daily, weekly, monthly options

• Reminder Categories o Work, Personal, Health, etc.

• Priority Levels o High, Medium, Low with color

tags

• Attachments

• Allow users to attach files (e.g., PDFs, images)

Email Features
• Rich HTML Emails o Styled templates with branding

• Email Preview o Show how the email will look

before sending

• Delivery Confirmation o Status updates: Sent,

Failed, Queued

• Resend Option

• Retry failed emails manually

Dashboard & Analytics

• Reminder Calendar View o Monthly calendar with scheduled reminders

• Email Logs o Track sent emails with timestamps • Stats

• Total reminders, success rate, upcoming reminders

 Notifications
• Push Notifications o Via web or mobile (e.g.,

Firebase)

• SMS Reminders

o Integrate Twilio or similar service

• In-App Alerts

• Toasts or modals for upcoming reminders

Smart Features
• AI-Powered Suggestions o Suggest reminder

times based on user behavior

• Natural Language Input o “Remind me to call mom tomorrow at 10am”

• Time Zone Detection

• Auto-adjust sendAt based on user location

Integration & Export

• Google Calendar Sync o Add reminders to

user’s calendar

• CSV Export o Download reminder history

• Zapier Integration

• Trigger reminders from other apps

Security & Reliability

• Rate Limiting o Prevent spam or abuse

• Audit Logs o Track changes to reminders

• Backup & Restore

• Export/import user data

UI/UX Improvements:
UI Enhancements
1. Clean, Minimal Layout

•
 Use whitespace generously to reduce cognitive load

Stick to a consistent grid and spacing system

• Choose a neutral color palette with accent colors for actions (e.g., blue for “Create
Reminder”)

2. Responsive Design

• Use Flexbox or CSS Grid for layout

• Ensure mobile-friendly views with collapsible menus and stacked forms

3. Visual Hierarchy

• Highlight upcoming reminders with cards or badges

• Use typography to distinguish headings, labels, and body text

4. Icons & Feedback

• Add icons for edit, delete, and status (e.g., sent, pending)
• Use toast notifications for actions like “Reminder Created” or “Email Sent”

UX Improvements
1. Smart Form Defaults

• Auto-fill current date/time for sendAt

• Remember last used email or category

2. Inline Validation

• Show errors as users type (e.g., “Invalid email format”)

• Highlight required fields before submission

3. Preview Before Send

• Let users preview the email content and delivery time

• Include a “Test Send” option to their own email

4. Calendar Integration

• Add a calendar picker for sendAt

• Optional: drag-and-drop reminders on a calendar view

Accessibility & Usability

1. Keyboard Navigation

•
 • Ensure all interactive elements are reachable via Tab

• Use ARIA labels for screen readers

2. Dark Mode Support

Toggle between light and dark themes

Store preference in localStorage or user profile

3. Loading States

• Show spinners or skeleton loaders during API calls

• Disable buttons while submitting forms

API Enhancements:
Enhancing your Email Reminder System API can unlock scalability, flexibility, and better developer
experience. Here's a structured set of enhancements you can implement across functionality,
security, performance, and developer usability:

Functional Enhancements
1. Recurring Reminders

• Add recurrence field: "daily", "weekly", "monthly"

• Backend logic to auto-generate future reminders

2. Reminder Status Tracking

• Add status: "pending", "sent", "failed"

• Include timestamps for sentAt, createdAt, updatedAt

3. Search & Filter

• Query parameters: ?email=, ?status=, ?dateRange=

• Support pagination: ?page=1&limit=10

4. Bulk Operations

• POST /api/reminders/bulk to create multiple reminders

• DELETE /api/reminders/bulk with array of IDs

5. Email Preview Endpoint

• GET /api/reminders/:id/preview → returns rendered HTML

Security Enhancements

•
6. Authentication

• Use JWT for protected routes

• Middleware to verify token and attach user context

7. Rate Limiting

• Prevent abuse with IP-based throttling (e.g., 100 requests/hour)

8. Input Validation

Use Joi or Zod to validate request bodies

Sanitize inputs to prevent injection attacks

•
 Performance Enhancements
9. Caching

• Cache frequent queries (e.g., upcoming reminders) with Redis

10. Async Email Queue

• Use Bull or Agenda for job queuing

• Decouple email sending from API response

Developer Experience
11. OpenAPI (Swagger) Documentation

• Auto-generate interactive API docs

• Include example requests and responses

12. Versioning

• Prefix routes with /v1/, /v2/ for future upgrades

13. Webhooks

• POST to external URLs when a reminder is sent

• Useful for integrations with other apps

14. Error Handling Standardization

• Consistent error format:

"error": {

"code": "REMINDER_NOT_FOUND",

"message": "Reminder with ID abc123 not found."

Testing & Monitoring

15. Unit & Integration Tests

• Use Jest or Mocha for controller and service layers

16. Logging

• Add structured logs with Winston or Pino

• Include request ID, timestamps, and error stack traces

17. Health Check Endpoint

• GET /api/health → returns status of DB, scheduler, email service

Performance & Security Checks:
To ensure your Email Reminder System is reliable, fast, and secure, here’s a comprehensive checklist
for Performance and Security validation—tailored for a full-stack web app like yours:

Performance Checks
1. API Response Time

• Use tools like Postman, Apache JMeter, or Artillery to benchmark endpoints

• Target:

2. Database Query Optimization

• Index sendAt, email, and status fields in MongoDB

• Avoid N+1 queries; use .lean() in Mongoose for read-only operations

3. Email Queue Efficiency

• Use Bull or Agenda to queue and batch email jobs

• Monitor job duration and retry logic

4. Frontend Load Time

• Audit with Lighthouse or WebPageTest

• Lazy-load components and optimize bundle size

5. Caching

• Use Redis for caching frequent queries (e.g., upcoming reminders)

• Cache static assets with proper headers

6. Concurrency & Load Testing

• Simulate multiple users creating reminders simultaneously

• Monitor CPU, memory, and DB connections under load

Security Checks
1. Authentication & Authorization

• Use JWT with expiration and refresh tokens

• Protect routes with middleware (e.g., isAuthenticated, isAdmin)

2. Input Validation

• Validate all incoming data with Joi, Zod, or express-validator

• Sanitize inputs to prevent XSS and injection attacks

3. Rate Limiting
 • Use express-rate-limit to throttle requests per IP

• Example: max 100 requests/hour per user

4. HTTPS & Secure Headers

• Enforce HTTPS with SSL certificates

• Use [Link] to set secure headers (e.g., Content-Security-Policy, X-Frame-Options)

5. Environment Secrets

• Store credentials in .env and never commit them

• Use GitHub Secrets or Vault for deployment environments

6. Audit Logging

• Log all sensitive actions (create, update, delete reminders)

• Include user ID, timestamp, and IP address

7. Email Abuse Prevention

• Verify email ownership before allowing reminders

• Add CAPTCHA or email confirmation for public-facing forms

Bonus: Monitoring & Alerts

• Use Prometheus + Grafana or Datadog for real-time metrics

• Set up alerts for:

• Failed email jobs

• High response times

• Unusual traffic spikes

Testing of Enhancement:
1. Functional Testing
What to Test:
• New API endpoints (e.g. /preview, /bulk, /health)

• Recurring reminders logic

• Email status tracking (sent, failed, pending)

• Search, filter, and pagination

🛠 Tools:
• Postman or Insomnia for manual API testing

• Jest, Mocha, or Supertest for automated backend tests Example:

test('GET /api/reminders?status=sent returns only sent reminders', async () => { const

res = await request(app).get('/api/reminders?status=sent');

expect([Link]).toBe(200); expect([Link](r => [Link] ===

'sent')).toBe(true);

});

2. UI/UX Testing
What to Test:
• New form fields (e.g. recurrence, priority)

• Calendar view or timeline

• Responsive layout and accessibility • Microinteractions (animations, toasts, modals)

🛠 Tools:
• React Testing Library for component tests

• Cypress or Playwright for end-to-end flows Example:

test('renders recurrence dropdown with correct options', () => { render(<CreateReminder />);

expect([Link]('Daily')).toBeInTheDocument();

});

3. Performance Testing
What to Test:
• API response time under load

• Email queue throughput

• DB query efficiency

🛠 Tools:
• Artillery, JMeter, or k6 for load testing

• MongoDB Atlas Profiler or Mongoose debug logs 4. Security Testing

What to Test:
• JWT authentication and route protection

• Rate limiting and input validation • Secure headers and HTTPS enforcement

🛠 Tools:
• OWASP ZAP or Burp Suite for vulnerability scanning

• express-rate-limit, [Link], and Joi/Zod for prevention 5. Monitoring & Logging

What to Test:
 • Health check endpoint (/api/health)

• Email delivery logs • Error tracking and alerts

🛠 Tools:
• Winston, Pino, or LogRocket

• Prometheus + Grafana or Datadog for metrics

Deployment(Netlify, Vercel, or Could Platform):

Frontend Deployment (React)
Option 1: Netlify
Best for: Static React apps with client-side routing Steps:

1. Push your frontend code to GitHub

2. Go to Netlify → Connect GitHub repo

3. Set build command: npm run build

4. Set publish directory: build/

5. Deploy!

Bonus: Add environment variables in Netlify dashboard if needed.

Option 2: Vercel
Best for: React apps with SSR or [Link] Steps:

1. Push frontend to GitHub

2. Go to Vercel → Import GitHub repo

3. Vercel auto-detects React and builds it

4. Set environment variables if needed

5. Deploy!

Vercel handles routing and preview deployments beautifully.

Backend Deployment ([Link] + Express)

Option 1: Render
Best for: Simple Express apps with MongoDB Steps:

1. Push backend to GitHub

2. Go to Render → Create Web Service

3. Set build command: npm install

4. Set start command: node [Link] or npm start 5. Add environment variables (MongoDB

URI, email credentials)

 6. Deploy!

Render supports cron jobs for your scheduler too.

Option 2: Railway
Best for: Full-stack apps with built-in DB hosting Steps:

1. Push backend to GitHub

2. Go to Railway → Create project → Connect repo

3. Add MongoDB plugin or external URI

4. Set environment variables

5. Deploy!

Railway is beginner-friendly and great for hobby projects.

Option 3: Heroku
Best for: Traditional Express apps Steps:

1. Install Heroku CLI

2. Run: heroku login heroku create git push heroku main

Add environment variables via Heroku dashboard

Heroku’s free tier has limitations, but it’s still reliable.

Connecting Frontend & Backend

• In React, set REACT_APP_API_URL to your backend’s deployed URL

• Use proxy or CORS middleware in Express to allow frontend requests

Phase 5 – Project Demonstration & Documentation

Date :
Final Demo Walkthrough:
Final Demo Walkthrough: Email Reminder System
1. Introduction (1–2 mins)

• Brief Problem Statement: “People often forget important tasks or deadlines. Our system
solves this by sending timely, customizable email reminders.”
 • Target Users: Individuals, freelancers, or teams needing lightweight task reminders.

• Tech Stack: Mention your front-end, back-end, database, and any third-party services (e.g.,
[Link], Express, MongoDB, React, Nodemailer).

2. Live Demo Flow (10–12 mins) Step 1: User Registration & Login
• Show sign-up and login flow.

• Highlight validation, password security (e.g., hashing), and session/token handling.

Step 2: Dashboard Overview

• Display the user dashboard with:

• Upcoming reminders

• Quick stats (e.g., reminders sent, pending)

• Option to create a new reminder

Step 3: Creating a Reminder

• Walk through the form:

o Title, description, date/time, repeat options o

Email address (if sending to others)

• Show real-time validation and UX touches (e.g., date picker, character limits)

Step 4: Reminder Scheduling Logic

• Briefly explain how reminders are stored and scheduled (e.g., cron jobs, background
workers, or queue system).

• Show backend logs or database entries confirming the reminder is queued.

Step 5: Email Delivery

• Trigger a test reminder (or show a previously sent one).

• Open the inbox to show the email format.

• Highlight:

• Subject line

• Personalization

• Unsubscribe or manage link (if implemented)

Step 6: Managing Reminders

• Edit, delete, or mark reminders as done.

• Show how changes reflect in the database and UI.

3. Enhancements & Features

• Mobile responsiveness

• Email delivery status tracking (if added)

• Retry logic for failed emails

• Security: Input sanitization, rate limiting

• Performance: Lazy loading, optimized queries

4. Testing & Validation

• Mention:

• Unit tests for API endpoints

• Manual testing for UI/UX

• Edge cases handled (e.g., past dates, invalid emails)

5. Challenges & Learnings

• Share 1–2 key challenges (e.g., time zone handling, email throttling)

• What you learned about full-stack coordination, async workflows, or user feedback

6. Next Steps (Optional)

• Add SMS or WhatsApp reminders

• Calendar integration (Google Calendar API)

• User analytics dashboard

• Multi-user/team support

7. Q&A or Feedback

• Invite questions or suggestions

• Offer a link to the GitHub repo or live demo if available

Project Report:
1. Project Overview

The Email Reminder System is a web-based application designed to help users schedule and receive
timely email reminders for tasks, events, or deadlines. The system aims to improve productivity and
task management by automating reminder notifications.

2. Objectives

• Enable users to create, edit, and delete reminders.

• Schedule email notifications based on user-defined times.

• Ensure secure and reliable delivery of reminders.

 • Provide a user-friendly interface for managing reminders.

3. System Architecture

• Frontend: HTML, CSS, JavaScript ([Link] for SPA behavior)

• Backend: [Link] with [Link]

• Database: MongoDB (NoSQL for flexibility)

• Email Service: Nodemailer with SMTP (e.g., Gmail or SendGrid)

• Scheduler: Node-cron for periodic task execution

4. Key Features

• Reminder Creation: Title, description, date/time, and recurrence options.

• Email Notifications: Sent automatically at the scheduled time.

• User Authentication: Secure login and registration (JWT-based).

• Dashboard: Overview of upcoming and past reminders.

• Admin Panel (optional): Manage users and system logs.

5. Development Phases

Phase 1: MVP

• Defined user stories and acceptance criteria.

• Created wireframes for core UI (reminder form, dashboard).

• Implemented RESTful API endpoints for CRUD operations.

• Integrated Nodemailer for email delivery.

• Deployed on Render/Heroku with MongoDB Atlas.

Phase 2: Enhancements

• Added recurring reminders (daily, weekly, monthly).

• Improved UI/UX with responsive design and toast notifications.

• Implemented input validation and error handling.

• Added email delivery status tracking.

• Conducted unit and integration testing.

6. Testing & Validation

• Unit Tests: Mocha + Chai for backend logic.

• Integration Tests: Postman for API endpoint validation.

• UI Testing: Manual testing across devices and browsers.

• Performance: Load tested with Apache JMeter.

7. Challenges & Solutions moment-timezone

8. Future Improvements

• Add calendar integration (Google Calendar API).

• Mobile app version using React Native.

• Push notifications via Firebase Cloud Messaging.

• Analytics dashboard for user engagement.

9. Conclusion

The Email Reminder System successfully delivers on its core promise: helping users stay on top of
their tasks through timely email alerts. With a modular architecture and scalable backend, it’s well-
positioned for future enhancements and broader adoption.

Screenshot / API Documentation:

1. Overview

This document describes a simple Email Reminder System API suitable for scheduling, listing,
updating, and sending reminder emails. The API is RESTful, JSON-based, uses Bearer API keys, and
supports webhooks for delivery events.

Use cases:

• Schedule one-off reminders.

• Create recurring reminders (CRON or simple intervals).

• Trigger immediate sends (for ad-hoc reminders).

• Receive delivery/opens/clicks via webhooks.

2. Authentication

All requests require an API key in the Authorization header:

Authorization: Bearer YOUR_API_KEY

Content-Type: application/json

API keys are created per account and should be treated like passwords.

3. Endpoints (summary)

• POST /api/v1/reminders — create a reminder

• GET /api/v1/reminders — list reminders (with pagination & filters)

• GET /api/v1/reminders/{id} — retrieve one reminder

• PUT /api/v1/reminders/{id} — update a reminder

• DELETE /api/v1/reminders/{id} — delete/cancel a reminder

 • POST /api/v1/reminders/{id}/send — send immediately

• POST /api/v1/webhooks — register webhook endpoint (optional admin)

4. Example: Create a reminder

Request POST /api/v1/reminders

"to": "jane@[Link]",

"subject": "Payment due in 3 days",

"body": "Hi Jane — your payment is due on {{due_date}}.",

"send_at": "2025-10-15T09:00:00+05:30",

"timezone": "Asia/Kolkata",

"metadata": { "user_id": "1234" },

"recurrence": {

"type": "none", // or "daily", "weekly", "cron"

"cron": null

Response 201

"id": "rem_01F...",

"status": "scheduled",

"send_at": "2025-10-15T09:00:00+05:30",

"created_at": "2025-10-12T13:22:00+05:30"

5. List reminders with filters

GET /api/v1/reminders?status=scheduled&limit=20&page=1&from=2025-10-12&to=2025-10-20

Response includes data, pagination fields.

6. Update & Cancel

PUT /api/v1/reminders/{id} — modify send_at, subject, body, recurrence.

DELETE /api/v1/reminders/{id} — sets status to cancelled and prevents future sends.

7. Immediate send

POST /api/v1/reminders/{id}/send — triggers the engine to attempt sending right away and returns
a send job id.

8. Webhooks & Events

Common events: [Link], [Link], [Link], [Link],

[Link].

Example webhook payload:

"event": "[Link]",

"reminder_id": "rem_01F...",

"sent_at": "2025-10-15T09:00:31+05:30",

"delivery_info": { "provider": "smtp1", "provider_id": "abc123" }

Security: sign webhooks using HMAC SHA256 with a secret in X-Signature header.

9. Error responses

All error responses use this structure:

{ "error": { "code": "invalid_request", "message": "Missing required field 'to'", "details": null } }

Common error codes: invalid_request, unauthorized, not_found, rate_limited, server_error.

10. Rate limits & retries

• Default rate limit: 100 requests/minute per API key (adjustable per plan).

• Retry rules: for 5xx errors use exponential backoff with jitter; avoid retrying on 4xx except
429.

• Idempotency: For create endpoints, accept Idempotency-Key header to prevent duplicate

reminders.

Challenges & Solution:

Challenge Solution

Email delivery delays due to SMTP Integrated SendGrid API for more reliable and scalable email
rate limits delivery, replacing basic SMTP.

Timezone inconsistencies affecting Implemented moment-timezone to normalize all datetime

reminder triggers inputs and cron jobs to the user’s local timezone.

Added unique constraints on title + datetime + user

Duplicate reminders being created
combination, and implemented backend logic to prevent
accidentally
duplicates.

Reminder not triggering at exact Switched from basic setTimeout to node-cron for accurate and
time scalable scheduling.

Lack of feedback on email deliveryIntroduced a status tracking endpoint and updated the
status database with emailSent and sentAt fields.

Used JWT authentication, bcrypt for password hashing, and

Security concerns with user data
HTTPS for secure data transmission.

UI not responsive on mobile Refactored frontend using CSS Flexbox/Grid and media queries
devices to ensure mobile responsiveness.

Testing edge cases (e.g., leap years, Created unit tests for date logic and used mock time libraries
daylight saving) to simulate edge cases.

GitHub README & Setup Guide:

Email Reminder System A full-stack web application that allows users to schedule and receive email
reminders for tasks, events, and deadlines. Built with [Link], Express, MongoDB, and React.

Features

• User authentication (JWT-based)

• Create, edit, and delete reminders

• Automated email notifications via Node mailer or SendGrid

• Recurring reminders (daily, weekly, monthly)

• Dashboard to manage reminders

• RESTful API with status tracking

Tech Stack Layer Technology

Frontend [Link], HTML, CSS

Backend [Link], [Link]

Database MongoDB (Mongoose)

Email Nodemailer / SendGrid

Scheduler node-cron

Auth JWT, bcrypt

Setup Guide
1. Clone the Repository git clone

[Link]

[Link] cd email-reminder-system

2. Install Dependencies Backend cd backend

npm install Frontend cd ../frontend npm install

3. Environment Variables

Create a .env file in the backend/ directory:

PORT=5000

MONGO_URI=your_mongodb_connection_string

JWT_SECRET=your_jwt_secret

EMAIL_USER=your_email@[Link]

EMAIL_PASS=your_email_password_or_app_password EMAIL_SERVICE=gmail # or

sendgrid, etc.

Use environment-specific secrets and never commit .env to version control.

4. Run the App

Backend cd

backend npm

run dev

Frontend cd

../frontend

npm start

Visit: [Link]
 API Documentation
See the full API Reference in the project report or Postman collection (if available).

Testing
• Backend: Mocha, Chai

• API: Postman

• Frontend: Manual testing across devices

Future Enhancements
• Google Calendar integration

• Push notifications (Firebase)

• Mobile app (React Native)

• Admin dashboard and analytics

Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you’d like
to change.

Final Submission (Repo + Deployed Link):

GitHub Repository: [Link]