Part of the Ping-Tower uptime monitoring system. 📖 Full project description and architecture →
Web UI for the PingTower platform: manage monitored servers, watch their status update live over WebSocket, browse ping history/uptime charts, and configure notification preferences.
- React 19 + TypeScript, built with Vite, feature-sliced
(
app/pages/widgets/features/entities/shared) - @microsoft/signalr — live status updates from the API's
/hubs/monitoringhub - TanStack Query — server-state fetching/caching
- Zustand — client-side state
- React Hook Form + Zod — forms and validation
- Radix UI + Tailwind CSS — component primitives and styling
- Recharts — ping history / uptime charts
cp .env.example .env
pnpm install
pnpm dev # http://localhost:5173Environment variables:
| Var | Purpose |
|---|---|
VITE_API_URL |
API base URL (leave empty in production to use the nginx proxy) |
VITE_TELEGRAM_BOT_USERNAME |
bot username used for the Telegram account-linking deep link |
VITE_SOCIAL_TELEGRAM_URL / VITE_SOCIAL_GITHUB_URL / VITE_SOCIAL_GITLAB_URL / VITE_SOCIAL_LINKEDIN_URL |
footer/social links |
Multi-stage build (node/pnpm → nginx). In production, VITE_API_URL is
left empty and nginx proxies /api/* and /hubs/* to the API container
(BACKEND_URL, set at container start via envsubst).
docker build --build-arg VITE_API_URL= -t pingtower-frontend .
docker run --rm -p 3000:80 -e BACKEND_URL=http://pingtower-api:8080 pingtower-frontenddocker-compose.yml joins the external pingtower_network and points
nginx at the API container via FRONTEND_BACKEND_URL.
.gitlab-ci.yml: build (Docker image, push, main/stage only) →
deploy (SSH, docker compose pull && up -d).