Christopher Mayor
0910c966a5
- Replaced static hosts.json and staticConfig.ts with SQLite database (Prisma) - Implemented JWT authentication and Login UI - Added dynamic API routes for hosts, topology, and settings - Updated UI components to fetch and manage state dynamically - Added Settings interface for managing hosts and topology nodes
Homelab Topology Visualizer
A responsive, real-time dashboard and visualizer for your homelab infrastructure.
Features Added via 10-Skill Integration
This project has been thoroughly enhanced with 10 specific infrastructure and development skills:
1. Backend & API Security `api-security-hardening`, `nodejs-backend-patterns`
- Implemented Helmet for HTTP response headers.
- Added Rate Limiting to prevent abuse on discovery endpoints.
- Structured Error Handling with an object-oriented hierarchy (`AppError`) and a global error catching middleware.
2. Observability & Logging `observability-monitoring`
- Converted from console logs to Pino structured logging.
- Includes a custom request logger middleware that outputs formatted JSON in production and readable logs via `pino-pretty` in development.
3. Real-Time WebSockets `websocket-engineer`
- Replaced HTTP polling with Socket.IO connections.
- The UI maintains a live connection with the server, receiving `topology:update` events exactly when new data is discovered.
- Features resilient reconnection with exponential backoff and connection status indicators in the dashboard footer.
4. Containerization `docker`
- Full local containerization.
- Features a Multi-Stage Dockerfile that builds the Vite frontend and serves via a lightweight Node.js Alpine image.
- A `docker-compose.yml` stack makes spinning up both the frontend and backend seamless. Includes a health-check endpoint.
5. Testing Infrastructure `vitest`
- Integrated Vitest for unit testing.
- Includes thorough coverage formatting color utility functions and Zustand store actions. Run with `npm test`.
6. Dashboards & Visualization `data-visualizer`
- Added Recharts-inspired KPI panels (`MetricsBar.tsx`).
- Included a pure CSS, screen-reader accessible bar chart mapping services to hosts (`HostChart.tsx`).
- Accessible colorblind-safe color loops are enforced.
7. Domain Types & Architecture `infrastructure-monitoring`, `proxmox-admin`, `network-engineer`
- Virtualization: Native TypeScript support for Proxmox VMs and LXC containers with resource metrics.
- Networking: Supported types for VLANs, subnets, and gateways.
- Monitoring: API latency and performance are actively measured for network mapping jobs.
Running Locally
To run this application via Docker Compose:
```bash
Build and start the containers
docker-compose up -d --build
View logs
docker-compose logs -f ```
The applications will be running at:
- Frontend Dashboard: http://localhost:3000
- Backend API: http://localhost:3001
Development
```bash
Install dependencies
npm ci
Start the dev server
npm run dev ```
Testing
```bash
Run unit tests
npm test
Run tests with coverage
npm run test:coverage ```