Skip to content

A full-stack app to schedule reminders that are automatically sent via WhatsApp using Twilio. Built with React, Node.js, MongoDB, and real-time backend scheduling.

Notifications You must be signed in to change notification settings

Varunyadavgithub/ReminderApp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“² WhatsApp Reminder App

A full-stack application that lets users schedule reminders which are automatically sent via WhatsApp using Twilio API at the scheduled time.

πŸ“½οΈ Demo

Reminder-App-Demo.mp4

πŸš€ Features

  • πŸ“ Add custom reminders with messages and reminder time
  • πŸ“¬ Automatically sends WhatsApp reminders using Twilio
  • πŸ—ƒοΈ View and manage all reminders from the frontend
  • ❌ Delete reminders
  • πŸ“¦ Stores reminders in MongoDB
  • πŸ’¬ Realtime scheduler running in backend using setInterval

πŸ›  Tech Stack

🌐 Frontend

  • React 19
  • Tailwind CSS 4
  • Axios
  • React-Datetime-Picker
  • React-Hot-Toast
  • Vite

πŸ”§ Backend

  • Node.js
  • Express.js
  • MongoDB & Mongoose
  • Twilio (WhatsApp Messaging API)
  • Dotenv
  • Nodemon (for development)

πŸ“ Folder Structure


WhatsAppReminder/
β”‚
β”œβ”€β”€ client/               # Frontend (React)
β”‚   └── ...               # Components, Styles, Logic
β”‚
β”œβ”€β”€ server/               # Backend (Express)
β”‚   β”œβ”€β”€ controllers/      # Reminder logic
β”‚   β”œβ”€β”€ models/           # Mongoose models
β”‚   β”œβ”€β”€ routes/           # API routes
β”‚   β”œβ”€β”€ utils/            # Reminder scheduler
β”‚   β”œβ”€β”€ server.js         # Entry point
β”‚   └── .env              # Environment variables


πŸ” Environment Variables

πŸ“¦ Backend (/server/.env)

PORT=3000
MONGODB_URI=your_mongodb_connection_string

TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token

🌐 Frontend (/client/.env)

VITE_API_BASE_URL=http://localhost:3000

πŸ” Note: Make sure the backend is running on the same port as VITE_API_BASE_URL. If your backend uses PORT=3000, the frontend should point to http://localhost:3000.


πŸ› οΈ Getting Started

πŸ“¦ Backend Setup

cd server
npm install
npm run dev

🌐 Frontend Setup

cd client
npm install
npm run dev

Frontend will run at http://localhost:5173


πŸ”” How it Works

  1. User schedules a reminder from the frontend.
  2. The backend stores the reminder in MongoDB.
  3. A scheduler (running every second) checks for due reminders.
  4. If the reminder time has passed and it's not already sent, Twilio sends the WhatsApp message.
  5. Reminder is marked as "sent" (isReminded: true) to avoid duplicate messages.

πŸ“Έ Screenshots

Screenshot 2025-07-06 090606


✨ Future Enhancements

  • User authentication
  • Custom phone number input
  • Email reminders
  • Edit reminder functionality
  • Admin dashboard to monitor reminders sent

πŸ‘¨β€πŸ’» Author

Made with ❀️ by Varun Yadav LinkedIn β€’ GitHub β€’ X


πŸ“„ License

This project is open-source and free to use under the MIT License.

About

A full-stack app to schedule reminders that are automatically sent via WhatsApp using Twilio. Built with React, Node.js, MongoDB, and real-time backend scheduling.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published