# thurpe/mern-blog architecture

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

- Interactive diagram: https://gitdiagram.com/thurpe/mern-blog
- Repository: https://github.com/thurpe/mern-blog

## Overview

This is a MERN blogging application: visitors browse and search posts, authenticate, read posts and comments, while authenticated users and administrators access account and content-management views. The client routes pages and calls the Express API; controllers implement authentication, user, post, and comment operations backed by MongoDB models. Source excerpts directly show search fetching posts and Google OAuth posting to the API; other client/API links and several route-to-controller bindings are not asserted where their implementation was not sampled.

Main entry points: [`api/index.js`](https://github.com/thurpe/mern-blog/blob/main/api/index.js) (HTTP server), [`client/src/App.jsx`](https://github.com/thurpe/mern-blog/blob/main/client/src/App.jsx) (App routing), [`client/src/components/OAuth.jsx`](https://github.com/thurpe/mern-blog/blob/main/client/src/components/OAuth.jsx) (Google sign-in), [`client/src/pages/Search.jsx`](https://github.com/thurpe/mern-blog/blob/main/client/src/pages/Search.jsx) (Post search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["App routing<br/>[App.jsx]"]
  node_authpages["Sign-in/up pages<br/>[SignIn.jsx]"]
  node_search["Post search<br/>[Search.jsx]"]
  node_postpages["Post views/editing<br/>[PostPage.jsx]"]
  node_dashboard["Dashboard views<br/>[Dashboard.jsx]"]
  node_commentsui["Comment interface<br/>[CommentSection.jsx]"]
  node_state["Client state<br/>[store.js]"]
end

subgraph group_api["API services"]
  node_apientry["HTTP server<br/>[index.js]"]
  node_authroutes["Auth routes<br/>[auth.route.js]"]
  node_authctrl["Authentication<br/>[auth.controller.js]"]
  node_userctrl["User management<br/>[user.controller.js]"]
  node_postctrl["Post management<br/>[post.controller.js]"]
  node_commentctrl["Comment management"]
  node_userroute["User routes<br/>[user.route.js]"]
  node_postroute["Post routes<br/>[post.route.js]"]
  node_commentroute["Comment routes<br/>[comment.route.js]"]
end

subgraph group_data["Persistence"]
  node_userdb[("User records<br/>[user.model.js]")]
  node_postdb[("Post records<br/>[post.model.js]")]
  node_commentdb[("Comment records<br/>[comment.model.js]")]
end

subgraph group_identity["Identity integrations"]
  node_oauth["Google sign-in<br/>[OAuth.jsx]"]
  node_firebase["Firebase auth<br/>[firebase.js]"]
end

node_visitor(("Visitor"))
node_mongo[("MongoDB")]
node_google(("Google identity"))

node_visitor -->|"browses"| node_app
node_app -->|"routes"| node_authpages
node_app -->|"routes"| node_search
node_app -->|"routes"| node_postpages
node_app -->|"routes"| node_dashboard
node_app -->|"renders with"| node_state
node_search -->|"fetches posts"| node_apientry
node_oauth -->|"uses auth"| node_firebase
node_oauth -.->|"signs in"| node_google
node_oauth -->|"posts identity"| node_apientry
node_apientry -->|"mounts"| node_authroutes
node_apientry -->|"mounts"| node_userroute
node_apientry -->|"mounts"| node_postroute
node_apientry -->|"mounts"| node_commentroute
node_authroutes -->|"routes auth calls"| node_authctrl
node_authctrl -->|"reads/writes"| node_userdb
node_userctrl -->|"reads/writes"| node_userdb
node_postctrl -->|"reads/writes"| node_postdb
node_commentctrl -->|"reads/writes"| node_commentdb
node_apientry -->|"connects"| node_mongo

click node_app "https://github.com/thurpe/mern-blog/blob/main/client/src/App.jsx"
click node_authpages "https://github.com/thurpe/mern-blog/blob/main/client/src/pages/SignIn.jsx"
click node_search "https://github.com/thurpe/mern-blog/blob/main/client/src/pages/Search.jsx"
click node_postpages "https://github.com/thurpe/mern-blog/blob/main/client/src/pages/PostPage.jsx"
click node_dashboard "https://github.com/thurpe/mern-blog/blob/main/client/src/pages/Dashboard.jsx"
click node_commentsui "https://github.com/thurpe/mern-blog/blob/main/client/src/components/CommentSection.jsx"
click node_state "https://github.com/thurpe/mern-blog/blob/main/client/src/redux/store.js"
click node_apientry "https://github.com/thurpe/mern-blog/blob/main/api/index.js"
click node_authroutes "https://github.com/thurpe/mern-blog/blob/main/api/routes/auth.route.js"
click node_authctrl "https://github.com/thurpe/mern-blog/blob/main/api/controllers/auth.controller.js"
click node_userctrl "https://github.com/thurpe/mern-blog/blob/main/api/controllers/user.controller.js"
click node_postctrl "https://github.com/thurpe/mern-blog/blob/main/api/controllers/post.controller.js"
click node_commentctrl "https://github.com/thurpe/mern-blog/blob/main/api/controllers/comment.controller.js"
click node_userroute "https://github.com/thurpe/mern-blog/blob/main/api/routes/user.route.js"
click node_postroute "https://github.com/thurpe/mern-blog/blob/main/api/routes/post.route.js"
click node_commentroute "https://github.com/thurpe/mern-blog/blob/main/api/routes/comment.route.js"
click node_userdb "https://github.com/thurpe/mern-blog/blob/main/api/models/user.model.js"
click node_postdb "https://github.com/thurpe/mern-blog/blob/main/api/models/post.model.js"
click node_commentdb "https://github.com/thurpe/mern-blog/blob/main/api/models/comment.model.js"
click node_oauth "https://github.com/thurpe/mern-blog/blob/main/client/src/components/OAuth.jsx"
click node_firebase "https://github.com/thurpe/mern-blog/blob/main/client/src/firebase.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_app,node_authpages,node_search,node_postpages,node_dashboard,node_commentsui,node_state toneBlue
class node_apientry,node_authroutes,node_authctrl,node_userctrl,node_postctrl,node_commentctrl,node_userroute,node_postroute,node_commentroute,node_mongo toneAmber
class node_userdb,node_postdb,node_commentdb toneMint
class node_oauth,node_firebase toneRose
class node_visitor,node_google toneIndigo
```

## Components

### Web client

- [App routing](https://github.com/thurpe/mern-blog/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Sign-in/up pages](https://github.com/thurpe/mern-blog/blob/main/client/src/pages/SignIn.jsx): `client/src/pages/SignIn.jsx`
- [Post search](https://github.com/thurpe/mern-blog/blob/main/client/src/pages/Search.jsx): `client/src/pages/Search.jsx`
- [Post views/editing](https://github.com/thurpe/mern-blog/blob/main/client/src/pages/PostPage.jsx): `client/src/pages/PostPage.jsx`
- [Dashboard views](https://github.com/thurpe/mern-blog/blob/main/client/src/pages/Dashboard.jsx): `client/src/pages/Dashboard.jsx`
- [Comment interface](https://github.com/thurpe/mern-blog/blob/main/client/src/components/CommentSection.jsx): `client/src/components/CommentSection.jsx`
- [Client state](https://github.com/thurpe/mern-blog/blob/main/client/src/redux/store.js): `client/src/redux/store.js`

### API services

- [HTTP server](https://github.com/thurpe/mern-blog/blob/main/api/index.js): `api/index.js`
- [Auth routes](https://github.com/thurpe/mern-blog/blob/main/api/routes/auth.route.js): `api/routes/auth.route.js`
- [Authentication](https://github.com/thurpe/mern-blog/blob/main/api/controllers/auth.controller.js): `api/controllers/auth.controller.js`
- [User management](https://github.com/thurpe/mern-blog/blob/main/api/controllers/user.controller.js): `api/controllers/user.controller.js`
- [Post management](https://github.com/thurpe/mern-blog/blob/main/api/controllers/post.controller.js): `api/controllers/post.controller.js`
- [Comment management](https://github.com/thurpe/mern-blog/blob/main/api/controllers/comment.controller.js): `api/controllers/comment.controller.js`
- [User routes](https://github.com/thurpe/mern-blog/blob/main/api/routes/user.route.js): `api/routes/user.route.js`
- [Post routes](https://github.com/thurpe/mern-blog/blob/main/api/routes/post.route.js): `api/routes/post.route.js`
- [Comment routes](https://github.com/thurpe/mern-blog/blob/main/api/routes/comment.route.js): `api/routes/comment.route.js`

### Persistence

- [User records](https://github.com/thurpe/mern-blog/blob/main/api/models/user.model.js): `api/models/user.model.js`
- [Post records](https://github.com/thurpe/mern-blog/blob/main/api/models/post.model.js): `api/models/post.model.js`
- [Comment records](https://github.com/thurpe/mern-blog/blob/main/api/models/comment.model.js): `api/models/comment.model.js`

### Identity integrations

- [Google sign-in](https://github.com/thurpe/mern-blog/blob/main/client/src/components/OAuth.jsx): `client/src/components/OAuth.jsx`
- [Firebase auth](https://github.com/thurpe/mern-blog/blob/main/client/src/firebase.js): `client/src/firebase.js`

### Other components

- **Visitor**
- **MongoDB**
- **Google identity**

## Connections

- Visitor → App routing: browses
- App routing → Sign-in/up pages: routes
- App routing → Post search: routes
- App routing → Post views/editing: routes
- App routing → Dashboard views: routes
- App routing → Client state: renders with
- Post search → HTTP server: fetches posts
- Google sign-in → Firebase auth: uses auth
- Google sign-in → Google identity: signs in
- Google sign-in → HTTP server: posts identity
- HTTP server → Auth routes: mounts
- HTTP server → User routes: mounts
- HTTP server → Post routes: mounts
- HTTP server → Comment routes: mounts
- Auth routes → Authentication: routes auth calls
- Authentication → User records: reads/writes
- User management → User records: reads/writes
- Post management → Post records: reads/writes
- Comment management → Comment records: reads/writes
- HTTP server → MongoDB: connects