# chesterheng/junior-to-senior architecture

> Architecture diagram of the GitHub repository chesterheng/junior-to-senior, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/chesterheng/junior-to-senior
- Repository: https://github.com/chesterheng/junior-to-senior

## Overview

This is a 2020 web-development roadmap repository: a collection of independent lessons and demo applications, not one deployed product. The clearest end-to-end application is Smart Brain: a user signs in or registers, submits an image URL for face detection, and sees detected-face regions and an updated entry count. The tree also preserves separate RoboFriends, code-splitting, server-rendering, security, and performance examples. The README excerpt documents performance topics; implementation details for several listed subsystems were not sampled, so their internal wiring is left out.

Main entry points: [`smart-brain/src/App.js`](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain/src/App.js) (Smart Brain UI), [`smart-brain-api/server.js`](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain-api/server.js) (Smart Brain API), [`robofriends-redux/src/containers/App.js`](https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/containers/App.js) (RoboFriends Redux UI), [`smart-brain-api/controllers/image.js`](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain-api/controllers/image.js) (Image controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_smartbrain["Smart Brain"]
  node_brainui["Smart Brain UI<br/>[App.js]"]
  node_authviews["Sign-in and registration"]
  node_imageform["Image URL form<br/>[ImageLinkForm.js]"]
  node_faceview["Face display<br/>[FaceRecognition.js]"]
  node_rankprofile["Rank and profile"]
  node_brainapi["Smart Brain API<br/>[server.js]"]
  node_authcontrollers["Auth controllers"]
  node_imagecontroller["Image controller<br/>[image.js]"]
  node_profilecontroller["Profile controller<br/>[profile.js]"]
  node_userdb[("User database")]
end

subgraph group_robofriends["RoboFriends variants"]
  node_robotui["RoboFriends Redux UI<br/>[App.js]"]
  node_robotactions["Fetch and search actions<br/>[actions.js]"]
  node_robotapi["Robots API client<br/>[api.js]"]
  node_robotstate["Redux reducers<br/>[reducers.js]"]
  node_robotcards["Robot cards<br/>[CardList.js]"]
end

subgraph group_reactdemos["React demonstrations"]
  node_lazyapp["Lazy-loaded pages<br/>[App.js]"]
  node_lazyviews["Page components"]
  node_ssrpages["Server-rendered pages"]
  node_ssrupdated["Updated SSR example"]
end

subgraph group_webtopics["Web topic demos"]
  node_perfexercises["Performance exercises"]
  node_cache["HTTP caching demo<br/>[server.js]"]
  node_balancer["Load-balancer demo<br/>[server.js]"]
  node_security["Security server demo<br/>[server.js]"]
end

node_person(("User"))
node_clarifai["Face recognition service"]
node_robotservice["Robot data service"]
node_browser(("Browser"))

node_person -->|"uses"| node_brainui
node_brainui -->|"renders"| node_authviews
node_brainui -->|"renders"| node_imageform
node_brainui -->|"renders"| node_faceview
node_brainui -->|"renders"| node_rankprofile
node_brainui -->|"sends auth and image requests"| node_brainapi
node_brainapi -->|"dispatches auth"| node_authcontrollers
node_brainapi -->|"dispatches image requests"| node_imagecontroller
node_brainapi -->|"dispatches profile requests"| node_profilecontroller
node_authcontrollers -->|"uses database"| node_userdb
node_profilecontroller -->|"uses database"| node_userdb
node_imagecontroller -->|"updates entries"| node_userdb
node_imagecontroller -.->|"requests face analysis"| node_clarifai
node_person -->|"searches robots"| node_robotui
node_robotui -->|"dispatches actions"| node_robotactions
node_robotactions -->|"requests robot data"| node_robotapi
node_robotui -->|"reads state"| node_robotstate
node_robotui -->|"renders filtered cards"| node_robotcards
node_robotapi -->|"fetches data"| node_robotservice
node_person -->|"navigates pages"| node_lazyapp
node_lazyapp -->|"loads page modules"| node_lazyviews
node_browser -->|"requests pages"| node_ssrpages
node_browser -->|"requests pages"| node_ssrupdated
node_browser -->|"runs exercises"| node_perfexercises
node_browser -->|"requests content"| node_cache
node_browser -->|"requests service"| node_balancer
node_browser -->|"sends requests"| node_security

click node_brainui "https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain/src/App.js"
click node_authviews "https://github.com/chesterheng/junior-to-senior/tree/master/smart-brain/src/components"
click node_imageform "https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain/src/components/ImageLinkForm/ImageLinkForm.js"
click node_faceview "https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain/src/components/FaceRecognition/FaceRecognition.js"
click node_rankprofile "https://github.com/chesterheng/junior-to-senior/tree/master/smart-brain/src/components"
click node_brainapi "https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain-api/server.js"
click node_authcontrollers "https://github.com/chesterheng/junior-to-senior/tree/master/smart-brain-api/controllers"
click node_imagecontroller "https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain-api/controllers/image.js"
click node_profilecontroller "https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain-api/controllers/profile.js"
click node_robotui "https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/containers/App.js"
click node_robotactions "https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/actions.js"
click node_robotapi "https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/api/api.js"
click node_robotstate "https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/reducers.js"
click node_robotcards "https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/components/CardList.js"
click node_lazyapp "https://github.com/chesterheng/junior-to-senior/blob/master/code-splitting-react-lazy/src/App.js"
click node_lazyviews "https://github.com/chesterheng/junior-to-senior/tree/master/code-splitting-react-lazy/src/Components"
click node_ssrpages "https://github.com/chesterheng/junior-to-senior/tree/master/next-ssr/pages"
click node_ssrupdated "https://github.com/chesterheng/junior-to-senior/tree/master/next-ssr-update/pages"
click node_perfexercises "https://github.com/chesterheng/junior-to-senior/tree/master/exercise-01-media-queries"
click node_cache "https://github.com/chesterheng/junior-to-senior/blob/master/cache-control/server.js"
click node_balancer "https://github.com/chesterheng/junior-to-senior/blob/master/load-balancer/server.js"
click node_security "https://github.com/chesterheng/junior-to-senior/blob/master/security-server/server.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_brainui,node_authviews,node_imageform,node_faceview,node_rankprofile,node_brainapi,node_authcontrollers,node_imagecontroller,node_profilecontroller,node_userdb,node_person,node_browser toneBlue
class node_robotui,node_robotactions,node_robotapi,node_robotstate,node_robotcards toneAmber
class node_lazyapp,node_lazyviews,node_ssrpages,node_ssrupdated toneMint
class node_perfexercises,node_cache,node_balancer,node_security toneRose
class node_clarifai,node_robotservice toneIndigo
```

## Components

### Smart Brain

- [Smart Brain UI](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain/src/App.js): `smart-brain/src/App.js`
- [Sign-in and registration](https://github.com/chesterheng/junior-to-senior/tree/master/smart-brain/src/components): `smart-brain/src/components`
- [Image URL form](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain/src/components/ImageLinkForm/ImageLinkForm.js): `smart-brain/src/components/ImageLinkForm/ImageLinkForm.js`
- [Face display](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain/src/components/FaceRecognition/FaceRecognition.js): `smart-brain/src/components/FaceRecognition/FaceRecognition.js`
- [Rank and profile](https://github.com/chesterheng/junior-to-senior/tree/master/smart-brain/src/components): `smart-brain/src/components`
- [Smart Brain API](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain-api/server.js): `smart-brain-api/server.js`
- [Auth controllers](https://github.com/chesterheng/junior-to-senior/tree/master/smart-brain-api/controllers): `smart-brain-api/controllers`
- [Image controller](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain-api/controllers/image.js): `smart-brain-api/controllers/image.js`
- [Profile controller](https://github.com/chesterheng/junior-to-senior/blob/master/smart-brain-api/controllers/profile.js): `smart-brain-api/controllers/profile.js`
- **User database**

### RoboFriends variants

- [RoboFriends Redux UI](https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/containers/App.js): `robofriends-redux/src/containers/App.js`
- [Fetch and search actions](https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/actions.js): `robofriends-redux/src/actions.js`
- [Robots API client](https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/api/api.js): `robofriends-redux/src/api/api.js`
- [Redux reducers](https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/reducers.js): `robofriends-redux/src/reducers.js`
- [Robot cards](https://github.com/chesterheng/junior-to-senior/blob/master/robofriends-redux/src/components/CardList.js): `robofriends-redux/src/components/CardList.js`

### React demonstrations

- [Lazy-loaded pages](https://github.com/chesterheng/junior-to-senior/blob/master/code-splitting-react-lazy/src/App.js): `code-splitting-react-lazy/src/App.js`
- [Page components](https://github.com/chesterheng/junior-to-senior/tree/master/code-splitting-react-lazy/src/Components): `code-splitting-react-lazy/src/Components`
- [Server-rendered pages](https://github.com/chesterheng/junior-to-senior/tree/master/next-ssr/pages): `next-ssr/pages`
- [Updated SSR example](https://github.com/chesterheng/junior-to-senior/tree/master/next-ssr-update/pages): `next-ssr-update/pages`

### Web topic demos

- [Performance exercises](https://github.com/chesterheng/junior-to-senior/tree/master/exercise-01-media-queries): `exercise-01-media-queries`
- [HTTP caching demo](https://github.com/chesterheng/junior-to-senior/blob/master/cache-control/server.js): `cache-control/server.js`
- [Load-balancer demo](https://github.com/chesterheng/junior-to-senior/blob/master/load-balancer/server.js): `load-balancer/server.js`
- [Security server demo](https://github.com/chesterheng/junior-to-senior/blob/master/security-server/server.js): `security-server/server.js`

### Other components

- **User**
- **Face recognition service**
- **Robot data service**
- **Browser**

## Connections

- User → Smart Brain UI: uses
- Smart Brain UI → Sign-in and registration: renders
- Smart Brain UI → Image URL form: renders
- Smart Brain UI → Face display: renders
- Smart Brain UI → Rank and profile: renders
- Smart Brain UI → Smart Brain API: sends auth and image requests
- Smart Brain API → Auth controllers: dispatches auth
- Smart Brain API → Image controller: dispatches image requests
- Smart Brain API → Profile controller: dispatches profile requests
- Auth controllers → User database: uses database
- Profile controller → User database: uses database
- Image controller → User database: updates entries
- Image controller → Face recognition service: requests face analysis
- User → RoboFriends Redux UI: searches robots
- RoboFriends Redux UI → Fetch and search actions: dispatches actions
- Fetch and search actions → Robots API client: requests robot data
- RoboFriends Redux UI → Redux reducers: reads state
- RoboFriends Redux UI → Robot cards: renders filtered cards
- Robots API client → Robot data service: fetches data
- User → Lazy-loaded pages: navigates pages
- Lazy-loaded pages → Page components: loads page modules
- Browser → Server-rendered pages: requests pages
- Browser → Updated SSR example: requests pages
- Browser → Performance exercises: runs exercises
- Browser → HTTP caching demo: requests content
- Browser → Load-balancer demo: requests service
- Browser → Security server demo: sends requests