Call Center Platform

A real-time customer support chat system with quality monitoring capabilities, built with FastAPI and React.

Features

• 💬 Real-time Text Chat: WebSocket-powered communication between agents and customers
• 👥 Agent Dashboard: Manage multiple conversations with queue visibility
• 📊 Quality Monitoring: Supervisors can review transcripts and assign quality scores
• 🔄 Chat Handover: Escalate conversations to specialists or supervisors
• 🔒 Secure by Design: Environment-based configuration, no hardcoded secrets

Tech Stack

Layer	Technology
Backend	Python 3.12+, FastAPI, SQLModel, WebSockets
Frontend	React 18, TypeScript, Vite, Tailwind CSS
Database	PostgreSQL 16
Cache	Redis 7
Infrastructure	Docker Compose

Quick Start

Prerequisites

• Docker & Docker Compose
• Node.js 20+ (for frontend development)
• Python 3.12+ (for backend development)

1. Clone and Configure

git clone <your-repo-url>
cd call-center

# Copy environment template and configure
cp .env.example .env

Edit .env with your values:

POSTGRES_PASSWORD=your_secure_password_here
SECRET_KEY=generate_with_openssl_rand_hex_32

2. Start Services

# Start PostgreSQL and Redis
docker-compose up -d

# Verify services are running
docker-compose ps

3. Run Backend

cd backend
python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate
pip install -r requirements.txt

# Start the API server
uvicorn src.main:app --reload

Backend will be available at http://localhost:8000

• API Docs: http://localhost:8000/docs
• Health Check: http://localhost:8000/health

4. Run Frontend

cd frontend
npm install
npm run dev

Frontend will be available at http://localhost:5173

Project Structure

call-center/
├── backend/
│   ├── src/
│   │   ├── api/           # REST & WebSocket endpoints
│   │   ├── core/          # Config, database setup
│   │   ├── models/        # SQLModel data models
│   │   └── services/      # Business logic
│   ├── tests/
│   └── requirements.txt
├── frontend/
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── pages/         # Page components
│   │   ├── hooks/         # Custom React hooks
│   │   └── types/         # TypeScript definitions
│   └── package.json
├── specs/                 # Feature specifications
├── docker-compose.yml
└── .env.example

API Overview

REST Endpoints

Method	Endpoint	Description
GET	/health	Health check
POST	/api/conversations	Create new conversation
GET	/api/conversations	List conversations
POST	/api/conversations/{id}/join	Agent joins conversation
POST	/api/conversations/{id}/end	End conversation
GET	/api/conversations/completed	List completed (for review)
POST	/api/reviews	Submit quality review

WebSocket

Connect to /ws/{conversation_id} for real-time messaging.

Development

Backend Linting

cd backend
ruff check src/
black src/

Frontend Linting

cd frontend
npm run lint

Running Tests

# Backend
cd backend
pytest

# Frontend
cd frontend
npm test

Environment Variables

See .env.example for all configuration options.

Variable	Required	Description
POSTGRES_PASSWORD	✅	Database password
SECRET_KEY	✅	Application secret key
POSTGRES_USER		Database user (default: callcenter)
POSTGRES_DB		Database name (default: callcenter)
CORS_ORIGINS		Allowed origins (default: localhost)

License

MIT