🚀 OctoCAT Supply: The Ultimate GitHub Copilot Demo v3.7.0

Welcome to the OctoCAT Supply Website - your go-to demo for showcasing the incredible capabilities of GitHub Copilot, GHAS, and the power of AI-assisted development!

[!NOTE] For the Hands on Demo, follow the step-by-step instructions in Zero-to-Agents Hands-on Lab.

(Optional) Additional Demos can be found at Demo Walkthroughs.

✨ What Makes This Demo Special

This isn't just another demo app - it's a carefully crafted showcase that demonstrates the full spectrum of GitHub's AI capabilities:

• 🤖 Copilot Agent Mode & Vision - Watch Copilot understand UI designs and implement complex features across multiple files
• 🎭 MCP Server Integration - Demonstrate extended capabilities with Playwright for testing and GitHub API integration
• 🧪 Test Generation - Exhibit Copilot's ability to analyze coverage and generate meaningful tests
• 🔄 CI/CD & IaC - Generate deployment workflows and infrastructure code with natural language
• 🎯 Custom Instructions - Show how Copilot can be tailored to understand internal frameworks and standards
• 📜 Custom Prompt Files - Automate repetitive tasks and documentation updates with ease

---

🏗️ Architecture

The application is built using modern TypeScript with a clean separation of concerns:

erDiagram
    Headquarters ||--o{ Branch: has
    Branch ||--o{ Order: placed_at
    Order ||--o{ OrderDetail: contains
    OrderDetail ||--o{ OrderDetailDelivery: fulfilled_by
    OrderDetail }|--|| Product: references
    Delivery ||--o{ OrderDetailDelivery: includes
    Supplier ||--o{ Delivery: provides

Loading

Tech Stack

• Frontend: React 18+, TypeScript, Tailwind CSS, Vite

• Backend: Express.js, TypeScript, SQLite, OpenAPI/Swagger

• Data: SQLite (file db at api/data/app.db; in-memory for tests)

• DevOps: Docker

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm

• Make

Quick Start

1. Clone this repository

2. Install dependencies:

   make install

3. Start the development environment:

   make dev

This will start both the API server (on port 3000) and the frontend development server (on port 5173).

Available Make Commands

View all available commands:

make help

Key commands:

• make dev - Start both API and frontend development servers
• make dev-api - Start only the API server
• make dev-frontend - Start only the frontend server
• make build - Build both API and frontend for production
• make db-init - Initialize database schema
• make db-seed - Seed database with sample data
• make test - Run all tests
• make clean - Clean build artifacts and dependencies

Database Management

Initialize the database explicitly (migrations + seed):

make db-init

Seed data only:

make db-seed

Or use npm scripts directly in the API directory:

cd api && npm run db:migrate  # Run migrations only
cd api && npm run db:seed     # Seed data only

VS Code Integration

You can also use VS Code tasks and launch configurations:

• Cmd/Ctrl + Shift + P -> Run Task -> Build All
• Use the Debug panel to run Start API & Frontend

🛠️ MCP Server Setup (Optional)

To showcase extended capabilities:

1. Install Docker/Podman for the GitHub MCP server
2. Use VS Code command palette:
   • MCP: List servers -> playwright -> Start server
   • MCP: List servers -> github -> Start server
3. Configure with a GitHub PAT (required for GitHub MCP server)

📚 Documentation

• Detailed Architecture
• SQLite Integration
• Complete Demo Script

Database defaults and env vars:

• DB file: api/data/app.db (override with DB_FILE=/absolute/path/to/file.db)
• Enable WAL: DB_ENABLE_WAL=true (default)
• Foreign keys: DB_FOREIGN_KEYS=true (default)

---

This entire project, including the hero image, was created using AI and GitHub Copilot! Even this README was generated by Copilot using the project documentation. 🤖✨