graph TD
    A[User's Browser (React Frontend)] -- HTTP POST Request --> B(Node.js/Express Backend API);
    B -- Schedule Job --> C{node-cron Scheduler};
    C -- At Scheduled Time --> D(Vonage Send SMS Logic);
    D -- API Call --> E(Vonage Messages API);
    E -- Sends SMS --> F(Recipient's Phone);
    B -- HTTP 200 OK / Error --> A;

# Create a main project folder
mkdir sms-scheduler-app
cd sms-scheduler-app

# Create the backend folder and navigate into it
mkdir backend
cd backend

# Initialize Node.js project
npm init -y

npm install express @vonage/server-sdk node-cron dotenv cors

# .env

# Vonage Credentials
VONAGE_API_KEY=YOUR_API_KEY
VONAGE_API_SECRET=YOUR_API_SECRET
VONAGE_APPLICATION_ID=YOUR_APPLICATION_ID
VONAGE_PRIVATE_KEY_PATH=./private.key # Relative path to your key file
VONAGE_FROM_NUMBER=YOUR_VONAGE_PHONE_NUMBER # Number purchased from Vonage

# Server Configuration
PORT=5000

// backend/server.js
require('dotenv').config(); // Load environment variables from .env file
const express = require('express');
const cors = require('cors');
const cron = require('node-cron');
const { Vonage } = require('@vonage/server-sdk');
const { SMS } = require('@vonage/messages');

// --- Configuration ---
const app = express();
const port = process.env.PORT || 5000;

// --- Vonage Client Initialization ---
// Validate essential Vonage environment variables
if (!process.env.VONAGE_API_KEY || !process.env.VONAGE_API_SECRET || !process.env.VONAGE_APPLICATION_ID || !process.env.VONAGE_PRIVATE_KEY_PATH || !process.env.VONAGE_FROM_NUMBER) {
    console.error(""FATAL ERROR: Missing required Vonage environment variables. Check your .env file."");
    process.exit(1); // Exit if configuration is incomplete
}

const vonage = new Vonage({
    apiKey: process.env.VONAGE_API_KEY,
    apiSecret: process.env.VONAGE_API_SECRET,
    applicationId: process.env.VONAGE_APPLICATION_ID,
    privateKey: process.env.VONAGE_PRIVATE_KEY_PATH // Path to your private key file
});

// --- Middleware ---
app.use(cors()); // Enable CORS for all origins (adjust for production)
app.use(express.json()); // Parse JSON request bodies
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded bodies

// --- In-Memory Storage for Scheduled Jobs (Simple Example) ---
// WARNING: This is NOT production-ready. Jobs are lost on server restart.
// Use a persistent job queue (Redis/BullMQ, MongoDB/Agenda) for production.
const scheduledJobs = {};

// --- API Endpoints ---

// Basic Health Check
app.get('/health', (req, res) => {
    res.status(200).json({ status: 'ok' });
});

// Schedule SMS Endpoint
app.post('/api/schedule', (req, res) => {
    const { phoneNumber, message, dateTime } = req.body;

    // 1. --- Input Validation ---
    if (!phoneNumber || !message || !dateTime) {
        return res.status(400).json({ error: 'Missing required fields: phoneNumber, message, dateTime' });
    }

    const targetDate = new Date(dateTime);
    const now = new Date();

    if (isNaN(targetDate.getTime())) {
        return res.status(400).json({ error: 'Invalid dateTime format. Use ISO 8601 format (e.g., YYYY-MM-DDTHH:mm:ss).' });
    }

    if (targetDate <= now) {
        return res.status(400).json({ error: 'Scheduled dateTime must be in the future.' });
    }

    // Basic phone number format check (E.164-like)
    // NOTE: This regex is simple. For robust production use_ consider dedicated
    // E.164 validation libraries (e.g._ google-libphonenumber) for better accuracy.
    const phoneRegex = /^\+?[1-9]\d{1_14}$/;
    if (!phoneRegex.test(phoneNumber)) {
         return res.status(400).json({ error: 'Invalid phoneNumber format. Include country code (e.g._ +15551234567).' });
    }


    // 2. --- Convert Date to Cron Syntax ---
    // node-cron uses format: 'Second Minute Hour DayOfMonth Month DayOfWeek'
    const cronTime = `${targetDate.getSeconds()} ${targetDate.getMinutes()} ${targetDate.getHours()} ${targetDate.getDate()} ${targetDate.getMonth() + 1} *`;
    // The '*' for DayOfWeek means it runs regardless of the day of the week_ matching the specific date.

    // 3. --- Schedule the Job ---
    try {
        console.log(`[${new Date().toISOString()}] Scheduling SMS to ${phoneNumber} at ${targetDate.toISOString()} (Cron: ${cronTime})`);

        const jobId = `${phoneNumber}-${targetDate.getTime()}-${Math.random().toString(36).substring(7)}`; // Unique ID

        const task = cron.schedule(cronTime_ async () => {
            console.log(`[${new Date().toISOString()}] Sending scheduled SMS to ${phoneNumber}`);
            try {
                const resp = await vonage.messages.send(
                    new SMS({
                        to: phoneNumber,
                        from: process.env.VONAGE_FROM_NUMBER, // Your Vonage sender number
                        text: message,
                    })
                );
                console.log(`[${new Date().toISOString()}] Message sent successfully to ${phoneNumber}. Message UUID: ${resp.messageUuid}`);
                // Clean up the job reference after successful execution
                if (scheduledJobs[jobId]) {
                    scheduledJobs[jobId].stop(); // Stop the cron task explicitly
                    delete scheduledJobs[jobId];
                    console.log(`[${new Date().toISOString()}] Cleaned up job ${jobId}`);
                }

            } catch (err) {
                console.error(`[${new Date().toISOString()}] Error sending SMS to ${phoneNumber}:`, err.response ? err.response.data : err.message);
                // Optionally: Implement retry logic here or notify an admin
                 if (scheduledJobs[jobId]) {
                    // Decide if the job should be stopped or retried on failure
                    scheduledJobs[jobId].stop();
                    delete scheduledJobs[jobId];
                    console.log(`[${new Date().toISOString()}] Cleaned up failed job ${jobId}`);
                }
            }
        }, {
            scheduled: true,
            timezone: ""Etc/UTC"" // IMPORTANT: Specify timezone or ensure server/dates are UTC. Adjust if needed.
        });

        // Store the task reference (in-memory)
        scheduledJobs[jobId] = task;
        console.log(`[${new Date().toISOString()}] Job ${jobId} scheduled.`);

        res.status(200).json({ success: true, message: `SMS scheduled successfully for ${targetDate.toISOString()}`, jobId: jobId });

    } catch (error) {
        console.error(`[${new Date().toISOString()}] Error scheduling job:`, error);
        res.status(500).json({ error: 'Failed to schedule SMS.' });
    }
});

// --- Optional: Webhook Endpoints (for status/inbound - basic logging) ---
app.post('/webhooks/status', (req, res) => {
    console.log(`[${new Date().toISOString()}] Status Webhook Received:`, req.body);
    // Process delivery receipts (DLRs) here if needed
    res.status(200).end(); // Always respond 200 OK to Vonage webhooks
});

app.post('/webhooks/inbound', (req, res) => {
    console.log(`[${new Date().toISOString()}] Inbound Webhook Received:`, req.body);
    // Process incoming messages here if needed
    res.status(200).end();
});


// --- Start Server ---
app.listen(port, () => {
    console.log(`Backend server listening at http://localhost:${port}`);
    console.warn(""--- IMPORTANT CAVEAT ---"");
    console.warn(""This server uses an IN-MEMORY scheduler (`node-cron`). Scheduled jobs WILL BE LOST if the server restarts."");
    console.warn(""For production, use a persistent job queue like BullMQ (with Redis) or Agenda (with MongoDB)."");
    console.warn(""Ensure timezone consistency between frontend input, server processing, and `node-cron` timezone setting."");
    console.warn(""-----------------------"");
});

// backend/package.json
{
  // ... other fields
  ""scripts"": {
    ""start"": ""node server.js"", // Add this line
    ""test"": ""echo \""Error: no test specified\"" && exit 1""
  },
  // ... other fields
}

npm start

# Navigate back to the root project folder if you are in backend
cd ..

# Create the Vite/React frontend project
npm create vite@latest frontend -- --template react

# Navigate into the frontend folder
cd frontend

# Install dependencies
npm install

# Install axios for making API calls
npm install axios

/* frontend/src/index.css (add or modify) */
body {
  font-family: sans-serif;
  padding: 20px;
  line-height: 1.6;
}

#root {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
}

h1 {
  text-align: center;
  color: #333;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

label {
  font-weight: bold;
  margin-bottom: -10px; /* Adjust spacing */
  display: block; /* Ensure label takes block space */
}

input[type="text"],
input[type="tel"],
input[type="datetime-local"],
textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%; /* Make inputs fill container */
  box-sizing: border-box; /* Include padding/border in width */
}

textarea {
  min-height: 80px;
  resize: vertical;
}

button {
  padding: 12px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 10px; /* Add some space above button */
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.message {
  padding: 10px;
  margin-top: 15px;
  border-radius: 4px;
  text-align: center;
}

.message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

small {
    display: block; /* Ensure small text is on its own line */
    margin-top: -10px; /* Adjust spacing below label */
    margin-bottom: 5px; /* Add space below small text */
    font-size: 0.8em;
    color: #555;
}

// frontend/src/App.jsx
import React, { useState } from 'react';
import axios from 'axios';
import './index.css'; // Import the styles

// --- Configuration ---
// Use Vite's environment variable handling for the API URL
// Create a .env file in the 'frontend' directory with:
// VITE_API_URL=http://localhost:5000
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000'; // Fallback for safety

function App() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [message, setMessage] = useState('');
  const [dateTime, setDateTime] = useState('');
  const [statusMessage, setStatusMessage] = useState('');
  const [messageType, setMessageType] = useState(''); // 'success' or 'error'
  const [isLoading, setIsLoading] = useState(false);

  // Function to get current datetime in YYYY-MM-DDTHH:mm format for min attribute
  const getCurrentDateTimeLocal = () => {
    const now = new Date();
    // Adjust for local timezone offset
    const offset = now.getTimezoneOffset();
    const localDate = new Date(now.getTime() - (offset * 60 * 1000));
    // Format to YYYY-MM-DDTHH:MM (required by datetime-local input)
    return localDate.toISOString().slice(0, 16);
  };

  const handleSubmit = async (e) => {
    e.preventDefault(); // Prevent default form submission
    setIsLoading(true);
    setStatusMessage('');
    setMessageType('');

    // --- Basic Frontend Validation ---
    if (!phoneNumber || !message || !dateTime) {
      setStatusMessage('Please fill in all fields.');
      setMessageType('error');
      setIsLoading(false);
      return;
    }

    // Ensure datetime is in the future (basic check, backend does more thorough validation)
    const selectedDate = new Date(dateTime);
    if (selectedDate <= new Date()) {
        setStatusMessage('Scheduled date and time must be in the future.');
        setMessageType('error');
        setIsLoading(false);
        return;
    }

    // --- Prepare Data for API ---
    // Ensure dateTime sent to backend is in a consistent format (ISO 8601 UTC is recommended)
    // The input type="datetime-local" provides local time. Convert to UTC before sending.
    const scheduleData = {
      phoneNumber_
      message_
      dateTime: selectedDate.toISOString()_ // Send as ISO 8601 UTC string
    };

    try {
      // --- Make API Call ---
      const response = await axios.post(`${API_BASE_URL}/api/schedule`_ scheduleData);

      if (response.status === 200 && response.data.success) {
        setStatusMessage(`Success! ${response.data.message}`);
        setMessageType('success');
        // Optionally clear the form
        // setPhoneNumber('');
        // setMessage('');
        // setDateTime('');
      } else {
        // Handle cases where backend might return 200 but with an error payload
        setStatusMessage(response.data.error || 'An unexpected success response occurred.');
        setMessageType('error');
      }
    } catch (error) {
      console.error('Error submitting schedule:'_ error);
      let errorMessage = 'Failed to schedule SMS. Please try again.';
      if (error.response && error.response.data && error.response.data.error) {
        // Use specific error from backend if available
        errorMessage = error.response.data.error;
      } else if (error.request) {
        // Network error (backend unreachable)
        errorMessage = `Network error. Could not reach the server at ${API_BASE_URL}. Is it running?`;
      }
      setStatusMessage(errorMessage);
      setMessageType('error');
    } finally {
      setIsLoading(false); // Re-enable button
    }
  };

  return (
    <div&gt;
      <h1&gt;SMS Scheduler</h1&gt;
      <form onSubmit={handleSubmit}&gt;
        <div&gt;
          <label htmlFor="phoneNumber"&gt;Recipient Phone Number:</label&gt;
          <input
            type="tel"
            id="phoneNumber" // ID matches htmlFor
            value={phoneNumber}
            onChange={(e) =&gt; setPhoneNumber(e.target.value)}
            placeholder="+15551234567" // Example format
            required
            disabled={isLoading}
          /&gt;
        </div&gt;
        <div&gt;
          <label htmlFor="message"&gt;Message:</label&gt;
          <textarea
            id="message" // ID matches htmlFor
            value={message}
            onChange={(e) =&gt; setMessage(e.target.value)}
            maxLength={160} // Standard SMS length limit (consider segments for longer)
            required
            disabled={isLoading}
          /&gt;
        </div&gt;
        <div&gt;
          <label htmlFor="dateTime"&gt;Schedule Date & Time:</label&gt;
           <small&gt;Select the date and time in your local timezone.</small&gt;
          <input
            type="datetime-local"
            id="dateTime" // ID matches htmlFor
            value={dateTime}
            onChange={(e) =&gt; setDateTime(e.target.value)}
            min={getCurrentDateTimeLocal()} // Prevent selecting past dates/times
            required
            disabled={isLoading}
          /&gt;
        </div&gt;
        <button type="submit" disabled={isLoading}&gt;
          {isLoading ? 'Scheduling...' : 'Schedule SMS'}
        </button&gt;
      </form&gt;

      {statusMessage && (
        <div className={`message ${messageType}`}&gt;
          {statusMessage}
        </div&gt;
      )}
    </div&gt;
  );
}

export default App;

# frontend/.env
VITE_API_URL=http://localhost:5000

npm run dev