# khayb1/fullstack-blog architecture

> Architecture diagram of the GitHub repository khayb1/fullstack-blog, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/khayb1/fullstack-blog
- Repository: https://github.com/khayb1/fullstack-blog

## Overview

This is a blog application: readers browse posts and categories, open individual posts, and authenticated authors can register, sign in, upload images, and create or edit posts. The browser UI is routed through a shared layout and auth context; its API requests reach Express routes and controllers, which query MySQL. The graph also preserves account, user-route, and related-post components indicated by the source index. Some page and route implementations were not excerpted, so their internal behavior and unshown connections are omitted.

Main entry points: [`client/src/pages/Pages.jsx`](https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Pages.jsx) (Page router), [`api/index.js`](https://github.com/khayb1/fullstack-blog/blob/main/api/index.js) (HTTP server), [`api/routes/auth.js`](https://github.com/khayb1/fullstack-blog/blob/main/api/routes/auth.js) (Auth routes), [`api/routes/posts.js`](https://github.com/khayb1/fullstack-blog/blob/main/api/routes/posts.js) (Post routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_app["App shell<br/>[App.jsx]"]
  node_routes_ui["Page router<br/>[Pages.jsx]"]
  node_home["Post feed<br/>[Home.jsx]"]
  node_single["Post detail<br/>[Single.jsx]"]
  node_related["Related posts<br/>[Menu.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_not_found["Not found<br/>[NotFound.jsx]"]
end

subgraph group_identity["Accounts"]
  node_auth_state["Auth context<br/>[authContext.jsx]"]
  node_login["Sign in<br/>[Login.jsx]"]
  node_register["Registration<br/>[Register.jsx]"]
  node_auth_routes["Auth routes<br/>[auth.js]"]
  node_auth_logic["Auth controller<br/>[auth.js]"]
end

subgraph group_publishing["Publishing"]
  node_writer["Post editor<br/>[Write.jsx]"]
  node_post_routes["Post routes<br/>[posts.js]"]
  node_post_logic["Post controller<br/>[post.js]"]
  node_upload_store[("Uploaded files")]
end

subgraph group_service["API and storage"]
  node_api_entry["HTTP server<br/>[index.js]"]
  node_user_routes["User routes<br/>[users.js]"]
  node_user_logic["User controller<br/>[user.js]"]
  node_mysql[("MySQL blog<br/>[db.js]")]
end

node_visitor(("Reader or author"))

node_visitor -->|"uses"| node_app
node_app -->|"renders"| node_routes_ui
node_routes_ui -->|"routes to"| node_home
node_routes_ui -->|"routes to"| node_single
node_routes_ui -->|"routes to"| node_writer
node_routes_ui -->|"routes to"| node_login
node_routes_ui -->|"routes to"| node_register
node_routes_ui -->|"routes to"| node_not_found
node_routes_ui -->|"renders"| node_navbar
node_routes_ui -->|"renders"| node_footer
node_single -->|"renders"| node_related
node_login -->|"uses"| node_auth_state
node_navbar -->|"uses"| node_auth_state
node_app -->|"wrapped by"| node_auth_state
node_login -.->|"requests login"| node_auth_routes
node_register -.->|"requests registration"| node_auth_routes
node_auth_state -->|"requests logout"| node_auth_routes
node_writer -->|"sends post changes"| node_post_routes
node_home -.->|"loads posts"| node_post_routes
node_related -->|"loads category posts"| node_post_routes
node_writer -->|"uploads image"| node_api_entry
node_api_entry -->|"writes upload"| node_upload_store
node_api_entry -->|"mounts routes"| node_post_routes
node_api_entry -->|"mounts routes"| node_auth_routes
node_api_entry -->|"mounts routes"| node_user_routes
node_auth_routes -->|"dispatches to"| node_auth_logic
node_post_routes -->|"dispatches to"| node_post_logic
node_auth_logic -->|"queries"| node_mysql
node_post_logic -->|"queries"| node_mysql

click node_app "https://github.com/khayb1/fullstack-blog/blob/main/client/src/App.jsx"
click node_routes_ui "https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Pages.jsx"
click node_home "https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Home.jsx"
click node_single "https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Single.jsx"
click node_related "https://github.com/khayb1/fullstack-blog/blob/main/client/src/components/Menu.jsx"
click node_writer "https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Write.jsx"
click node_navbar "https://github.com/khayb1/fullstack-blog/blob/main/client/src/components/Navbar.jsx"
click node_footer "https://github.com/khayb1/fullstack-blog/blob/main/client/src/components/Footer.jsx"
click node_auth_state "https://github.com/khayb1/fullstack-blog/blob/main/client/src/context/authContext.jsx"
click node_login "https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Login.jsx"
click node_register "https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Register.jsx"
click node_not_found "https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/NotFound.jsx"
click node_api_entry "https://github.com/khayb1/fullstack-blog/blob/main/api/index.js"
click node_auth_routes "https://github.com/khayb1/fullstack-blog/blob/main/api/routes/auth.js"
click node_auth_logic "https://github.com/khayb1/fullstack-blog/blob/main/api/controllers/auth.js"
click node_post_routes "https://github.com/khayb1/fullstack-blog/blob/main/api/routes/posts.js"
click node_post_logic "https://github.com/khayb1/fullstack-blog/blob/main/api/controllers/post.js"
click node_user_routes "https://github.com/khayb1/fullstack-blog/blob/main/api/routes/users.js"
click node_user_logic "https://github.com/khayb1/fullstack-blog/blob/main/api/controllers/user.js"
click node_mysql "https://github.com/khayb1/fullstack-blog/blob/main/api/db.js"
click node_upload_store "https://github.com/khayb1/fullstack-blog/tree/main/client/public/upload"

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_app,node_routes_ui,node_home,node_single,node_related,node_navbar,node_footer,node_not_found toneBlue
class node_auth_state,node_login,node_register,node_auth_routes,node_auth_logic toneAmber
class node_writer,node_post_routes,node_post_logic,node_upload_store toneMint
class node_api_entry,node_user_routes,node_user_logic,node_mysql toneRose
class node_visitor toneIndigo
```

## Components

### Web application

- [App shell](https://github.com/khayb1/fullstack-blog/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Page router](https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Pages.jsx): `client/src/pages/Pages.jsx`
- [Post feed](https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Home.jsx): `client/src/pages/Home.jsx`
- [Post detail](https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Single.jsx): `client/src/pages/Single.jsx`
- [Related posts](https://github.com/khayb1/fullstack-blog/blob/main/client/src/components/Menu.jsx): `client/src/components/Menu.jsx`
- [Navigation](https://github.com/khayb1/fullstack-blog/blob/main/client/src/components/Navbar.jsx): `client/src/components/Navbar.jsx`
- [Footer](https://github.com/khayb1/fullstack-blog/blob/main/client/src/components/Footer.jsx): `client/src/components/Footer.jsx`
- [Not found](https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/NotFound.jsx): `client/src/pages/NotFound.jsx`

### Accounts

- [Auth context](https://github.com/khayb1/fullstack-blog/blob/main/client/src/context/authContext.jsx): `client/src/context/authContext.jsx`
- [Sign in](https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Login.jsx): `client/src/pages/Login.jsx`
- [Registration](https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Register.jsx): `client/src/pages/Register.jsx`
- [Auth routes](https://github.com/khayb1/fullstack-blog/blob/main/api/routes/auth.js): `api/routes/auth.js`
- [Auth controller](https://github.com/khayb1/fullstack-blog/blob/main/api/controllers/auth.js): `api/controllers/auth.js`

### Publishing

- [Post editor](https://github.com/khayb1/fullstack-blog/blob/main/client/src/pages/Write.jsx): `client/src/pages/Write.jsx`
- [Post routes](https://github.com/khayb1/fullstack-blog/blob/main/api/routes/posts.js): `api/routes/posts.js`
- [Post controller](https://github.com/khayb1/fullstack-blog/blob/main/api/controllers/post.js): `api/controllers/post.js`
- [Uploaded files](https://github.com/khayb1/fullstack-blog/tree/main/client/public/upload): `client/public/upload`

### API and storage

- [HTTP server](https://github.com/khayb1/fullstack-blog/blob/main/api/index.js): `api/index.js`
- [User routes](https://github.com/khayb1/fullstack-blog/blob/main/api/routes/users.js): `api/routes/users.js`
- [User controller](https://github.com/khayb1/fullstack-blog/blob/main/api/controllers/user.js): `api/controllers/user.js`
- [MySQL blog](https://github.com/khayb1/fullstack-blog/blob/main/api/db.js): `api/db.js`

### Other components

- **Reader or author**

## Connections

- Reader or author → App shell: uses
- App shell → Page router: renders (evidence: `client/src/App.jsx`)
- Page router → Post feed: routes to (evidence: `client/src/pages/Pages.jsx`)
- Page router → Post detail: routes to (evidence: `client/src/pages/Pages.jsx`)
- Page router → Post editor: routes to (evidence: `client/src/pages/Pages.jsx`)
- Page router → Sign in: routes to (evidence: `client/src/pages/Pages.jsx`)
- Page router → Registration: routes to (evidence: `client/src/pages/Pages.jsx`)
- Page router → Not found: routes to (evidence: `client/src/pages/Pages.jsx`)
- Page router → Navigation: renders (evidence: `client/src/pages/Pages.jsx`)
- Page router → Footer: renders (evidence: `client/src/pages/Pages.jsx`)
- Post detail → Related posts: renders (evidence: `client/src/pages/Single.jsx`)
- Sign in → Auth context: uses (evidence: `client/src/pages/Login.jsx`)
- Navigation → Auth context: uses (evidence: `client/src/components/Navbar.jsx`)
- App shell → Auth context: wrapped by (evidence: `client/src/main.jsx`)
- Sign in → Auth routes: requests login
- Registration → Auth routes: requests registration
- Auth context → Auth routes: requests logout (evidence: `client/src/context/authContext.jsx`)
- Post editor → Post routes: sends post changes (evidence: `client/src/pages/Write.jsx`)
- Post feed → Post routes: loads posts
- Related posts → Post routes: loads category posts (evidence: `client/src/components/Menu.jsx`)
- Post editor → HTTP server: uploads image (evidence: `client/src/pages/Write.jsx`)
- HTTP server → Uploaded files: writes upload (evidence: `api/index.js`)
- HTTP server → Post routes: mounts routes (evidence: `api/index.js`)
- HTTP server → Auth routes: mounts routes (evidence: `api/index.js`)
- HTTP server → User routes: mounts routes (evidence: `api/index.js`)
- Auth routes → Auth controller: dispatches to (evidence: `api/routes/auth.js`)
- Post routes → Post controller: dispatches to (evidence: `api/routes/posts.js`)
- Auth controller → MySQL blog: queries (evidence: `api/controllers/auth.js`)
- Post controller → MySQL blog: queries (evidence: `api/controllers/post.js`)