WhatsApp Deleted Message Tracker

A web application that tracks deleted messages from WhatsApp using the WhatsApp Business API.

Features

  • Receives WhatsApp messages via webhook
  • Tracks when messages are deleted by senders
  • Provides a web interface to view deleted messages
  • Stores message history and deletion events

Setup

  1. WhatsApp Business API Setup:

    • Create a WhatsApp Business account
    • Set up a webhook URL pointing to this app
    • Configure the webhook to receive message events
    • Get your access token and verify token
  2. Environment Variables:

    • WHATSAPP_VERIFY_TOKEN: Token for webhook verification
    • WHATSAPP_ACCESS_TOKEN: Access token for WhatsApp API
    • WHATSAPP_PHONE_NUMBER_ID: Your WhatsApp Business phone number ID
  3. Webhook Configuration:

    • Webhook URL: https://your-app-url.web.val.run/webhook
    • Verify Token: Use the same token as WHATSAPP_VERIFY_TOKEN
    • Subscribe to: messages events

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   ├── webhook.ts       # WhatsApp webhook handler
│   │   └── api.ts          # API routes for frontend
│   └── index.ts            # Main server entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx         # Main app component
│   │   ├── MessageList.tsx # Deleted messages list
│   │   └── MessageItem.tsx # Individual message display
│   ├── index.html          # Main HTML template
│   └── index.tsx           # Frontend entry point
└── shared/
    └── types.ts            # Shared TypeScript types

How It Works

  1. WhatsApp sends webhook events when messages are received or deleted
  2. The app stores all incoming messages in the database
  3. When a deletion event is received, the message is marked as deleted
  4. Users can view deleted messages through the web interface
  5. The app maintains a history of all messages and their deletion status

API Endpoints

  • GET / - Web interface
  • POST /webhook - WhatsApp webhook endpoint
  • GET /webhook - Webhook verification
  • GET /api/deleted-messages - Get all deleted messages
  • GET /api/messages/:chatId - Get messages for a specific chat

Note

This app requires proper WhatsApp Business API setup and webhook configuration to function correctly.