{"id":23913110,"url":"https://github.com/montedev0516/whatsapp-chatapp","last_synced_at":"2026-01-21T09:33:37.959Z","repository":{"id":247867283,"uuid":"47032505","full_name":"montedev0516/WhatsApp-ChatApp","owner":"montedev0516","description":"About I have developed a robust web application utilizing Vue.js for the front-end, Laravel for the back-end, and Inertia.js for seamless page rendering. Integrated with Twilio and the WhatsApp Business API, the project offers advanced features like WhatsApp messaging, enhancing user engagement and communication.","archived":false,"fork":false,"pushed_at":"2025-07-24T07:10:19.000Z","size":3956,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-24T11:11:04.954Z","etag":null,"topics":["aws-ec2","firebase","inertiajs","laravel","mysql","socket-io","twilio","vue","whatsapp-api"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/montedev0516.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-11-28T17:18:44.000Z","updated_at":"2025-07-24T07:10:23.000Z","dependencies_parsed_at":"2025-07-24T09:09:52.548Z","dependency_job_id":"282f5d0d-d87e-4de5-85ca-5d6e5061b39a","html_url":"https://github.com/montedev0516/WhatsApp-ChatApp","commit_stats":null,"previous_names":["montedev0516/site_haskell","montedev0516/whatsapp-chatapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/montedev0516/WhatsApp-ChatApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montedev0516%2FWhatsApp-ChatApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montedev0516%2FWhatsApp-ChatApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montedev0516%2FWhatsApp-ChatApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montedev0516%2FWhatsApp-ChatApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/montedev0516","download_url":"https://codeload.github.com/montedev0516/WhatsApp-ChatApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montedev0516%2FWhatsApp-ChatApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28631172,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws-ec2","firebase","inertiajs","laravel","mysql","socket-io","twilio","vue","whatsapp-api"],"created_at":"2025-01-05T09:30:26.458Z","updated_at":"2026-01-21T09:33:37.945Z","avatar_url":"https://github.com/montedev0516.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 WhatsApp Business ChatBot Platform\n\n[![Laravel](https://img.shields.io/badge/Laravel-10.x-red.svg)](https://laravel.com)\n[![Vue.js](https://img.shields.io/badge/Vue.js-3.x-green.svg)](https://vuejs.org)\n[![Twilio](https://img.shields.io/badge/Twilio-WhatsApp_API-blue.svg)](https://www.twilio.com/whatsapp)\n[![Real-time](https://img.shields.io/badge/Real--time-WebSockets-orange.svg)](https://laravel.com/docs/broadcasting)\n\nA powerful, enterprise-grade WhatsApp Business API chatbot platform built with modern web technologies. This application provides a complete solution for businesses to manage WhatsApp conversations, handle multimedia messages, and engage with customers in real-time through an intuitive web interface.\n\n## ✨ Key Features\n\n### 🎯 **Core Messaging Capabilities**\n- **📱 WhatsApp Business API Integration** - Seamless connection with Twilio WhatsApp Business API\n- **💬 Bidirectional Messaging** - Send and receive messages in real-time\n- **📁 Rich Media Support** - Handle images, videos, audio files, and documents\n- **⚡ Real-time Updates** - Instant message delivery and status updates using WebSockets\n- **📋 Message History** - Complete conversation tracking and storage\n\n### ⚙️ **Advanced Management Features**\n- **🗑️ Message Management** - Delete individual messages or entire conversations\n- **📊 Conversation Analytics** - Track message history and engagement\n- **⏰ Timestamp Tracking** - Precise message delivery times\n- **📤 File Upload/Download** - Seamless media file handling\n- **🔄 Auto-sync** - Automatic synchronization with WhatsApp Business API\n\n\n## 🏗️ Technology Stack\n\n| **Frontend** | **Backend** | **Real-time** | **Integration** |\n|--------------|-------------|---------------|-----------------|\n| Vue.js 3.x | Laravel 10.x | Laravel WebSockets | Twilio WhatsApp API |\n| Inertia.js | PHP 8.1+ | Pusher.js | WhatsApp Business |\n| Tailwind CSS | MySQL/PostgreSQL | Broadcasting | Media Webhooks |\n| FontAwesome | Laravel Echo | Socket.io | File Storage |\n\n## 🚀 Quick Start\n\n### Prerequisites\n- PHP 8.1 or higher\n- Node.js 16+ and npm/yarn\n- MySQL/PostgreSQL database\n- Twilio account with WhatsApp Business API access\n\n### Installation\n\n1. **Clone the repository**\n```bash\ngit clone https://github.com/your-username/WhatsApp-ChatApp.git\ncd WhatsApp-ChatApp\n```\n\n2. **Install PHP dependencies**\n```bash\ncomposer install\n```\n\n3. **Install Node.js dependencies**\n```bash\nnpm install\n```\n\n4. **Environment setup**\n```bash\ncp .env.example .env\nphp artisan key:generate\n```\n\n5. **Configure your environment variables**\n```env\n# Database Configuration\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=whatsapp_chatbot\nDB_USERNAME=your_username\nDB_PASSWORD=your_password\n\n# Twilio WhatsApp Configuration\nTWILIO_ACCOUNT_SID=your_twilio_account_sid\nTWILIO_AUTH_TOKEN=your_twilio_auth_token\nTWILIO_WHATSAPP_FROM=whatsapp:+14155238886\n\n# Broadcasting Configuration\nBROADCAST_DRIVER=pusher\nPUSHER_APP_ID=your_pusher_app_id\nPUSHER_APP_KEY=your_pusher_key\nPUSHER_APP_SECRET=your_pusher_secret\nPUSHER_APP_CLUSTER=your_pusher_cluster\n\n# WebSockets Configuration\nLARAVEL_WEBSOCKETS_PORT=6001\n```\n\n6. **Database setup**\n```bash\nphp artisan migrate\n```\n\n7. **Build frontend assets**\n```bash\nnpm run build\n# or for development\nnpm run dev\n```\n\n8. **Start the application**\n```bash\n# Start Laravel server\nphp artisan serve\n\n# Start WebSocket server (in another terminal)\nphp artisan websockets:serve\n\n# Start Vite dev server (for development)\nnpm run dev\n```\n\n## 📱 Screenshots\n\n### Main Chat Interface\n![WhatsApp Chat Interface](/assets/sender1.jpg)\n\n### File Sharing Capabilities\n![File Sender Interface](/assets/file_sender.jpg)\n\n## 🔧 Configuration\n\n### WhatsApp Business API Setup\n\n1. **Twilio Configuration**\n   - Sign up for a Twilio account\n   - Enable WhatsApp Business API\n   - Configure webhook endpoints:\n     - Message webhook: `https://your-domain.com/receive-message`\n     - Media webhook: `https://your-domain.com/twilio/webhook`\n\n2. **Webhook Configuration**\n   ```php\n   // In routes/web.php - Webhook endpoints are already configured\n   Route::post('/receive-message', [SmsController::class, 'receiveMessage']);\n   ```\n\n### Real-time Configuration\n\nThe application uses Laravel WebSockets for real-time functionality:\n\n```bash\n# Start WebSocket server\nphp artisan websockets:serve --port=6001\n```\n\nAccess WebSocket dashboard at: `http://localhost:8000/laravel-websockets`\n\n## 🎯 Usage\n\n### Sending Messages\n```javascript\n// Send text message\nawait axios.post('/vue-message', {\n    message: 'Hello from ChatBot!',\n    PhoneNumber: '+1234567890'\n});\n\n// Send media file\nconst formData = new FormData();\nformData.append('file', selectedFile);\nformData.append('PhoneNumber', '+1234567890');\n\nawait axios.post('/media-message', formData);\n```\n\n### Managing Conversations\n- **View Conversations**: Click on any contact in the sidebar\n- **Delete Messages**: Hover over a message and click the trash icon\n- **Delete Conversations**: Hover over a contact and click the trash icon\n- **Search**: Use the search bar to find specific conversations or messages\n\n## 🔌 API Endpoints\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| GET | `/` | Main chat interface |\n| POST | `/vue-message` | Send text message |\n| POST | `/media-message` | Send media files |\n| POST | `/receive-message` | Webhook for incoming messages |\n| POST | `/get-message` | Retrieve conversation history |\n| GET | `/get-message` | Get all phone numbers |\n| POST | `/delete-phone` | Delete conversation |\n| POST | `/delete-message` | Delete specific message |\n\n\n## 🛠️ Development\n\n### Project Structure\n```\nWhatsApp-ChatApp/\n├── app/\n│   ├── Http/Controllers/     # API controllers\n│   ├── Models/              # Database models\n│   ├── Events/              # Broadcasting events\n│   └── ...\n├── resources/\n│   ├── js/Pages/User/       # Vue.js components\n│   ├── css/                 # Styling\n│   └── views/               # Blade templates\n├── routes/                  # Route definitions\n├── database/                # Migrations and seeders\n└── public/                  # Static assets\n```\n\n### Key Components\n- **SmsController**: Handles message sending/receiving\n- **MessageSent Event**: Broadcasting for real-time updates\n- **Show.vue**: Main chat interface component\n- **UpdateModel**: Message storage model\n\n\n## 🙏 Acknowledgments\n\n- [Laravel](https://laravel.com) - The PHP framework for web artisans\n- [Vue.js](https://vuejs.org) - The progressive JavaScript framework\n- [Twilio](https://www.twilio.com) - Communications APIs for SMS, Voice, Video and more\n- [Tailwind CSS](https://tailwindcss.com) - A utility-first CSS framework\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**⭐ Star this repository if this project helped you! ⭐**\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmontedev0516%2Fwhatsapp-chatapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmontedev0516%2Fwhatsapp-chatapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmontedev0516%2Fwhatsapp-chatapp/lists"}