Spaces:
Sleeping
Sleeping
| title: Zero Friction | |
| emoji: 🚀 | |
| colorFrom: blue | |
| colorTo: green | |
| sdk: docker | |
| app_port: 7860 | |
| pinned: false | |
| # Network Operations Monitoring Dashboard | |
| > Demo built with fake data in an existing production-style codebase to show how new monitoring features can be added quickly using GitHub Codespaces and Copilot. | |
| > | |
| **Authors:** Mingchieh Wang, Wei Tien Pang, Yufei Mclaughlin | |
| > | |
| **Date:** March 23, 2026 | |
| --- | |
| ## What Is This? | |
| PulseFabric Monitor is a live demo showing how **GitHub Codespaces** and **GitHub Copilot** can replace complex local dev setups with zero-friction, AI-assisted development. | |
| The dashboard displays real-time KPI cards, traffic/incident charts, and alert feeds — all backed by a fake REST API. During a demo, presenters use Copilot Chat prompts to add new widgets **live**, proving that AI can follow strict coding rules and produce production-quality code. | |
| ### Key Highlights | |
| - **Zero local setup** — open a Codespace and everything runs | |
| - **AI governance** — 20 production code rules that Copilot must follow | |
| - **Live coding demos** — 3 ready-to-use prompts for adding widgets on stage | |
| - **Fallback branch** — `demo-completed` has scenario 2 pre-built as backup | |
| --- | |
| ## Getting Started | |
| ### Option A: GitHub Codespaces (Recommended) | |
| 1. Click the green **Code** button on the repository page. | |
| 2. Select the **Codespaces** tab. | |
| 3. Click **Create codespace on main**. | |
| 4. Wait for the container to build — Node.js 20, Angular CLI, and all VS Code extensions install automatically. | |
| 5. Run the dev servers: | |
| ```bash | |
| npm run dev | |
| ``` | |
| 6. The Angular app opens at **port 4200** and the API runs at **port 3000**. | |
| ### Option B: Local Development | |
| ```bash | |
| # Clone the repository | |
| git clone https://github.com/mwangui/Zero-friction.git | |
| cd Zero-friction | |
| # Install root dependencies (concurrently, json-server) | |
| npm install | |
| # Install frontend dependencies | |
| cd frontend && npm install && cd .. | |
| # Start both servers | |
| npm run dev | |
| ``` | |
| | URL | Service | | |
| |-----|---------| | |
| | `http://localhost:4200` | Angular dashboard | | |
| | `http://localhost:3000` | json-server API | | |
| The Angular dev server proxies `/api/*` requests to json-server automatically. | |
| ### Available Scripts | |
| | Command | Description | | |
| |---------|-------------| | |
| | `npm run dev` | Start both Angular + json-server concurrently | | |
| | `npm run dev:web` | Start Angular dev server only | | |
| | `npm run dev:api` | Start json-server only | | |
| | `npm run build:web` | Production build | | |
| | `npm run validate` | Build + lint | | |
| --- | |
| ## How to Demo | |
| See [docs/demo-script.md](docs/demo-script.md) for the full script. Quick summary: | |
| ### Demo 1: Add a KPI Card | |
| Open Copilot Chat and paste: | |
| > Add a new KPI card called Active Sessions showing the number 14,200 with a trending up indicator. Put it in the same row as the existing KPI cards. All KPI cards must stay in one single row and share the width equally at 100% total width, no matter how many cards there are. Follow all repo rules in copilot-instructions.md. | |
| ### Demo 2: Add a Chart to AI Drop Zone | |
| > Add a CPU Load by Device bar chart to the AI Widget Drop Zone at the bottom of the dashboard. Show 5 devices with fake CPU percentage data. Add the data to db.json first, then create the chart. Follow all repo rules in copilot-instructions.md. | |
| ### Demo 3: Add a Brand New Widget | |
| > Add a new AI Security Recommendations widget to the dashboard. It should show 3 recommendations, each with a priority level (High, Medium, Low) and a short description. Add the data to db.json first, then build the component. Follow all repo rules in copilot-instructions.md. | |
| **Fallback:** If any demo fails live, switch to the `demo-completed` branch which has scenario 2 pre-built. | |
| --- | |
| ## Tech Stack | |
| | Layer | Technology | | |
| |-------|-----------| | |
| | Frontend | Angular 21, Angular Material (Material 3), ngx-echarts | | |
| | Backend | json-server (fake REST API from `backend/db.json`) | | |
| | Dev Environment | GitHub Codespaces, Dev Containers (Node.js 20) | | |
| | AI Governance | copilot-instructions.md, prompt files, agent profiles | | |
| --- | |
| ## Project Structure | |
| ``` | |
| backend/ | |
| db.json ← Fake REST data (KPIs, traffic, incidents, alerts) | |
| frontend/src/app/ | |
| core/ | |
| models/api.models.ts ← All typed DTOs | |
| services/dashboard-api.service.ts ← API abstraction layer | |
| dashboard/ | |
| dashboard.ts / .html / .scss ← Main dashboard page | |
| kpi-card/ ← Generic KPI card (input-driven) | |
| chart-widget/ ← Generic chart widget (input-driven) | |
| alert-list/ ← Alert list component | |
| chart-config.factory.ts ← Pure functions generating ECharts options | |
| .github/ | |
| copilot-instructions.md ← 20 production code rules for Copilot | |
| prompts/ ← 3 demo prompt files | |
| agents/ ← Custom agent profile | |
| skills/ ← Optional widget scaffolding skill | |
| docs/ | |
| demo-script.md ← Step-by-step demo script (3 scenarios) | |
| review-checklist.md ← Code review checklist | |
| ai-working-rules.md ← AI working rules summary | |
| ``` | |
| --- | |
| ## AI Governance | |
| This repo enforces 20 production code rules via `.github/copilot-instructions.md`. Key rules: | |
| - **Implementation order:** db.json → typed model → service → UI (never skip steps) | |
| - **No `any` type** — all data must be typed with interfaces | |
| - **No hardcoded data** — everything flows from the API | |
| - **CSS tokens only** — use `--mat-sys-*` and `--pf-*` variables | |
| - **Reuse before creating** — extend existing components via inputs | |
| See [docs/ai-working-rules.md](docs/ai-working-rules.md) for the full list. | |
| --- | |
| ## Branches | |
| | Branch | Purpose | | |
| |--------|---------| | |
| | `main` | Clean baseline — ready for live demo | | |
| | `demo-completed` | Scenario 2 (CPU Load chart) pre-built as fallback | | |