Skip to content

README.md

Latest commit

 

History

History
117 lines (92 loc) · 3.5 KB

README.md

File metadata and controls

117 lines (92 loc) · 3.5 KB
Raw

WhatsApp Chatbot with Analytics Dashboard

A full-stack application that implements a WhatsApp chatbot with real-time analytics and monitoring. The chatbot uses OpenAI's GPT model to generate responses and provides detailed analytics about conversations.

Project Structure

whatsapp-chatbot/
├── backend/              # Node.js/Express backend
│   ├── config/          # Configuration files
│   ├── controllers/     # Request handlers
│   ├── models/          # Mongoose models
│   ├── routes/          # API routes
│   └── utils/           # Utility functions
└── frontend/            # React frontend
    ├── public/          # Static files
    └── src/             # Source files
        ├── components/  # React components
        └── services/    # API services

Prerequisites

  • Node.js (v14 or higher)
  • MongoDB instance
  • WhatsApp Business API access
  • OpenAI API key
  • Meta Developer account and WhatsApp Business account

Quick Start

  1. Install dependencies for both frontend and backend:

    npm run install-all

  2. Configure environment variables: Create a .env file in the backend directory:

    PORT=3000
MONGODB_URI=mongodb://localhost:27017/whatsapp-chatbot
WHATSAPP_ACCESS_TOKEN=your_whatsapp_access_token
WHATSAPP_PHONE_ID=your_whatsapp_phone_number_id
VERIFY_TOKEN=your_custom_verify_token
OPENAI_API_KEY=your_openai_api_key
OPENAI_ORG_KEY=your_openai_org_key
NODE_ENV=development
CORS_ORIGIN=http://localhost:3001

  3. Start both frontend and backend:

    npm start

    This will start:

Available Scripts

  • npm start - Start both frontend and backend
  • npm run frontend - Start only the frontend
  • npm run backend - Start only the backend
  • npm run build - Build the frontend for production
  • npm run install-all - Install dependencies for both frontend and backend

Features

  • WhatsApp message handling via Meta's WhatsApp Business API
  • AI-powered responses using OpenAI's GPT-3.5 model
  • Real-time analytics dashboard with charts
  • Conversation tracking by day, month, city, and country
  • Secure webhook endpoints
  • MongoDB data persistence
  • Rate limiting and security features
  • Modern React frontend with Tailwind CSS
  • Responsive design for all devices

API Endpoints

Webhook Endpoints

  • GET /webhook - WhatsApp webhook verification
  • POST /webhook - Receive incoming WhatsApp messages

Analytics Endpoints

  • GET /api/analytics/daily - Get conversation count by day (last 30 days)
  • GET /api/analytics/monthly - Get conversation count by month
  • GET /api/analytics/by-country - Get conversation count by country
  • GET /api/analytics/by-city - Get conversation count by city

Development

The project uses the following stack:

  • Backend: Node.js, Express, MongoDB (Mongoose)
  • Frontend: React, TypeScript, Tailwind CSS, Recharts
  • APIs: WhatsApp Business API, OpenAI API

Production Deployment

  1. Build the frontend:

    npm run build

  2. Set environment variables for production:

    • Set NODE_ENV=production
    • Update CORS_ORIGIN to your frontend domain
    • Configure MongoDB connection string
    • Set up all required API keys

  3. Use process managers like PM2 for the backend

  4. Serve the frontend build directory using a static file server

License

This project is licensed under the ISC License.