learn

Low-level diagrams

One diagram per folder, side by side.

Every folder below gets the same treatment: what it owns, its diagram, and its dependencies. Backend first, then frontend.

Backend

Backend entry point
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Backend config folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Backend routes folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Backend controllers folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Backend middleware folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Backend models folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Backend utils folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral

Frontend

Frontend pages folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Frontend components folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Frontend services folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Frontend store folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Frontend hooks folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Frontend lib folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Frontend utils folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Frontend static assets
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral

High-level architecture

The system in one diagram.

backend/

Express API plus the socket server, in one process.

On this page

BackendFrontend