TschunkOrder

A modern web application for managing drink orders, specifically designed for Tschunk beverages. The application provides a real-time ordering system with a Vue.js frontend and FastAPI backend, featuring WebSocket support for live updates and Prometheus metrics for monitoring.

Purpose

TschunkOrder is a full-stack application that allows users to:

• Create and manage drink orders in real-time
• Choose from various Tschunk variants (Tschunk, Tschunk Hannover-Mische, Tschunk alkoholfreier Rum, Virgin Tschunk)
• Select between Flora Mate and Club Mate
• Add custom notes and special requests
• View order statistics and metrics
• Receive live updates via WebSocket connections

Quick Start with Docker

The easiest way to run the application is using the provided Docker Compose setup:

# Clone the repository (if not already done)
git clone ssh://gogs@git.hannover.ccc.de:3071/clarity/tschunkorder.git
cd tschunkorder

# Start all services
docker-compose up -d

# Access the application
# Frontend: http://[url]
# API Documentation: http://[url]/api/docs
# Prometheus Metrics: http://[url]/metrics

The Docker setup includes:

• Frontend: Vue.js application served on port 80
• Backend: FastAPI server with WebSocket support
• Nginx: Reverse proxy with rate limiting and security headers

Development Environment Setup

Backend Development

Prerequisites:

• Python 3.8+
• pip

Setup:

cd backend

# Create virtual environment
python -m venv venv

# Activate virtual environment
# Linux/macOS:
source venv/bin/activate
# Windows:
# venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Run the development server
python main.py
# or
uvicorn main:app --reload

The backend will be available at http://localhost:8000

Frontend Development

Prerequisites:

• Node.js 18+
• npm

Setup:

cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

The frontend will be available at http://localhost:5173

Available Scripts:

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run type-check - Check TypeScript types

API Description

The backend provides a RESTful API with WebSocket support for real-time updates.

Base URL

• Development: http://[url]:8000
• Production: http://[url]/api (when setup via docker)

REST Endpoints

Create Order

POST /api/orders
Content-Type: application/json

{
  "drinks": [
    {
      "drink_type": "Tschunk",
      "mate_type": "Club Mate",
      "quantity": 2,
      "notes": "Extra cold please"
    }
  ]
}

Get All Orders

GET /api/orders

Delete Order

DELETE /api/orders/{order_id}

Get Available Drinks

GET /api/drinks

Get Drink Statistics

GET /api/stats/drinks

WebSocket Endpoint

Connection: ws://[url]:8000/api/ws (development) or ws://[url]/api/ws (production)

Message Types:

1. Create Order:

{
  "type": "create_order",
  "drinks": [...]
}

2. Get All Orders:

{
  "type": "get_all_orders"
}

3. Delete Order:

{
  "type": "delete_order",
  "order_id": "uuid"
}

4. Ping/Pong:

{
  "type": "ping"
}

Received Messages:

• order_created - New order created
• order_deleted - Order deleted
• all_orders - All current orders
• pong - Response to ping

Available Drink Types

• Tschunk
• Tschunk Hannover-Mische
• Tschunk alkoholfreier Rum
• Virgin Tschunk

Available Mate Types

• Flora Mate
• Club Mate

Prometheus Metrics

The application exposes Prometheus metrics at /metrics endpoint for monitoring drink sales and application performance.

Available Metrics

tschunk_drinks_sold_total

• Type: Counter
• Labels: drink_type, mate_type
• Description: Total number of drinks sold by type and mate variety

Example:

# HELP tschunk_drinks_sold_total Total number of drinks sold
# TYPE tschunk_drinks_sold_total counter
tschunk_drinks_sold_total{drink_type="Tschunk",mate_type="Club Mate"} 15
tschunk_drinks_sold_total{drink_type="Virgin Tschunk",mate_type="Flora Mate"} 8

Metrics Persistence

• Metrics are persisted to drink_stats.json in the backend directory
• Counters are restored on application restart
• Data survives container restarts when using Docker volumes

Monitoring Integration

The metrics endpoint can be scraped by:

• Prometheus server
• Grafana dashboards
• Other monitoring tools

Example Prometheus configuration:

scrape_configs:
  - job_name: 'tschunkorder'
    static_configs:
      - targets: ['http://url']
    metrics_path: '/metrics'

Project Structure

tschunkorder/
├── backend/                 # FastAPI backend
│   ├── main.py             # Main application entry point
│   ├── models.py           # Pydantic models
│   ├── database.py         # In-memory database
│   ├── websocket_manager.py # WebSocket connection management
│   ├── prometheus_metrics.py # Prometheus metrics
│   └── requirements.txt    # Python dependencies
├── frontend/               # Vue.js frontend
│   ├── src/               # Source code
│   ├── package.json       # Node.js dependencies
│   └── vite.config.ts     # Vite configuration
├── nginx/                 # Nginx configuration
│   ├── nginx.conf         # Main nginx config
│   └── conf.d/            # Server configurations
└── docker-compose.yml     # Docker orchestration