🖥️

IPPTT-APP-PLATFORM

คู่มือการตั้งค่า พัฒนา และ deploy
ระบบจัดการ Mumble • GPS Tracking • IoT • AI Bot

Next.jsExpressMongoDBMumbleTraccarMQTTDockerSocket.IOOAuth
                    Internet
                       │
              [nginx-proxy:80/443]
              (Let's Encrypt SSL)
                       │
           +───────────┬───────────+
           │                     │
    [Next.js Frontend]   [Express Backend]
       (port 3000)          (port 3000)
           │                     │
           ├──┬──┬──┬──┬──┬──┬──┬──┤
          │   │  │  │  │  │  │  │  │
       [Mongo] [Mum] [MQTT] [Tra] [Docker]

guide.ipptt.com

#2

Tech Stack

🎨

Frontend

  • Next.js 14 (App Router)
  • React 18 + TypeScript
  • Material-UI 6 (dark theme)
  • Mapbox GL 3.7
  • hls.js (CCTV)
  • Socket.IO Client
  • Recharts
  • Monaco Editor
⚙️

Backend

  • Express.js 4 + TypeScript
  • Socket.IO 4
  • Passport.js (OAuth 2.0)
  • Mongoose 8
  • Zod
  • Dockerode
  • MQTT.js
  • Winston
🐳

Infrastructure

  • Docker Compose (8 services)
  • Nginx reverse proxy
  • Let's Encrypt
  • GitHub Actions (CI/CD)
  • Playwright (E2E)
  • Trivy + CodeQL
  • pnpm workspaces
#3

Architecture

Monorepo Structure (pnpm workspaces)

packages:
  - src/frontend    # Next.js app
  - src/backend     # Express API
  - src/shared      # Shared TypeScript types/constants
  - e2e             # Playwright E2E tests

Backend Modules

Config

Database, MQTT, Passport (3 OAuth), env

Middleware

auth, roles, validation, rate limit, error handler

Models (11)

Manager, User, Channel, Device, Gateway, Bot, CCTV...

Routes (14)

auth, mumble, devices, provision, logs, settings...

Services (10)

Mumble, MQTT, Traccar, Docker, AI Bot...

Infra

nginx, mosquitto, murmur-rest, mumble, traccar, ai-bot

#4

Key Features

Mumble Server Management

Multi-server CRUD, channels, users, config editor, online monitoring

Device Management

Talkkonnect registration, MQTT auto-provisioning, remote commands

GPS Location Tracking

Mapbox GL map, Traccar integration, geofence alerts

SIP Gateway (mumsi)

SIP-to-Mumble bridge, Docker lifecycle management

AI Voice Bot

Gemini-powered, STT/TTS, configurable prompt

CCTV Cameras

500+ markers, HLS live stream, CSV import

Authentication

OAuth 2.0 (Google, Azure AD, LINE), JWT, RBAC

Real-time Updates

Socket.IO for devices, GPS, geofences, events

Event Logging

Full audit trail, search, CSV export

System

Dark MUI, responsive, rate limiting, Helmet headers

#5

Prerequisites

🐳

Docker + Docker Compose v2+

Full-stack deployment

📦

Node.js 20+

Local development

📦

pnpm 9+

Package manager

🔑

OAuth Provider (อย่างน้อย 1)

Google / Azure AD / LINE

🗺️

Mapbox Account

GPS/CCTV map features

#6

Setup

Option A

Docker (Recommended)

git clone https://github.com/watcharap0ng/IPPTT-APP-PLATFORM.git
cd IPPTT-APP-PLATFORM
cp .env.example .env
# Edit .env with your credentials

docker compose up -d --build
# → Access at http://localhost:3000

Starts 8 services: App, MongoDB, Mumble, Murmur-REST, Traccar, Mosquitto, Mumble-Web, Nginx

Option B

Local Development

git clone https://github.com/watcharap0ng/IPPTT-APP-PLATFORM.git
cd IPPTT-APP-PLATFORM
pnpm install
cp .env.example .env
# Edit .env

# Start infra only
docker compose up -d mongodb mumble mosquitto traccar mumble-web murmur-rest

# Start backend + frontend
pnpm dev

Infra in Docker, app runs locally with hot reload

#7

Environment Variables

ต้องตั้งค่าทั้งหมดในไฟล์ .env

VariableRequiredDescription
NODE_ENVYesproduction / development
MONGODB_URIYesMongoDB connection string
JWT_SECRETYesJWT access token signing secret
JWT_REFRESH_SECRETYesJWT refresh token signing secret
SESSION_SECRETYesSession encryption secret
CLIENT_URLYesFrontend URL (e.g. https://app.ipptt.com)
GOOGLE_CLIENT_IDOAuthGoogle OAuth client ID
GOOGLE_CLIENT_SECRETOAuthGoogle OAuth client secret
GOOGLE_CALLBACK_URLOAuthGoogle OAuth callback URL
AZURE_CLIENT_IDOAuthAzure AD client ID
AZURE_CLIENT_SECRETOAuthAzure AD client secret
AZURE_TENANT_IDOAuthAzure AD tenant ID
LINE_CHANNEL_IDOAuthLINE Login channel ID
LINE_CHANNEL_SECRETOAuthLINE Login channel secret
MUMBLE_API_URLVoiceMurmur-REST API endpoint
TRACCAR_API_URLGPSTraccar API endpoint
TRACCAR_API_TOKENGPSTraccar API auth token
MQTT_BROKER_URLDevicesMQTT broker URL
MQTT_USERNAMEDevicesMQTT username
MQTT_PASSWORDDevicesMQTT password
TELEGRAM_BOT_TOKENAlertsTelegram bot token for geofence alerts
NEXT_PUBLIC_MAPBOX_ACCESS_TOKENMapsMapbox GL access token
#8

Development

pnpm Commands

pnpm install                    # Install all workspace dependencies
pnpm dev                        # Start backend + frontend concurrently
pnpm dev:backend                # Start backend only (port 3000)
pnpm dev:frontend               # Start frontend only (port 3001)
pnpm build                      # Build backend + frontend
pnpm test                       # Run backend + frontend tests
pnpm test:e2e                   # Run Playwright E2E tests
pnpm test:e2e:headed            # Run E2E tests in browser
pnpm lint                       # Lint all packages

Testing

Jest (Backend)

Unit tests for Express routes, services, models

Jest + RTL (Frontend)

Component tests with React Testing Library

Playwright (E2E)

Full integration tests, headed mode available

#9

Deployment

Production (Docker)

docker compose -f docker-compose.prod.yml up -d --build
# → nginx-proxy (80/443) + app + all services
# → Let's Encrypt auto-SSL

CI/CD Pipeline

🔍

CI

lint, typecheck, unit tests, E2E, Docker build

🛡️

Security

Trivy (deps + containers), Gitleaks (secrets), CodeQL (SAST)

🚀

Deploy

Build image → push GHCR → SSH deploy to production

📦

Registry

ghcr.io/watcharap0ng/ipptt-app-platform

Production domain: app.ipptt.com

#10

Docker Services

ServicePort(s)Description
nginx-proxy80, 443Reverse proxy + SSL (production)
app3000Express + Next.js
mongodb27017Database (localhost only)
mumble64738-64748 TCP+UDPVoice server
murmur-rest8081ICE-to-REST bridge
traccar8082, 5055GPS tracking (API + device)
mosquitto1883, 9001MQTT broker (TCP + WebSocket)
mumble-web64737Browser-based voice client
#11

Documentation

SYSTEM_DOCUMENTATION.md

Architecture, APIs, data models, services, real-time events (687 lines)

deployment.md

Prerequisites, TLS setup, MQTT auth, backup/restore, troubleshooting

MIGRATION_EXISTING_MUMBLE.md

Connecting to existing external Mumble server

AGILE_WORKFLOW.md

Enterprise Agile SDLC — 9 phases, sprint ceremonies, quality gates

AGENT_GUIDELINES.md

Guidelines for Claude Code agents

INTEGRATIONS.md

MCP server, Slack/Teams/Discord/Jira integrations

HOOKS_GUIDE.md

Claude Code hooks for workflow automation

EXAMPLE_USAGE.md

Example: generating agents for a Todo app

#12

Claude Code Multi-Agent Squad

โปรเจคมมีระบบ Multi-Agent Squad สำหรับ AI-assisted development

Prime Orchestrator

Plan work, assign tasks, enforce quality gates

Product Manager

PRDs, user stories, sprint management

Solution Architect

System design, technical decisions

Senior Frontend

UI components, state, performance

Senior Backend

API, database, integrations

QA Engineer

Testing strategy, quality gates

DevOps Engineer

Infrastructure, CI/CD, monitoring

Templates & Workflows

Templates

Principal EngProduct LeadSystem ArchitectTech LeadQA LeadPlatform LeadData LeadSecurity ArchTPM

Workflows

Project InitPRD CreationFeature DevSprint MgmtDeployment