graph TD
    %% Chic Le Frique Architecture
    subgraph Client [Client Side]
        App[React Native Mobile App\nAndroid & iOS]
        Redux[(Redux/Context\nState Sync)]
        Cache[Image & API Caching]
        App --> Redux
        App --> Cache
    end

    subgraph Backend [Backend Infrastructure]
        Shopify[Shopify Storefront API\nGraphQL]
        REST[Custom REST APIs\nNode.js]
    end

    subgraph External [External Services]
        Payment[Payment Gateway]
    end

    App -- GraphQL --> Shopify
    App -- REST --> REST
    Shopify --> Payment

    classDef client fill:#121212,stroke:#deec56,stroke-width:1px,color:#fff;
    classDef backend fill:#1a1a1a,stroke:#38bdf8,stroke-width:1px,color:#fff;
    
    class App,Redux,Cache client;
    class Shopify,REST backend;
                

                  graph TD
    %% Amar Nodi Architecture
    subgraph Mobile Apps
        Citizen[Citizen App\nReact Native]
        Investigator[Investigator App\nReact Native]
    end

    subgraph AWS Cloud [AWS Cloud Infrastructure]
        Backend[Node.js / Express Backend\nEC2 Instances]
    end

    subgraph Third Party
        Maps[Google Maps API]
    end

    Citizen -- HTTPS --> Backend
    Investigator -- HTTPS --> Backend
    
    Citizen -- Direct Upload --> Backend
    Investigator -- Direct Upload --> Backend
    
    Citizen -.-> Maps
    Investigator -.-> Maps
                

                  graph TD
    %% Section Selector Architecture
    subgraph Client [Android Application]
        UI[React Native UI]
        Engine[Combinatorial Search Engine\nJS/TS]
        Storage[(Local Storage\nSQLite / Async)]
    end

    UI -- User Criteria --> Engine
    Engine -- Conflict Checks --> Storage
    Storage -- Return Prerequisites --> Engine
    Engine -- Generate Valid Schedules --> UI
                

                  graph TD
    %% Attache Admin Portal Architecture
    subgraph Frontend [Client Side]
        ReactSPA[React.js SPA Dashboard]
        Auth[RBAC Auth State]
    end

    subgraph Backend [Server Side]
        Django[Python Django REST API]
        JWT[JWT Authentication Middleware]
    end

    subgraph Infrastructure
        DB[(Primary Database)]
        Video[Video Transcoding Engine]
        Servers[Server Telemetry Agent]
    end

    ReactSPA -- JSON / REST --> JWT
    JWT --> Django
    Django -- Query --> DB
    Django -- Control --> Video
    Servers -- Logs / Metrics --> Django
    Auth -- Token --> ReactSPA
                

                  graph TD
      %% Four in a Row Architecture

      subgraph UI["JavaFX Presentation Layer"]
          MenuFXML["Menu Scene<br/>FXML"]
          GameFXML["Game Board<br/>FXML"]
          MenuController["MenuSceneController"]
          GameController["FXMLDocumentController"]
      end

      subgraph GameLogic["Game Logic"]
          Grid["PlayingGrid"]
          Board["7×7 Integer Grid"]
          Turn["Current Player"]
          Move["Gravity-Based Move Handling"]
          Win["Four-in-a-Row Detection"]
      end

      subgraph Application["Application Layer"]
          Main["Four_in_a_row_oop<br/>JavaFX Application"]
          Scene["JavaFX Scene Switching"]
      end

      Main --> MenuFXML
      MenuFXML --> MenuController
      MenuController --> GameFXML
      MenuController --> Scene
      Scene --> GameFXML
      GameFXML --> GameController
      GameController --> Grid
      Grid --> Board
      Grid --> Turn
      Grid --> Move
      Move --> Win
      Win --> GameController
      GameController --> GameFXML

      classDef ui fill:#1a1a1a,stroke:#deec56,stroke-width:1px,color:#fff;
      classDef logic fill:#121212,stroke:#38bdf8,stroke-width:1px,color:#fff;
      classDef app fill:#1a1a1a,stroke:#a78bfa,stroke-width:1px,color:#fff;

      class MenuFXML,GameFXML,MenuController,GameController ui;
      class Grid,Board,Turn,Move,Win logic;
      class Main,Scene app;
                

                  graph TD
    %% ISP_FTP Architecture
    subgraph Ingestion [Ingestion Pipeline]
        Crawl[Remote Media Directories]
        Parse[URL/HTML Parser\nBeautifulSoup / lxml]
        Extract[Filename & Title Extraction]
        IMDb[IMDb Metadata Enrichment\nIMDbPY]
        ImageDL[Image Download\nPillow]
    end

    subgraph Storage [Persistence Layer]
        ORM[Django ORM]
        SQLite[(SQLite Database)]
        Media[(Local Media Storage)]
    end

    subgraph Frontend [Web Interface]
        DjangoViews[Django Views & Templates]
        UI[Movie/TV Web Interface\nBootstrap 4]
    end

    Crawl --> Parse
    Parse --> Extract
    Extract --> IMDb
    IMDb --> ImageDL
    ImageDL --> ORM

    ORM --> SQLite
    ORM --> Media

    SQLite --> DjangoViews
    Media --> DjangoViews
    DjangoViews --> UI
    
    classDef pipeline fill:#1a1a1a,stroke:#deec56,stroke-width:1px,color:#fff;
    classDef db fill:#121212,stroke:#38bdf8,stroke-width:1px,color:#fff;
    
    class Crawl,Parse,Extract,IMDb,ImageDL pipeline;
    class SQLite,Media db;