To-Do List with SMS Notifications 📝📱

A React-based to-do list application that sends SMS notifications to your phone whenever you add a new task.

Features

✅ Task Management

• Add, complete, and delete tasks
• Mark tasks as completed with checkboxes
• View task statistics (total and completed)
• Persistent storage using localStorage

📱 SMS Notifications

• Get notified via SMS when adding new tasks
• Configure your phone number in the app
• Toggle notifications on/off
• Powered by Twilio API

Project Structure

todo-notify-app/
├── src/                    # Frontend React app
│   ├── App.jsx            # Main application component
│   ├── App.css            # Styling
│   └── main.jsx           # React entry point
├── server/                # Backend Express server
│   ├── server.js          # Express + Twilio integration
│   └── package.json       # Server dependencies
├── .env                   # Environment variables (Twilio config)
└── package.json           # Frontend dependencies

Setup Instructions

Prerequisites

• Node.js (v16 or higher)
• A Twilio account (free trial available)

1. Get Twilio Credentials

1. Sign up for a free Twilio account at https://www.twilio.com/try-twilio
2. Go to the Twilio Console
3. Get your:
   • Account SID
   • Auth Token
   • Twilio Phone Number (get a free one from the console)

2. Configure Environment Variables

Edit the .env file in the root directory:

TWILIO_ACCOUNT_SID=your_account_sid_here
TWILIO_AUTH_TOKEN=your_auth_token_here
TWILIO_PHONE_NUMBER=+1234567890
PORT=3001

3. Install Dependencies

Frontend:

npm install

Backend:

cd server
npm install
cd ..

4. Run the Application

You need to run both the frontend and backend:

Terminal 1 - Backend Server:

cd server
npm start

Terminal 2 - Frontend App:

npm run dev

The frontend will be available at http://localhost:5173 (or the port Vite assigns).

Usage

1. Configure Notifications:

   • Enter your phone number (include country code, e.g., +1234567890)
   • Check "Enable SMS notifications"
   • Click "Save Settings"

2. Add Tasks:

   • Type your task in the input field
   • Press Enter or click "Add"
   • You'll receive an SMS notification if enabled!

3. Manage Tasks:

   • Click the checkbox to mark tasks as completed
   • Click the 🗑️ icon to delete tasks

Important Notes

• Phone Number Format: Always include the country code (e.g., +1 for US, +44 for UK)
• Twilio Free Tier: Free accounts can only send SMS to verified phone numbers
• Costs: After free trial credits, SMS messages cost a small fee per message
• Verify Your Number: If using a free Twilio account, verify your phone number in the Twilio console

Troubleshooting

SMS not sending?

• Check that your Twilio credentials are correct in .env
• Verify your phone number in the Twilio console (required for free accounts)
• Check the backend server logs for error messages
• Make sure both servers (frontend & backend) are running

Server connection error?

• Ensure the backend server is running on port 3001
• Check that CORS is enabled (already configured)
• Verify the API endpoint URL in App.jsx matches your backend port

Technologies Used

• Frontend: React, Vite
• Backend: Node.js, Express
• SMS Service: Twilio API
• Storage: localStorage (browser)

License

MIT

---

Enjoy your notification-enabled to-do list! 🎉