Angular 20 Copilot Demo

A comprehensive full-stack application showcasing what can be built entirely through AI-assisted development using GitHub Copilot (Claude Opus 4.5). This project demonstrates Angular 20, NestJS, real-time WebSocket synchronization, AG Grid data tables, and configuration management — all generated through iterative prompting.

Note: The only file in this project NOT generated by AI/Copilot is prompt.md, which contains the human-written prompts used to build everything else.

Tech Stack

• Frontend: Angular 20 with Angular Material and AG Grid
• Backend: NestJS with file-based persistence (JSON/CSV)
• Real-time: Socket.IO for live synchronization across all connected clients
• Data Grid: AG Grid Community with virtual scrolling and inline editing
• Shared: Common TypeScript interfaces between frontend and backend

Features

Blog Posts

• View, create, and manage blog posts
• Real-time updates: changes made on one client automatically appear on all connected clients
• New posts are briefly highlighted when added

Demo Config Page

• REST-managed configuration with real-time sync via WebSocket
• Multiple settings components: Display Settings, Network Settings
• Running State management with timed execution
• All fields respect enabled/disabled states and validation rules
• Collapsible sections for organized settings

Employees Data Grid

• AG Grid with virtual scrolling for 1000+ records
• Tabbed views: Employees list and Employee Details at /employees
• Inline cell editing with validation
• Changes persisted to CSV and synced via WebSocket to all clients
• Reusable data grid component architecture

General

• Responsive Material Design UI
• Typed WebSocket events with shared interfaces

Prerequisites

• Node.js (v20.19+ or v22.12+)
• npm
• Python 3.9+ (for mock data generation)

Getting Started

Install dependencies

make install

Run the application

Start the backend server (runs on http://localhost:3000):

make server

Start the frontend client in a separate terminal (runs on http://localhost:4200):

make client

Available Commands

make               # Show available commands
make install       # Install dependencies for both server and client
make server        # Start the NestJS backend server (auto-generates mock data if missing)
make client        # Start the Angular frontend client
make test          # Run client unit tests (.test.ts)
make test-e2e      # Run Playwright end-to-end tests
make test-e2e-ui   # Run Playwright end-to-end tests in UI mode
make generate-data # Regenerate all mock data files
make kill          # Kill server (port 3000) and client (port 4200) if running
make run-all       # Start client (background) and server (foreground)

Swagger / OpenAPI

Swagger UI is available at http://localhost:3000/openapi when the server is running. An OpenAPI YAML file is also generated at server/openapi.yaml, which you can inspect with Swagger Editor (https://editor.swagger.io) by importing the file. Note: OpenAPI schemas are generated from Swagger-decorated DTO classes; shared TypeScript interfaces are not reflected in the spec.

See project-details.md for API endpoints, WebSocket events, and detailed documentation.