OctoCAT Supply Chain Management System Architecture

This site is a demo application written in TypeScript. The entire app was created originally from an ERD diagram and natural language prompts using Copilot. The frontend was created in the same way, using some of the design ideas in the design folder.

The hero image and product images were created by prompting ChatGPT!

Architecture Overview#

The system is a modern supply chain management application built using TypeScript, comprising a backend REST API and a React frontend. It's designed to demonstrate Copilot capabilities using a fairly typical architecture with a little complexity, but not enough to derail demos!

Backend Architecture#

• Express.js API with RESTful endpoints for all entities
• SQLite persistence using a lightweight repository pattern
• Schema migrations and seed data managed via SQL files
• Swagger/OpenAPI documentation integration
• Entity models with proper relationships following an ERD diagram

Frontend Architecture#

• React 18+ with TypeScript
• Vite build tool for fast development
• Tailwind CSS for UI styling

DevOps Integration#

• Docker/Docker Compose for containerization
• Optional Bicep + GitHub Actions plan for Azure deployment

ERD#

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

Component Architecture#

flowchart TD
    subgraph "Frontend"
        F[React App] --> FC[React Components]
        FC --> FT[TypeScript]
        FC --> FCSS[Tailwind CSS]
        F --> FV[Vite Build Tool]
    end
    
    subgraph "Backend"
        B[Express.js API] --> BR[REST Routes]
        BR --> BM[Entity Models]
        B --> BS[Swagger/OpenAPI]
        B --> BO[TAO Observability]
        B --> R[Repositories]
    end
    subgraph "Data"
        D[(SQLite DB\napi-ts/data/app.db)]
    end

    R <--SQL queries--> D
    F <--REST API--> B

Key Features#

• Complete REST APIs for all supply chain entities
• SQLite-backed persistence with foreign keys and indexed queries
• Declarative migrations (src/database/migrations) and deterministic seed data
• Detailed OpenAPI documentation, generated by Copilot
• Modern React UI with responsive design, generated by Copilot using images
• Containerization for consistent deployment, generated by Copilot

Persistence and Data Model#

• Database: SQLite (file located at api-ts/data/app.db by default; configurable via DB_FILE)
• Access: thin repository layer that maps camelCase models to snake_case columns
• Migrations: SQL scripts in src/database/migrations executed in order and tracked in a migrations table
• Seeding: ordered SQL scripts in src/database/seed to bootstrap demo data
• Test mode: in-memory database (:memory:) for fast and isolated tests

See the dedicated guide: sqlite-integration.md.