# ashikurrafi/blog architecture

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

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

## Overview

1. **Top-level split**
   - The repository is a classic two-tier app: a **React client** in `client/` and a **Node/Bun backend** in `server/`.
   - The client is a single-page application that talks to the server over a JSON API; the server owns persistence, authentication, authorization, and file uploads.

2. **Frontend shell and navigation**
   - The client is organized around **route-level page components** under `src/pages/`.
   - There are distinct UI zones: **public** (`HomePage`, `SinglePostPage`), **auth** (`LoginPage`, `RegisterPage`), **dashboard** (`CreatePostPage`, `EditPostPage`, `MyPostsPage`, `ProfilePage`), and **admin** (`AdminPostsPage`, `AdminCategoriesPage`, `AdminUsersPage`).
   - Layout components in `src/components/layout/` (`PublicLayout`, `DashboardLayout`, `Navbar`, `Sidebar`, `Footer`) indicate the app uses shared shells to separate public browsing from authenticated work areas.

3. **Client-side state and API boundary**
   - Redux is the central client state mechanism, with slices for **auth**, **blog**, **category**, **comment**, and **UI** in `src/redux/`.
   - `src/api/apiClient.js` is the main transport boundary for server calls, so data-fetching and mutations are centralized rather than scattered through pages.
   - This suggests the client reads server state into Redux and uses the store to coordinate auth status, post lists, categories, comments, and UI concerns like dialogs/loading.

4. **Frontend component structure**
   - `src/components/ui/` contains reusable primitive widgets such as buttons, dialogs, tables, forms, tabs, alerts, and sheets, which are then composed by pages and layouts.
   - This creates a three-layer client structure: **page orchestration → layout shell → reusable UI primitives**.

5. **Backend application structure**
   - The server is organized in a standard **route → controller → model** flow.
   - `src/server.js` and `src/app.js` are the entry points, while `src/routes/index.js` aggregates feature routes such as auth, blog, category, comment, user, and admin.
   - This separation keeps HTTP wiring isolated from business logic.

6. **Domain modules on the server**
   - Core business domains are represented by models in `src/models/`: **user**, **blog**, **category**, and **comment**.
   - Controllers mirror those domains in `src/controllers/`, with separate handlers for authentication, blog content, categories, comments, users, and admin operations.
   - The data model implies a blog platform with posts, categorization, user accounts, and threaded/attached comments.

7. **Persistence and data access**
   - `src/config/db.js` handles database connection setup, and the presence of model files strongly suggests a **MongoDB/Mongoose-style** persistence layer.
   - The server does not appear to expose direct database access to the client; all reads/writes are mediated through controllers and route handlers.

8. **Authentication and authorization**
   - `src/middleware/authMiddleware.js` and `isAdminMiddleware.js` enforce access control at the route layer.
   - This creates three trust levels:
     - **public** readers,
     - **authenticated users** who can manage their own profile/posts,
     - **admins** who can manage users, categories, and posts globally.
   - The dedicated `auth` and `user` routes indicate login/registration and account-related APIs are separate from content APIs.

9. **Media upload and external storage**
   - `src/middleware/multer.js`, `src/utils/dataUri.js`, and `src/utils/cloudinary.js` show that post images or user avatars are uploaded through the backend and pushed to **Cloudinary**.
   - The backend therefore acts as the upload gateway, converting multipart file input into a Cloudinary-hosted asset and storing the resulting metadata in the database.

10. **Error and response conventions**
   - `src/errors/apiError.js`, `apiResponse.js`, and `asyncHandler.js` provide a shared HTTP error/response pattern.
   - This indicates the API is standardized around consistent JSON responses and centralized async error handling, which simplifies client integration and server maintenance.

11. **Content integrity and cascading behavior**
   - `src/utils/cascadeDelete.js` suggests the backend handles dependent-record cleanup when content is removed.
   - That is important for a blog system where deleting a category, user, or post may require removing or reassigning related posts/comments.

12. **Primary end-to-end flows**
   - **Public browsing:** client public pages fetch blog content and display single posts.
   - **Signup/login:** auth pages call auth routes, update Redux auth state, and unlock protected layouts.
   - **Author workflow:** dashboard pages create/edit/manage a user’s own posts and profile.
   - **Admin workflow:** admin pages manage site-wide posts, categories, and users.
   - **Commenting:** comment-related state and routes support post detail interactions.

13. **Technology cues that matter for the diagram**
   - The client is built with **React + Vite** and uses **Bun-managed dependencies** (`bun.lock`).
   - The server is also Bun-managed and likely runs as a Node-compatible HTTP API.
   - The architecture is therefore a **separated SPA frontend plus REST-style backend**, with Cloudinary as the only clearly visible external service.

Main entry points: [`client/src/redux/store.js`](https://github.com/ashikurrafi/blog/blob/main/client/src/redux/store.js) (Redux store), [`client/src/main.jsx`](https://github.com/ashikurrafi/blog/blob/main/client/src/main.jsx) (SPA shell), [`server/src/routes/index.js`](https://github.com/ashikurrafi/blog/blob/main/server/src/routes/index.js) (Route index), [`client/src/api/apiClient.js`](https://github.com/ashikurrafi/blog/blob/main/client/src/api/apiClient.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client"]
  node_client_app["SPA shell<br/>React/Vite app<br/>[main.jsx]"]
  node_client_pages_public["Public pages<br/>route views<br/>[HomePage.jsx]"]
  node_client_pages_auth["Auth pages<br/>route views<br/>[LoginPage.jsx]"]
  node_client_pages_dashboard["Dashboard pages<br/>route views<br/>[DashboardPage.jsx]"]
  node_client_pages_admin["Admin pages<br/>route views<br/>[AdminPostsPage.jsx]"]
  node_client_layouts["Layouts<br/>shells<br/>[PublicLayout.jsx]"]
  node_client_ui["UI kit<br/>primitives<br/>[button.jsx]"]
  node_client_api["API client<br/>transport<br/>[apiClient.js]"]
  node_client_store["Redux store<br/>state<br/>[store.js]"]
  node_client_auth_slice["Auth state<br/>redux slice<br/>[authSlice.js]"]
  node_client_blog_slice["Blog state<br/>redux slice<br/>[blogSlice.js]"]
  node_client_category_slice["Category state<br/>redux slice<br/>[categorySlice.js]"]
  node_client_comment_slice["Comment state<br/>redux slice<br/>[commentSlice.js]"]
  node_client_ui_slice["UI state<br/>redux slice<br/>[uiSlice.js]"]
end

subgraph group_server["Server"]
  node_server_entry["Server entry<br/>Bun API<br/>[server.js]"]
  node_server_app["App setup<br/>api bootstrap<br/>[app.js]"]
  node_server_routes["Route index<br/>route aggregator<br/>[index.js]"]
  node_server_auth["Auth API<br/>route/controller<br/>[authController.js]"]
  node_server_content["Content API<br/>route/controller<br/>[blogController.js]"]
  node_server_comments["Comment API<br/>route/controller"]
  node_server_admin["Admin API<br/>route/controller<br/>[adminController.js]"]
  node_server_models[("Domain models<br/>persistence models<br/>[userModel.js]")]
  node_server_middleware["Middleware<br/>guards/uploads<br/>[authMiddleware.js]"]
  node_server_persistence[("DB setup<br/>database config<br/>[db.js]")]
  node_server_media["Cloudinary bridge<br/>upload utils<br/>[cloudinary.js]"]
  node_server_errors["API helpers<br/>response/error<br/>[apiResponse.js]"]
  node_server_cleanup["Cascade delete<br/>domain utils<br/>[cascadeDelete.js]"]
end

node_client_app -->|"uses"| node_client_layouts
node_client_app -->|"routes"| node_client_pages_public
node_client_app -->|"routes"| node_client_pages_auth
node_client_app -->|"routes"| node_client_pages_dashboard
node_client_app -->|"routes"| node_client_pages_admin
node_client_layouts -->|"composes"| node_client_ui
node_client_pages_public -->|"fetches"| node_client_api
node_client_pages_auth -->|"mutates"| node_client_api
node_client_pages_dashboard -->|"mutates"| node_client_api
node_client_pages_admin -->|"mutates"| node_client_api
node_client_api -->|"updates"| node_client_store
node_client_store -->|"contains"| node_client_auth_slice
node_client_store -->|"contains"| node_client_blog_slice
node_client_store -->|"contains"| node_client_category_slice
node_client_store -->|"contains"| node_client_comment_slice
node_client_store -->|"contains"| node_client_ui_slice
node_server_entry -->|"boots"| node_server_app
node_server_app -->|"mounts"| node_server_routes
node_server_routes -->|"includes"| node_server_auth
node_server_routes -->|"includes"| node_server_content
node_server_routes -->|"includes"| node_server_comments
node_server_routes -->|"includes"| node_server_admin
node_server_auth -->|"guards"| node_server_middleware
node_server_content -->|"persists"| node_server_models
node_server_comments -->|"persists"| node_server_models
node_server_admin -->|"persists"| node_server_models
node_server_models -->|"stored in"| node_server_persistence
node_server_middleware -->|"uploads"| node_server_media
node_server_content -->|"cleans up"| node_server_cleanup
node_server_auth -->|"standardizes"| node_server_errors
node_server_content -->|"standardizes"| node_server_errors
node_server_comments -->|"standardizes"| node_server_errors

click node_client_app "https://github.com/ashikurrafi/blog/blob/main/client/src/main.jsx"
click node_client_pages_public "https://github.com/ashikurrafi/blog/blob/main/client/src/pages/public/HomePage.jsx"
click node_client_pages_auth "https://github.com/ashikurrafi/blog/blob/main/client/src/pages/auth/LoginPage.jsx"
click node_client_pages_dashboard "https://github.com/ashikurrafi/blog/blob/main/client/src/pages/dashboard/DashboardPage.jsx"
click node_client_pages_admin "https://github.com/ashikurrafi/blog/blob/main/client/src/pages/admin/AdminPostsPage.jsx"
click node_client_layouts "https://github.com/ashikurrafi/blog/blob/main/client/src/components/layout/PublicLayout.jsx"
click node_client_ui "https://github.com/ashikurrafi/blog/blob/main/client/src/components/ui/button.jsx"
click node_client_api "https://github.com/ashikurrafi/blog/blob/main/client/src/api/apiClient.js"
click node_client_store "https://github.com/ashikurrafi/blog/blob/main/client/src/redux/store.js"
click node_client_auth_slice "https://github.com/ashikurrafi/blog/blob/main/client/src/redux/authSlice.js"
click node_client_blog_slice "https://github.com/ashikurrafi/blog/blob/main/client/src/redux/blogSlice.js"
click node_client_category_slice "https://github.com/ashikurrafi/blog/blob/main/client/src/redux/categorySlice.js"
click node_client_comment_slice "https://github.com/ashikurrafi/blog/blob/main/client/src/redux/commentSlice.js"
click node_client_ui_slice "https://github.com/ashikurrafi/blog/blob/main/client/src/redux/uiSlice.js"
click node_server_entry "https://github.com/ashikurrafi/blog/blob/main/server/src/server.js"
click node_server_app "https://github.com/ashikurrafi/blog/blob/main/server/src/app.js"
click node_server_routes "https://github.com/ashikurrafi/blog/blob/main/server/src/routes/index.js"
click node_server_auth "https://github.com/ashikurrafi/blog/blob/main/server/src/controllers/authController.js"
click node_server_content "https://github.com/ashikurrafi/blog/blob/main/server/src/controllers/blogController.js"
click node_server_comments "https://github.com/ashikurrafi/blog/blob/main/server/src/controllers/commentController.js"
click node_server_admin "https://github.com/ashikurrafi/blog/blob/main/server/src/controllers/adminController.js"
click node_server_models "https://github.com/ashikurrafi/blog/blob/main/server/src/models/userModel.js"
click node_server_middleware "https://github.com/ashikurrafi/blog/blob/main/server/src/middleware/authMiddleware.js"
click node_server_persistence "https://github.com/ashikurrafi/blog/blob/main/server/src/config/db.js"
click node_server_media "https://github.com/ashikurrafi/blog/blob/main/server/src/utils/cloudinary.js"
click node_server_errors "https://github.com/ashikurrafi/blog/blob/main/server/src/errors/apiResponse.js"
click node_server_cleanup "https://github.com/ashikurrafi/blog/blob/main/server/src/utils/cascadeDelete.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_client_app,node_client_pages_public,node_client_pages_auth,node_client_pages_dashboard,node_client_pages_admin,node_client_layouts,node_client_ui,node_client_api,node_client_store,node_client_auth_slice,node_client_blog_slice,node_client_category_slice,node_client_comment_slice,node_client_ui_slice toneBlue
class node_server_entry,node_server_app,node_server_routes,node_server_auth,node_server_content,node_server_comments,node_server_admin,node_server_models,node_server_middleware,node_server_persistence,node_server_media,node_server_errors,node_server_cleanup toneAmber
```

## Components

### Client

React SPA with pages, layouts, Redux state, and API boundary.

- [SPA shell](https://github.com/ashikurrafi/blog/blob/main/client/src/main.jsx): React/Vite app · Application bootstrap and top-level client entry. · `client/src/main.jsx`
- [Public pages](https://github.com/ashikurrafi/blog/blob/main/client/src/pages/public/HomePage.jsx): route views · Home and post detail screens for anonymous browsing. · `client/src/pages/public/HomePage.jsx`
- [Auth pages](https://github.com/ashikurrafi/blog/blob/main/client/src/pages/auth/LoginPage.jsx): route views · Login and registration screens. · `client/src/pages/auth/LoginPage.jsx`
- [Dashboard pages](https://github.com/ashikurrafi/blog/blob/main/client/src/pages/dashboard/DashboardPage.jsx): route views · Authenticated author screens for creating, editing, and managing content. · `client/src/pages/dashboard/DashboardPage.jsx`
- [Admin pages](https://github.com/ashikurrafi/blog/blob/main/client/src/pages/admin/AdminPostsPage.jsx): route views · Site-wide management screens for posts, categories, and users. · `client/src/pages/admin/AdminPostsPage.jsx`
- [Layouts](https://github.com/ashikurrafi/blog/blob/main/client/src/components/layout/PublicLayout.jsx): shells · Shared public and dashboard shells with navigation and chrome. · `client/src/components/layout/PublicLayout.jsx`
- [UI kit](https://github.com/ashikurrafi/blog/blob/main/client/src/components/ui/button.jsx): primitives · Reusable interface components used across pages and layouts. · `client/src/components/ui/button.jsx`
- [API client](https://github.com/ashikurrafi/blog/blob/main/client/src/api/apiClient.js): transport · Central client-side boundary for server requests. · `client/src/api/apiClient.js`
- [Redux store](https://github.com/ashikurrafi/blog/blob/main/client/src/redux/store.js): state · Client state container coordinating auth, content, comments, and UI. · `client/src/redux/store.js`
- [Auth state](https://github.com/ashikurrafi/blog/blob/main/client/src/redux/authSlice.js): redux slice · Authentication and current user state. · `client/src/redux/authSlice.js`
- [Blog state](https://github.com/ashikurrafi/blog/blob/main/client/src/redux/blogSlice.js): redux slice · Post data and blog workflow state. · `client/src/redux/blogSlice.js`
- [Category state](https://github.com/ashikurrafi/blog/blob/main/client/src/redux/categorySlice.js): redux slice · Category list and category management state. · `client/src/redux/categorySlice.js`
- [Comment state](https://github.com/ashikurrafi/blog/blob/main/client/src/redux/commentSlice.js): redux slice · Comment data and comment interactions. · `client/src/redux/commentSlice.js`
- [UI state](https://github.com/ashikurrafi/blog/blob/main/client/src/redux/uiSlice.js): redux slice · Local interface state such as dialogs, loading, and view toggles. · `client/src/redux/uiSlice.js`

### Server

Bun/Node API with routes, controllers, models, and middleware.

- [Server entry](https://github.com/ashikurrafi/blog/blob/main/server/src/server.js): Bun API · HTTP startup and application wiring. · `server/src/server.js`
- [App setup](https://github.com/ashikurrafi/blog/blob/main/server/src/app.js): api bootstrap · Express-style app configuration and middleware setup. · `server/src/app.js`
- [Route index](https://github.com/ashikurrafi/blog/blob/main/server/src/routes/index.js): route aggregator · Aggregates feature routes into the public API. · `server/src/routes/index.js`
- [Auth API](https://github.com/ashikurrafi/blog/blob/main/server/src/controllers/authController.js): route/controller · Login and registration endpoints plus auth handling. · `server/src/controllers/authController.js`
- [Content API](https://github.com/ashikurrafi/blog/blob/main/server/src/controllers/blogController.js): route/controller · Blog post and category CRUD plus content interactions. · `server/src/controllers/blogController.js`
- [Comment API](https://github.com/ashikurrafi/blog/blob/main/server/src/controllers/commentController.js): route/controller · Comment creation and moderation endpoints. · `server/src/controllers/commentController.js`
- [Admin API](https://github.com/ashikurrafi/blog/blob/main/server/src/controllers/adminController.js): route/controller · Global administration endpoints for users and content. · `server/src/controllers/adminController.js`
- [Domain models](https://github.com/ashikurrafi/blog/blob/main/server/src/models/userModel.js): persistence models · User, blog, category, and comment schemas. · `server/src/models/userModel.js`
- [Middleware](https://github.com/ashikurrafi/blog/blob/main/server/src/middleware/authMiddleware.js): guards/uploads · Auth guards, admin checks, and file upload handling. · `server/src/middleware/authMiddleware.js`
- [DB setup](https://github.com/ashikurrafi/blog/blob/main/server/src/config/db.js): database config · Database connection and persistence bootstrapping. · `server/src/config/db.js`
- [Cloudinary bridge](https://github.com/ashikurrafi/blog/blob/main/server/src/utils/cloudinary.js): upload utils · Multipart upload conversion and external asset storage. · `server/src/utils/cloudinary.js`
- [API helpers](https://github.com/ashikurrafi/blog/blob/main/server/src/errors/apiResponse.js): response/error · Shared async handling and standardized API responses/errors. · `server/src/errors/apiResponse.js`
- [Cascade delete](https://github.com/ashikurrafi/blog/blob/main/server/src/utils/cascadeDelete.js): domain utils · Dependent-record cleanup for related content. · `server/src/utils/cascadeDelete.js`

## Connections

- SPA shell → Layouts: uses · App renders shared shells and route zones.
- SPA shell → Public pages: routes · Public navigation and post detail views.
- SPA shell → Auth pages: routes · Authentication screens.
- SPA shell → Dashboard pages: routes · Protected author workflow screens.
- SPA shell → Admin pages: routes · Admin management screens.
- Layouts → UI kit: composes · Layouts are built from reusable primitives.
- Public pages → API client: fetches · Public pages load posts and single-post data.
- Auth pages → API client: mutates · Login and registration call the API boundary.
- Dashboard pages → API client: mutates · Create/edit/profile workflows submit to the backend.
- Admin pages → API client: mutates · Admin actions use centralized API calls.
- API client → Redux store: updates · Server responses flow into client state.
- Redux store → Auth state: contains · Auth state is centralized in Redux.
- Redux store → Blog state: contains · Blog state is centralized in Redux.
- Redux store → Category state: contains · Category state is centralized in Redux.
- Redux store → Comment state: contains · Comment state is centralized in Redux.
- Redux store → UI state: contains · UI state is centralized in Redux.
- Server entry → App setup: boots · Entry point starts the configured app.
- App setup → Route index: mounts · App wires feature routes into the API.
- Route index → Auth API: includes · Authentication route handling.
- Route index → Content API: includes · Blog and category content handling.
- Route index → Comment API: includes · Comment handling.
- Route index → Admin API: includes · Admin handling.
- Auth API → Middleware: guards · Auth routes are protected where needed.
- Content API → Domain models: persists · Content APIs operate on domain models.
- Comment API → Domain models: persists · Comment APIs operate on domain models.
- Admin API → Domain models: persists · Admin APIs manage persisted records.
- Domain models → DB setup: stored in · Models rely on the database connection.
- Middleware → Cloudinary bridge: uploads · File handling passes through Cloudinary integration.
- Content API → Cascade delete: cleans up · Content deletion cascades to related records.
- Auth API → API helpers: standardizes · Controllers use shared async/error response helpers.
- Content API → API helpers: standardizes · Controllers use shared async/error response helpers.
- Comment API → API helpers: standardizes · Controllers use shared async/error response helpers.