{"id":31028216,"url":"https://github.com/classyid/whatsapp-api-frontend","last_synced_at":"2026-02-15T04:35:45.499Z","repository":{"id":310199564,"uuid":"1039051043","full_name":"classyid/whatsapp-api-frontend","owner":"classyid","description":"🚀 WhatsApp API Frontend - Complete web interface for sending messages, images, videos, audio, documents \u0026 stickers via separated WhatsApp API server. Built with Flask + Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-08-16T11:29:58.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-16T13:40:47.985Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/classyid.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":"2025-08-16T11:25:49.000Z","updated_at":"2025-08-16T11:30:01.000Z","dependencies_parsed_at":"2025-08-16T17:31:34.028Z","dependency_job_id":null,"html_url":"https://github.com/classyid/whatsapp-api-frontend","commit_stats":null,"previous_names":["classyid/whatsapp-api-frontend"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/classyid/whatsapp-api-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/classyid%2Fwhatsapp-api-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/classyid%2Fwhatsapp-api-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/classyid%2Fwhatsapp-api-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/classyid%2Fwhatsapp-api-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/classyid","download_url":"https://codeload.github.com/classyid/whatsapp-api-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/classyid%2Fwhatsapp-api-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275020152,"owners_count":25391651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-09-13T20:06:40.236Z","updated_at":"2026-02-15T04:35:45.494Z","avatar_url":"https://github.com/classyid.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 WhatsApp API Frontend\n\n\u003cdiv align=\"center\"\u003e\n    \n![WhatsApp API Frontend](https://img.shields.io/badge/WhatsApp-API%20Frontend-25D366?style=for-the-badge\u0026logo=whatsapp\u0026logoColor=white)\n![Python](https://img.shields.io/badge/Python-3.8+-3776AB?style=for-the-badge\u0026logo=python\u0026logoColor=white)\n![Flask](https://img.shields.io/badge/Flask-2.3+-000000?style=for-the-badge\u0026logo=flask\u0026logoColor=white)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.0+-06B6D4?style=for-the-badge\u0026logo=tailwindcss\u0026logoColor=white)\n\n**Complete web interface for WhatsApp API with separated server architecture**\n\n\u003c/div\u003e\n\n---\n\n## 📋 Overview\n\nWhatsApp API Frontend adalah web interface modern yang memungkinkan Anda mengirim berbagai jenis pesan WhatsApp melalui API server yang terpisah. Built dengan Flask dan Tailwind CSS, aplikasi ini menyediakan antarmuka yang user-friendly untuk mengelola komunikasi WhatsApp bisnis.\n\n### 🏗️ Architecture\n\n```\n┌─────────────────────┐    HTTP Request    ┌─────────────────────┐\n│   Frontend Server   │ =================\u003e │  WhatsApp API Server│\n│   localhost:8000    │                    │    xx.xx.xx.xx:5000 │\n│                     │                    │                     │\n│ • Web Interface     │                    │ • WhatsApp Bot      │\n│ • File Validation   │                    │ • Message Sending   │\n│ • API Proxy         │                    │ • Media Processing  │\n└─────────────────────┘                    └─────────────────────┘\n```\n\n## 🎯 Features\n\n### ✨ Core Features\n- 📱 **6 Message Types**: Text, Image, Document, Audio, Video, Sticker\n- 🌐 **Web Interface**: Modern, responsive design with Tailwind CSS\n- 🔄 **Real-time Status**: Live connection monitoring with WhatsApp API\n- 📁 **File Validation**: Client-side validation for size and format\n- ⚡ **Fast Performance**: Optimized for speed and reliability\n- 🔧 **Easy Configuration**: Simple .env file configuration\n\n### 📊 Supported Media Formats\n\n| Media Type | Formats | Max Size | Caption Support |\n|------------|---------|----------|-----------------|\n| **Images** | JPG, PNG, GIF, WebP | 16MB | ✅ Yes |\n| **Documents** | PDF, DOC, XLS, PPT, TXT, ZIP, RAR | 32MB | ✅ Yes |\n| **Audio** | MP3, WAV, OGG, M4A, AAC, FLAC | 16MB | ❌ No |\n| **Video** | MP4, AVI, MOV, MKV, WebM, 3GP | 64MB | ✅ Yes |\n| **Stickers** | WebP | 1MB | ❌ No |\n\n### 🛡️ Production Ready\n- 🔒 **Security**: Environment variables, input validation\n- 📈 **Scalability**: Separated architecture for horizontal scaling\n- 🐳 **Docker Support**: Ready for containerization\n- 🔍 **Monitoring**: Health checks and status endpoints\n- 📝 **Logging**: Comprehensive error tracking\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Python 3.8+ \n- WhatsApp API Server running on separate machine\n\n### 1-Minute Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/classyid/whatsapp-api-frontend.git\ncd whatsapp-api-frontend\n\n# Run automatic setup\npython setup_frontend.py\n\n# Test connection to WhatsApp API\npython test_connection.py\n\n# Start frontend\npython app.py\n```\n\n**Access your application at**: http://localhost:8000\n\n## 🛠️ Installation\n\n### Method 1: Automatic Setup (Recommended)\n\n```bash\n# 1. Clone the repository\ngit clone https://github.com/classyid/whatsapp-api-frontend.git\ncd whatsapp-api-frontend\n\n# 2. Run setup script\npython setup_frontend.py\n# Script will ask for WhatsApp API server IP\n\n# 3. Test connection\npython test_connection.py\n\n# 4. Start application\npython app.py\n```\n\n### Method 2: Manual Setup\n\n```bash\n# 1. Create virtual environment\npython -m venv venv\n\n# Activate virtual environment\n# Windows:\nvenv\\Scripts\\activate\n# Linux/Mac:\nsource venv/bin/activate\n\n# 2. Install dependencies\npip install -r requirements.txt\n\n# 3. Configure environment\ncp .env.example .env\n# Edit .env file with your WhatsApp API server details\n\n# 4. Create directories\nmkdir -p uploads logs static/{css,js,images}\n\n# 5. Start application\npython app.py\n```\n\n## ⚙️ Configuration\n\n### Environment Variables (.env)\n\n```bash\n# WhatsApp API Server Configuration\nWHATSAPP_API_HOST=10.122.25.221\nWHATSAPP_API_PORT=5000\nWHATSAPP_API_HTTPS=false\nWHATSAPP_API_TIMEOUT=30\n\n# Optional: API Key for authentication\n# WHATSAPP_API_KEY=your-api-key-here\n\n# Frontend Server Configuration\nFLASK_ENV=development\nFLASK_DEBUG=true\nHOST=0.0.0.0\nPORT=8000\n\n# File Upload Configuration\nMAX_CONTENT_LENGTH=67108864  # 64MB\nUPLOAD_FOLDER=uploads\n\n# Security\nSECRET_KEY=your-secret-key-here\n```\n\n### Quick Configuration Change\n\nUpdate WhatsApp API server in `app.py` line 22-30:\n\n```python\nWHATSAPP_API_CONFIG = {\n    'host': os.getenv('WHATSAPP_API_HOST', 'localhost'),  # ← Change IP here\n    'port': os.getenv('WHATSAPP_API_PORT', '5000'),           # ← Change port here\n    'use_https': os.getenv('WHATSAPP_API_HTTPS', 'false').lower() == 'true',\n    'api_key': os.getenv('WHATSAPP_API_KEY', ''),\n    'timeout': int(os.getenv('WHATSAPP_API_TIMEOUT', '30'))\n}\n```\n\n## 📖 Documentation\n\n### API Endpoints\n\n| Endpoint | Method | Description |\n|----------|--------|-------------|\n| `/` | GET | Main web interface |\n| `/api/status` | GET | Get connection status |\n| `/api/send-message` | POST | Send text message |\n| `/api/send-image` | POST | Send image with caption |\n| `/api/send-document` | POST | Send document |\n| `/api/send-audio` | POST | Send audio file |\n| `/api/send-video` | POST | Send video with caption |\n| `/api/send-sticker` | POST | Send WebP sticker |\n| `/health` | GET | Health check endpoint |\n\n### Example Usage\n\n#### Send Text Message\n```bash\ncurl -X POST http://localhost:8000/api/send-message \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\n    \"phone\": \"6281234567890\",\n    \"message\": \"Hello from WhatsApp API!\"\n  }'\n```\n\n#### Send Image\n```bash\ncurl -X POST http://localhost:8000/api/send-image \\\n  -F \"phone=6281234567890\" \\\n  -F \"caption=Beautiful sunset!\" \\\n  -F \"file=@image.jpg\"\n```\n\n### Testing Connection\n\n```bash\n# Test WhatsApp API connectivity\npython test_connection.py\n\n# Expected output:\n# 🧪 Testing WhatsApp API Connection\n# ✅ API Info endpoint: OK\n# ✅ API Status endpoint: OK\n```\n\n## 🐳 Docker Deployment\n\n### Docker Compose\n\n```yaml\nversion: '3.8'\nservices:\n  whatsapp-frontend:\n    build: .\n    ports:\n      - \"8000:8000\"\n    environment:\n      - WHATSAPP_API_HOST=localhost\n      - WHATSAPP_API_PORT=5000\n    volumes:\n      - ./uploads:/app/uploads\n    restart: unless-stopped\n```\n\n### Run with Docker\n\n```bash\n# Build and run\ndocker-compose up -d\n\n# View logs\ndocker-compose logs -f\n\n# Stop\ndocker-compose down\n```\n\n## 🔧 Production Deployment\n\n### Using Gunicorn\n\n```bash\n# Install gunicorn\npip install gunicorn\n\n# Run production server\ngunicorn -w 4 -b 0.0.0.0:8000 --timeout 120 app:app\n```\n\n### Nginx Configuration\n\n```nginx\nserver {\n    listen 80;\n    server_name your-domain.com;\n\n    location / {\n        proxy_pass http://127.0.0.1:8000;\n        proxy_set_header Host $host;\n        proxy_set_header X-Real-IP $remote_addr;\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n        \n        client_max_body_size 64M;\n        proxy_read_timeout 300s;\n    }\n}\n```\n\n## 🚨 Troubleshooting\n\n### Common Issues\n\n#### Connection Failed\n```bash\n❌ Error: \"Cannot connect to WhatsApp API\"\n\nSolutions:\n✅ Check WhatsApp API server is running\n✅ Verify IP address in .env file\n✅ Test: curl http://localhost:5000/api/status\n✅ Check firewall settings\n```\n\n#### Port Already in Use\n```bash\n❌ Error: \"Port 8000 already in use\"\n\nSolutions:\n✅ Change port in .env: PORT=8001\n✅ Kill existing process: lsof -ti:8000 | xargs kill -9\n```\n\n#### File Upload Issues\n```bash\n❌ Error: \"File too large\"\n\nSolutions:\n✅ Check file size limits\n✅ Verify MAX_CONTENT_LENGTH in .env\n✅ Ensure WhatsApp API server accepts large files\n```\n\n### Debug Mode\n\n```bash\n# Enable debug mode\nexport FLASK_DEBUG=1\npython app.py\n\n# Or edit .env\nFLASK_DEBUG=true\n```\n\n## 📊 Monitoring\n\n### Health Check\n\n```bash\ncurl http://localhost:8000/health\n```\n\nResponse:\n```json\n{\n  \"status\": \"healthy\",\n  \"timestamp\": \"2025-08-16 10:30:00\",\n  \"version\": \"2.0.0-frontend\",\n  \"external_api\": {\n    \"url\": \"http://10.122.25.221:5000\",\n    \"available\": true,\n    \"bot_connected\": true\n  }\n}\n```\n\n### Status Indicators\n\n- 🟢 **Online**: API available \u0026 bot connected\n- 🟡 **API OK, Bot Offline**: API reachable but bot disconnected\n- 🔴 **API Offline**: Cannot reach WhatsApp API server\n\n## 🤝 Contributing\n\nWe welcome contributions! Please follow these steps:\n\n1. **Fork** the repository\n2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)\n3. **Commit** your changes (`git commit -m 'Add amazing feature'`)\n4. **Push** to the branch (`git push origin feature/amazing-feature`)\n5. **Open** a Pull Request\n\n### Development Setup\n\n```bash\n# Clone your fork\ngit clone https://github.com/classyid/whatsapp-api-frontend.git\n\n# Install development dependencies\npip install -r requirements-dev.txt\n\n# Run tests\npython -m pytest\n\n# Run linting\nflake8 app.py\nblack app.py\n```\n\n## 📝 Changelog\n\n### v2.0.0 (Latest)\n- ✅ Complete media support (6 message types)\n- ✅ Separated server architecture\n- ✅ Real-time connection monitoring\n- ✅ Production-ready features\n- ✅ Docker support\n\n### v1.0.0\n- ✅ Basic text messaging\n- ✅ Image support\n- ✅ Simple web interface\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Flask](https://flask.palletsprojects.com/) - Web framework\n- [Tailwind CSS](https://tailwindcss.com/) - CSS framework\n- [Font Awesome](https://fontawesome.com/) - Icons\n- [WhatsApp Business API](https://developers.facebook.com/docs/whatsapp) - WhatsApp integration\n\n## 📞 Support\n\n- 📖 **Documentation**: Check this README and docs/ folder\n- 🐛 **Bug Reports**: [Create an issue](https://github.com/yourusername/whatsapp-api-frontend/issues)\n- 💡 **Feature Requests**: [Create an issue](https://github.com/yourusername/whatsapp-api-frontend/issues)\n- 💬 **Discussions**: [Join the discussion](https://github.com/yourusername/whatsapp-api-frontend/discussions)\n\n## 🌟 Star History\n\nIf this project helps you, please consider giving it a ⭐!\n\n[![Star History Chart](https://api.star-history.com/svg?repos=yourusername/whatsapp-api-frontend\u0026type=Date)](https://star-history.com/#yourusername/whatsapp-api-frontend\u0026Date)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ for developers by developers**\n\n[🚀 Get Started](#-quick-start) • [📖 Documentation](#-documentation) • [🤝 Contributing](#-contributing)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclassyid%2Fwhatsapp-api-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclassyid%2Fwhatsapp-api-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclassyid%2Fwhatsapp-api-frontend/lists"}