{"id":28374510,"url":"https://github.com/coding4deep/web_chat-app","last_synced_at":"2025-06-30T02:04:22.203Z","repository":{"id":295903340,"uuid":"991471958","full_name":"Coding4Deep/Web_Chat-App","owner":"Coding4Deep","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-30T07:13:26.000Z","size":404,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-05T22:47:27.917Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://web-chat-app-red.vercel.app","language":"TypeScript","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/Coding4Deep.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-05-27T17:14:55.000Z","updated_at":"2025-05-30T07:52:58.000Z","dependencies_parsed_at":"2025-05-28T01:20:47.530Z","dependency_job_id":"6a9554e5-e7eb-4f84-9fbc-3119ffd48444","html_url":"https://github.com/Coding4Deep/Web_Chat-App","commit_stats":null,"previous_names":["coding4deep/web_chat-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Coding4Deep/Web_Chat-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coding4Deep%2FWeb_Chat-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coding4Deep%2FWeb_Chat-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coding4Deep%2FWeb_Chat-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coding4Deep%2FWeb_Chat-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Coding4Deep","download_url":"https://codeload.github.com/Coding4Deep/Web_Chat-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coding4Deep%2FWeb_Chat-App/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261940476,"owners_count":23233549,"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","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-05-29T22:10:04.907Z","updated_at":"2025-06-25T19:31:30.150Z","avatar_url":"https://github.com/Coding4Deep.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# 🚀 Full-Stack Express Application with Real-time Chat\n\nA modern, production-ready full-stack application built with Express.js, React, TypeScript, and WebSockets. Features real-time chat, user authentication, comprehensive monitoring, and a complete DevOps stack.\n\n## 🏗️ Architecture\n\n```\n┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐\n│   Frontend      │    │    Backend      │    │   Database      │\n│   (React)       │───▶│   (Express)     │───▶│  (PostgreSQL)   │\n│   Port: 80      │    │   Port: 5000    │    │   Port: 5432    │\n└─────────────────┘    └─────────────────┘    └─────────────────┘\n         │                       │                       │\n         │              ┌─────────────────┐              │\n         │              │     Redis       │              │\n         │              │   (Caching)     │              │\n         │              │   Port: 6379    │              │\n         │              └─────────────────┘              │\n         │                       │                       │\n         │              ┌─────────────────┐              │\n         │              │   RabbitMQ      │              │\n         │              │ (Message Queue) │              │\n         │              │   Port: 5672    │              │\n         │              └─────────────────┘              │\n         │                                               │\n┌─────────────────┐              ┌─────────────────┐    │\n│   Prometheus    │              │    Grafana      │    │\n│  (Metrics)      │─────────────▶│ (Visualization) │    │\n│   Port: 9090    │              │   Port: 3000    │    │\n└─────────────────┘              └─────────────────┘    │\n```\n\n## ✨ Features\n\n- 🔐 **Authentication**: Secure user registration and login with sessions\n- 💬 **Real-time Chat**: WebSocket-powered instant messaging\n- 📊 **Monitoring**: Prometheus metrics and Grafana dashboards\n- 🚀 **Caching**: Redis for improved performance\n- 📨 **Message Queue**: RabbitMQ for background task processing\n- 🐳 **Containerized**: Complete Docker setup for all services\n- 📱 **Responsive UI**: Modern React interface with Tailwind CSS\n- 🔍 **Type Safety**: Full TypeScript implementation\n- 🏥 **Health Checks**: Built-in service health monitoring\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **React 18** with TypeScript\n- **Tailwind CSS** for styling\n- **Radix UI** components\n- **React Query** for state management\n- **Wouter** for routing\n- **WebSocket** for real-time features\n\n### Backend\n- **Express.js** with TypeScript\n- **PostgreSQL** with Drizzle ORM\n- **Redis** for caching\n- **RabbitMQ** for message queuing\n- **Passport.js** for authentication\n- **WebSocket** server\n- **Prometheus** metrics\n\n### DevOps \u0026 Monitoring\n- **Docker** \u0026 **Docker Compose**\n- **Nginx** reverse proxy\n- **Prometheus** for metrics collection\n- **Grafana** for monitoring dashboards\n- **Health checks** for all services\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Docker and Docker Compose\n- Node.js 20+ (for local development)\n- Git\n\n### 1. Clone the Repository\n```bash\ngit clone \u003cyour-repo-url\u003e\ncd repl-express-app\n```\n\n### 2. Environment Setup\nCreate environment files:\n\n```bash\n# Copy example environment file\ncp .env.example .env\n\n# Edit environment variables\nnano .env\n```\n\nRequired environment variables:\n```env\n# Database\nDATABASE_URL=postgresql://postgres:postgres@localhost:5432/repl_express\n\n# Redis\nREDIS_URL=redis://localhost:6379\n\n# RabbitMQ\nRABBITMQ_URL=amqp://admin:admin@localhost:5672\n\n# Session\nSESSION_SECRET=your-super-secret-session-key\n\n# Environment\nNODE_ENV=production\n```\n\n### 3. Run with Docker Compose\n```bash\n# Build and start all services\ndocker-compose up -d\n\n# View logs\ndocker-compose logs -f\n\n# Check service status\ndocker-compose ps\n```\n\n### 4. Database Migration\n```bash\n# Run database migrations\ndocker-compose exec backend npm run db:push\n```\n\n## 🌐 Access the Application\n\nOnce all services are running:\n\n- **Application**: http://localhost\n- **Backend API**: http://localhost:5000\n- **Grafana Dashboard**: http://localhost:3000 (admin/admin)\n- **Prometheus**: http://localhost:9090\n- **RabbitMQ Management**: http://localhost:15672 (admin/admin)\n\n## 📊 Monitoring \u0026 Analytics\n\n### Grafana Dashboards\nAccess Grafana at http://localhost:3000 with credentials `admin/admin`. Pre-configured dashboards include:\n\n- **Application Metrics**: HTTP requests, response times, error rates\n- **WebSocket Metrics**: Active connections, message throughput\n- **Infrastructure Metrics**: CPU, memory, disk usage\n- **Database Metrics**: Query performance, connection pool status\n- **Cache Metrics**: Redis hit/miss ratios, memory usage\n\n### Prometheus Metrics\nThe application exposes custom metrics at `/metrics`:\n\n- `http_requests_total`: Total HTTP requests by method, route, and status\n- `http_request_duration_seconds`: Request duration histogram\n- `websocket_connections_active`: Active WebSocket connections\n- `chat_messages_total`: Total chat messages sent\n\n## 🛠️ Development\n\n### Local Development Setup\n```bash\n# Install dependencies\nnpm install\n\n# Start PostgreSQL, Redis, and RabbitMQ\ndocker-compose up -d postgres redis rabbitmq\n\n# Run database migrations\nnpm run db:push\n\n# Start development server\nnpm run dev\n```\n\n### Building for Production\n```bash\n# Build both frontend and backend\nnpm run build\n\n# Start production server\nnpm run start\n```\n\n### Running Tests\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n```\n\n## 🐳 Docker Commands\n\n### Individual Services\n```bash\n# Build specific service\ndocker-compose build backend\n\n# Restart a service\ndocker-compose restart backend\n\n# View service logs\ndocker-compose logs -f backend\n\n# Execute commands in container\ndocker-compose exec backend npm run db:push\n```\n\n### Scaling Services\n```bash\n# Scale backend instances\ndocker-compose up -d --scale backend=3\n\n# Scale with load balancer\ndocker-compose -f docker-compose.yml -f docker-compose.scale.yml up -d\n```\n\n## 📁 Project Structure\n\n```\nrepl-express-app/\n├── client/                 # React frontend\n│   ├── src/\n│   │   ├── components/     # Reusable UI components\n│   │   ├── pages/          # Page components\n│   │   ├── hooks/          # Custom React hooks\n│   │   └── lib/            # Utilities and configurations\n│   └── index.html\n├── server/                 # Express backend\n│   ├── auth.ts            # Authentication logic\n│   ├── routes.ts          # API routes\n│   ├── storage.ts         # Database operations\n│   ├── redis.ts           # Redis client\n│   ├── rabbitmq.ts        # RabbitMQ client\n│   ├── metrics.ts         # Prometheus metrics\n│   └── index.ts           # Server entry point\n├── shared/                 # Shared TypeScript types\n│   └── schema.ts          # Database schema\n├── grafana/               # Grafana configurations\n│   ├── provisioning/      # Auto-provisioning configs\n│   └── dashboards/        # Dashboard definitions\n├── docker-compose.yml     # Multi-service orchestration\n├── Dockerfile.backend     # Backend container\n├── Dockerfile.frontend    # Frontend container\n├── prometheus.yml         # Prometheus configuration\n└── nginx.conf            # Nginx configuration\n```\n\n## 🔧 Configuration\n\n### Database Configuration\nThe application uses PostgreSQL with Drizzle ORM. Schema is defined in `shared/schema.ts`.\n\n### Redis Configuration\nRedis is used for:\n- Session storage\n- Chat message caching (30-second TTL)\n- Rate limiting data\n\n### RabbitMQ Configuration\nMessage queues:\n- `notification_queue`: User notifications\n- `task_queue`: Background tasks\n\n### Monitoring Configuration\nPrometheus scrapes metrics every 15 seconds. Custom metrics include:\n- HTTP request metrics\n- WebSocket connection metrics\n- Business logic metrics (chat messages, user actions)\n\n## 🚨 Troubleshooting\n\n### Common Issues\n\n**Services not starting:**\n```bash\n# Check Docker resources\ndocker system df\ndocker system prune\n\n# Check logs\ndocker-compose logs [service-name]\n```\n\n**Database connection issues:**\n```bash\n# Verify PostgreSQL is running\ndocker-compose ps postgres\n\n# Check database logs\ndocker-compose logs postgres\n\n# Test connection\ndocker-compose exec postgres psql -U postgres -d repl_express\n```\n\n**Redis connection issues:**\n```bash\n# Test Redis connection\ndocker-compose exec redis redis-cli ping\n\n# Check Redis logs\ndocker-compose logs redis\n```\n\n**Frontend not loading:**\n```bash\n# Rebuild frontend\ndocker-compose build frontend\n\n# Check Nginx logs\ndocker-compose logs frontend\n```\n\n### Performance Tuning\n\n**Database:**\n- Adjust PostgreSQL configuration in `docker-compose.yml`\n- Monitor query performance in Grafana\n- Consider connection pooling for high traffic\n\n**Redis:**\n- Adjust cache TTL values based on usage patterns\n- Monitor memory usage and eviction policies\n\n**Application:**\n- Use Redis for session storage in production\n- Implement rate limiting for API endpoints\n- Consider horizontal scaling with load balancer\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit changes: `git commit -m 'Add amazing feature'`\n4. Push to branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Built with [Express.js](https://expressjs.com/)\n- UI components from [Radix UI](https://www.radix-ui.com/)\n- Monitoring with [Prometheus](https://prometheus.io/) \u0026 [Grafana](https://grafana.com/)\n- Containerized with [Docker](https://www.docker.com/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoding4deep%2Fweb_chat-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoding4deep%2Fweb_chat-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoding4deep%2Fweb_chat-app/lists"}