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

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 a walkthrough of all demos, check out the Demo Walkthroughs.

🏗️ 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
• Build and Test Guide
• Deployment Guide - Includes JFrog Artifactory integration

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)

🔒 Supply Chain Security

The application supports optional JFrog Artifactory integration for enhanced supply chain security and SLSA Level 3 compliance. This demonstrates:

• Code-to-Cloud Traceability: Complete visibility from commit to deployment
• SLSA Build Level 3: Provenance attestations meeting SLSA standards
• Centralized Artifact Management: Unified repository for all container images
• Enhanced Security Scanning: Integration with JFrog Xray for vulnerability detection

Quick Start:

1. Configure GitHub secrets: JFROG_URL, JFROG_USER, JFROG_PASSWORD
2. Enable via repository variable ENABLE_JFROG=true or workflow dispatch
3. See deployment.md for detailed setup

Reference: GitHub's supply chain security features

🎓 Pro Tips for Solution Engineers

• Practice the demos before customer presentations
• Remember Copilot is non-deterministic - be ready to adapt
• Mix and match demo scenarios based on your audience
• Keep your GitHub PAT handy for MCP demos

---

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. 🤖✨