architecture.md

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
• 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

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

Loading

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]
    end
    
    F <--REST API--> B

Loading

Key Features

• Complete REST APIs for all supply chain entities
• Detailed OpenAPI documentation, generated by Copilot
• Modern React UI with responsive design, generated by Copilot using images
• Containerization for consistent deployment, generated by Copilot