Some Tech Involved in Building A Web App

  flowchart TB
%% List of nodes at top
%% Composition of nodes into Sub-Graphs & flow layout in graph below





%%
%% NODES
%%

%% initial nodes
  HTTPSERVER[Build an HTTP Server];
  FIRSTUI[Serving First UI Content];
  OPTS{Some Next Step Options}

%% server nodes
  REST-API[RESTful API];
  GRAPH-DATA[graphed data];
  WEBSOCKETS[Websockets];
  NODE[node];
  DOCKER[Containerizing Servers with Docker];
  LINUX[OS with Linux];

%% system design nodes;
  AUTH[Authentication];
  DATA-CACHE-LAYER[Data-Caching API Layer];


%% Database nodes;
  MONGODB[NoSQL and MongoDB];
  DATA-MODELING[Modeling Data];

%% Data-Modeling Nodes;
  AAPROX[Approximation];
  ATTR[Attribute];
  BUCKET[Bucket];
  COMPUTED[Computed];
  DOC-VER[Document Versioning];
  SCHEM-VER[Schema Versioning];
  EXT-REF[Extended Reference];
  OUTLIER[Outlier];
  PRE-ALLOC[Pre-Allocation];
  POLYMORPH[Polymorphic];
  SUBSET[Subset];
  TREE[Tree];

%% nodeJS nodes
  SCALING-NODE[scaling an HTTP Server];
  STREAMS[streams];
  EVENTS[events];
  DEBUGGING[debugging];
  BUFFERS[buffers];
  ERRORS[Errors];

%% scaling nodeJS nodes
  MULTI-CORE-CLUSTERING[Cluster for multi-core];
  CHILD-PROCESS[Child Processes for spawning long-running processes];


%% client nodes
  HTML[HTML]
  CSS[CSS]
  JS[JavaScript*]
  BROWSER-APIS[Browser APIs]
  WEBPACK[Webpack]
  BABEL[Babel]
  LIBRARIES[JS Libraries like react, vue, angular]

%% JS nodes
  ASYNC[async];
  INHER[protoypical inheritance];
  BIND-CALL[Bind,Call,Apply];
  DATA-STRUCTS[Data Structures with Objects and Arrays];

%% Browser nodes
  LOCAL-STORAGE[Local Storage];
  SESSION-STORAGE[Session Storage];
  FETCH[Fetch];
  CLIPBOARD[Clipboard];
  GEOLOC[GeoLocation];

%% Docker nodes
  IMAGES[Image Management ]
  CONTAINERS[Container Management]
  CONTAINER-NETWORKS[Networking]
  MULTI-CONTAINER[Multi-Container Projects with Compose]
  VOLUMES[Extracting State with Volumes]




%%
%% Sub-Graph Groupings
%%

%%  HTTP server sub-graph
  subgraph HTTP_SERVER_SETUP[HTTP Server Setup]
    direction LR;
    HTTPSERVER --> FIRSTUI;
  end;

%% Server-Curious SubGraph
  subgraph SERVER_CURIOUS[Serving Content]
    direction TB;
    REST-API;
    GRAPH-DATA;
    WEBSOCKETS;
    NODE;
    DOCKER;
    LINUX;
  end;

%% DB-Curious
  subgraph DATABASE_CURIOUS[Dealing with Data];
    direction TB;
      MONGODB;
      DATA-MODELING;
    end;

%% Modeling Data
  subgraph MODELING_DATA_SG[Data Modeling];
    direction LR;
      AAPROX;
      ATTR;
      BUCKET;
      COMPUTED;
      DOC-VER;
      SCHEM-VER;
      EXT-REF;
      OUTLIER;
      PRE-ALLOC;
      POLYMORPH;
      SUBSET;
      TREE;
    end;

%% Networking & System-Design
  subgraph SYSTEM_DESIGN[System Design]
    direction TB;
  end;

%% Client-Curious SubGraph
  subgraph BROWSER_CURIOUS[Dig In to the Client]
      direction TB;
      HTML;
      CSS;
      JS;
      BROWSER-APIS;
      WEBPACK;
      BABEL;
      LIBRARIES;
  end;

%% Node Sub-Categories
  subgraph NODE-SUBGRAPH[NodeJS Details];
    direction LR;
      SCALING-NODE;
      STREAMS;
      EVENTS;
      DEBUGGING;
      BUFFERS;
      ERRORS;
    end;

%% Node Scaling
  subgraph NODE-SCALING-SUBGRAPH[Scaling an HTTP Server]
      direction TB;
      MULTI-CORE-CLUSTERING;
      CHILD-PROCESS;
  end;


%% JS
  subgraph JS-SUBGRAPH[JavaScript In Depth]
    direction LR;
      ASYNC;
      INHER;
      BIND-CALL;
      DATA-STRUCTS;
  end;

%% Browser
  subgraph BROWSER-SUBGRAPH[Brower APIs]
    direction LR;
    LOCAL-STORAGE;
    SESSION-STORAGE;
    FETCH;
    CLIPBOARD;
    GEOLOC;
  end;

%% Docker
  subgraph DOCKER-SUBGRAPH[Docker Details];
    direction LR;
    CONTAINERS;
    VOLUMES;
    IMAGES;
    CONTAINER-NETWORKS;
    MULTI-CONTAINER;
  end;


%%
%%  Putting It All Together
%%
  HTTP_SERVER_SETUP --> OPTS;
  OPTS --> |Browser-Curious|BROWSER_CURIOUS;
  OPTS --> |Server-Curious|SERVER_CURIOUS;
  OPTS --> |Data-Curious|DATABASE_CURIOUS;
  NODE --> |Node-Deets|NODE-SUBGRAPH;
  JS --> |In Depth| JS-SUBGRAPH;

  %% NOTE: single-node-to-section
  SCALING-NODE --> |Server Scaling| NODE-SCALING-SUBGRAPH;
  BROWSER-APIS --> |Deets| BROWSER-SUBGRAPH;
  DOCKER --> |In-Depth| DOCKER-SUBGRAPH;
  DATA-MODELING --> |Data Design Patterns| MODELING_DATA_SG;