# hammadgul-dev/blogify architecture

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

- Interactive diagram: https://gitdiagram.com/hammadgul-dev/blogify
- Repository: https://github.com/hammadgul-dev/blogify

## Overview

1. **High-level shape**
   - Blogify is a two-tier MERN application: a React/Vite frontend and an Express/Node backend, with MongoDB as the primary system of record.
   - The frontend is split into public blogging pages and an authenticated admin dashboard; the backend is organized around REST routes, controllers, and Mongoose models.

2. **Frontend application shell**
   - `Frontend/src/main.jsx` boots the app, wiring together routing and the Redux store.
   - `Routes.jsx` is the main client-side route map, covering public pages like Home, Auth, BlogDetail, and NotFound, plus the admin area.

3. **Public content surface**
   - The public UI is composed from reusable components such as Navbar, HeroSection, PostLists, PostCards, PostComment, and Footer.
   - These components consume blog data and comments from the backend and present the read-only publishing experience to anonymous users or logged-in users.

4. **Admin dashboard boundary**
   - `Frontend/src/Admin` is a separate UI subsystem for content management.
   - It includes an `AdminLayout` with a `Sidebar`, and pages for Dashboard, AddBlog, EditBlogs, Comments, and TrashBin.
   - This boundary is important: admin features are not just different screens, but a different operational mode for blog creation, moderation, publishing, and recovery.

5. **Client state and server-state split**
   - Redux Toolkit is used for application state that affects the whole UI: theme, notifications, search, and post filters.
   - TanStack Query is used for server state and caching, which fits the blog/comment/admin data retrieval patterns.
   - `helper/apiFetch.js` centralizes HTTP access to the backend, so the frontend’s data flow is routed through a single API abstraction.

6. **Backend API layer**
   - The backend is segmented by domain in `Backend/routes` and `Backend/controllers`.
   - Separate route groups exist for auth, blog management, add-blog tooling, comments, and trash-bin operations.
   - This separation maps cleanly to the main business domains: identity, content creation, content lifecycle, and moderation.

7. **Authentication and identity**
   - `config/passport.js` indicates Google OAuth is handled with Passport.js, alongside JWT-based auth endpoints in `userAuthController`.
   - `middleware/authMiddleware.js` protects privileged routes, so admin actions and verified access are enforced on the server, not only in the UI.
   - The auth flow supports both local JWT login/signup and Google sign-in, with token verification exposed to the frontend.

8. **Blog content lifecycle**
   - Blog content is managed as an editable resource with create, update, publish/unpublish, soft delete, restore, and permanent delete actions.
   - The presence of `trashBinController` and related routes shows that deletion is intentionally non-destructive until final removal.
   - This creates a clear lifecycle boundary: active posts, trashed posts, and permanently removed records.

9. **Comments and moderation**
   - Comments are a separate backend domain, not embedded in the blog model flow alone.
   - The API supports adding comments, fetching comments by blog, deleting comments, and approving all comments for moderation workflows.
   - That implies comments can be treated as user-generated content that may require admin review before appearing publicly.

10. **Media and AI integrations**
   - `middleware/upload.js` and the README point to file upload handling through Multer and Cloudinary, which makes blog images an external storage concern rather than local filesystem state.
   - The add-blog routes expose AI-assisted generation endpoints for descriptions and thumbnails, with Groq and an image-generation service called out in the README.
   - These integrations sit on the backend side of the boundary so the frontend only triggers generation/upload actions and receives results.

11. **Persistence and domain models**
   - `config/db.js` establishes the MongoDB connection used by the Mongoose models in `models/`.
   - The visible models include user auth and blog-related records, suggesting the core persisted entities are users, blogs, and likely embedded or associated comment data.
   - Data ownership is centralized in MongoDB, while Cloudinary owns uploaded media assets.

12. **Deployment and routing concerns**
   - Both frontend and backend have Vercel configs, indicating the app is deployed as separate services rather than a single monolith.
   - The frontend `vercel.json` likely supports SPA route fallback so direct visits to client routes work correctly.
   - The backend `vercel.json` indicates the API is also packaged for serverless-style deployment.

13. **Architecture diagram guidance**
   - A useful diagram would show the React frontend on the left, split into public UI and admin UI, both calling a shared API helper.
   - In the middle, show the Express API with distinct route groups for auth, blogs, add-blog AI/upload, comments, and trash.
   - On the right, show MongoDB as the primary datastore, Cloudinary as media storage, and external auth/AI services for Google OAuth and content generation.

Main entry points: [`Frontend/src/helper/apiFetch.js`](https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/helper/apiFetch.js) (API helper), [`Backend/controllers/addBlogController.js`](https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/addBlogController.js) (Add-blog API), [`Frontend/src/Routes.jsx`](https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Routes.jsx) (Routes), [`Backend/controllers/userAuthController.js`](https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/userAuthController.js) (Auth API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_main["App boot<br/>frontend entry<br/>[main.jsx]"]
  node_routes["Routes<br/>client router<br/>[Routes.jsx]"]
  node_public_ui["Public UI<br/>blog pages<br/>[Home.jsx]"]
  node_admin_ui["Admin UI<br/>content admin<br/>[Dashboard.jsx]"]
  node_state["UI state<br/>redux slices<br/>[Store.jsx]"]
  node_api_fetch["API helper<br/>http client<br/>[apiFetch.js]"]
end

subgraph group_backend["Backend"]
  node_auth_controller["Auth API<br/>auth controller"]
  node_blog_controller["Blog API<br/>blog controller<br/>[blogController.js]"]
  node_addblog_controller["Add-blog API<br/>generation controller"]
  node_comments_controller["Comments API<br/>moderation controller"]
  node_trash_controller["Trash API<br/>lifecycle controller"]
  node_auth_routes["Auth routes<br/>route group<br/>[userAuthRoutes.js]"]
  node_blog_routes["Blog routes<br/>route group"]
  node_addblog_routes["Add-blog routes<br/>route group<br/>[addBlogRoutes.js]"]
  node_comments_routes["Comment routes<br/>route group<br/>[commentsRoutes.js]"]
  node_trash_routes["Trash routes<br/>route group<br/>[trashBinRoutes.js]"]
  node_auth_mw["Auth guard<br/>middleware<br/>[authMiddleware.js]"]
  node_upload_mw["Upload middleware<br/>[upload.js]"]
  node_db_config["Mongo config<br/>db config<br/>[db.js]"]
  node_passport_config["Passport config<br/>oauth config<br/>[passport.js]"]
  node_user_model[("Users<br/>mongoose model<br/>[userAuthModel.js]")]
  node_blog_model[("Blogs<br/>mongoose model<br/>[addBlogModel.js]")]
end

subgraph group_external["External services"]
  node_mongo[("MongoDB<br/>datastore")]
  node_cloudinary[("Cloudinary<br/>media storage")]
  node_google(("Google OAuth<br/>identity provider"))
  node_ai_services(("AI services<br/>generation services"))
end

node_main -->|"boots"| node_routes
node_main -->|"provides"| node_state
node_routes -->|"public pages"| node_public_ui
node_routes -->|"admin area"| node_admin_ui
node_public_ui -->|"reads data"| node_api_fetch
node_admin_ui -->|"mutates data"| node_api_fetch
node_state -->|"filters UI"| node_public_ui
node_api_fetch -->|"calls"| node_auth_routes
node_api_fetch -->|"calls"| node_blog_routes
node_api_fetch -->|"calls"| node_comments_routes
node_api_fetch -->|"calls"| node_addblog_routes
node_api_fetch -->|"calls"| node_trash_routes
node_auth_routes -->|"dispatches"| node_auth_controller
node_blog_routes -->|"dispatches"| node_blog_controller
node_addblog_routes -->|"dispatches"| node_addblog_controller
node_comments_routes -->|"dispatches"| node_comments_controller
node_trash_routes -->|"dispatches"| node_trash_controller
node_auth_controller -->|"protected by"| node_auth_mw
node_addblog_controller -->|"protected by"| node_auth_mw
node_blog_controller -->|"persists"| node_blog_model
node_comments_controller -->|"associates"| node_blog_model
node_auth_controller -->|"persists"| node_user_model
node_blog_model -->|"uses"| node_db_config
node_user_model -->|"uses"| node_db_config
node_db_config -->|"connects to"| node_mongo
node_upload_mw -->|"uploads to"| node_cloudinary
node_addblog_controller -->|"uploads"| node_upload_mw
node_passport_config -->|"authenticates with"| node_google
node_addblog_controller -->|"generates with"| node_ai_services

click node_main "https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/main.jsx"
click node_routes "https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Routes.jsx"
click node_public_ui "https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Pages/Home.jsx"
click node_admin_ui "https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Admin/Pages/Dashboard.jsx"
click node_state "https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Redux/Store.jsx"
click node_api_fetch "https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/helper/apiFetch.js"
click node_auth_controller "https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/userAuthController.js"
click node_blog_controller "https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/blogController.js"
click node_addblog_controller "https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/addBlogController.js"
click node_comments_controller "https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/commentsController.js"
click node_trash_controller "https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/trashBinController.js"
click node_auth_routes "https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/userAuthRoutes.js"
click node_blog_routes "https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/blogControllerRoutes.js"
click node_addblog_routes "https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/addBlogRoutes.js"
click node_comments_routes "https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/commentsRoutes.js"
click node_trash_routes "https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/trashBinRoutes.js"
click node_auth_mw "https://github.com/hammadgul-dev/blogify/blob/main/Backend/middleware/authMiddleware.js"
click node_upload_mw "https://github.com/hammadgul-dev/blogify/blob/main/Backend/middleware/upload.js"
click node_db_config "https://github.com/hammadgul-dev/blogify/blob/main/Backend/config/db.js"
click node_passport_config "https://github.com/hammadgul-dev/blogify/blob/main/Backend/config/passport.js"
click node_user_model "https://github.com/hammadgul-dev/blogify/blob/main/Backend/models/userAuthModel.js"
click node_blog_model "https://github.com/hammadgul-dev/blogify/blob/main/Backend/models/addBlogModel.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_main,node_routes,node_public_ui,node_admin_ui,node_state,node_api_fetch toneBlue
class node_auth_controller,node_blog_controller,node_addblog_controller,node_comments_controller,node_trash_controller,node_auth_routes,node_blog_routes,node_addblog_routes,node_comments_routes,node_trash_routes,node_auth_mw,node_upload_mw,node_db_config,node_passport_config,node_user_model,node_blog_model toneAmber
class node_mongo,node_cloudinary,node_google,node_ai_services toneMint
```

## Components

### Frontend

React/Vite client with public blog UI and admin dashboard

- [App boot](https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/main.jsx): frontend entry · Starts the client app and wires store plus routing · `Frontend/src/main.jsx`
- [Routes](https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Routes.jsx): client router · Main route map for public pages and admin area · `Frontend/src/Routes.jsx`
- [Public UI](https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Pages/Home.jsx): blog pages · Homepage, post detail, and shared reading components · `Frontend/src/Pages/Home.jsx`
- [Admin UI](https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Admin/Pages/Dashboard.jsx): content admin · Dashboard and management screens for blogs, comments, and trash · `Frontend/src/Admin/Pages/Dashboard.jsx`
- [UI state](https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/Redux/Store.jsx): redux slices · Theme, notifications, search, and post filters · `Frontend/src/Redux/Store.jsx`
- [API helper](https://github.com/hammadgul-dev/blogify/blob/main/Frontend/src/helper/apiFetch.js): http client · Shared frontend HTTP abstraction for backend requests · `Frontend/src/helper/apiFetch.js`

### Backend

Express API, auth, content lifecycle, and moderation

- [Auth API](https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/userAuthController.js): auth controller · Login, signup, and Google auth handling · `Backend/controllers/userAuthController.js`
- [Blog API](https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/blogController.js): blog controller · CRUD and publish flow for blog content · `Backend/controllers/blogController.js`
- [Add-blog API](https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/addBlogController.js): generation controller · Admin create flow, uploads, and AI-assisted generation · `Backend/controllers/addBlogController.js`
- [Comments API](https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/commentsController.js): moderation controller · Comment creation, lookup, deletion, and approval · `Backend/controllers/commentsController.js`
- [Trash API](https://github.com/hammadgul-dev/blogify/blob/main/Backend/controllers/trashBinController.js): lifecycle controller · Soft delete, restore, and permanent removal · `Backend/controllers/trashBinController.js`
- [Auth routes](https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/userAuthRoutes.js): route group · REST endpoints for authentication and identity · `Backend/routes/userAuthRoutes.js`
- [Blog routes](https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/blogControllerRoutes.js): route group · REST endpoints for reading and managing posts · `Backend/routes/blogControllerRoutes.js`
- [Add-blog routes](https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/addBlogRoutes.js): route group · Admin creation, upload, and AI generation endpoints · `Backend/routes/addBlogRoutes.js`
- [Comment routes](https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/commentsRoutes.js): route group · Endpoints for blog comments and moderation actions · `Backend/routes/commentsRoutes.js`
- [Trash routes](https://github.com/hammadgul-dev/blogify/blob/main/Backend/routes/trashBinRoutes.js): route group · Endpoints for trashed content and recovery flows · `Backend/routes/trashBinRoutes.js`
- [Auth guard](https://github.com/hammadgul-dev/blogify/blob/main/Backend/middleware/authMiddleware.js): middleware · Protects privileged server routes · `Backend/middleware/authMiddleware.js`
- [Upload middleware](https://github.com/hammadgul-dev/blogify/blob/main/Backend/middleware/upload.js): middleware · Handles blog image upload processing · `Backend/middleware/upload.js`
- [Mongo config](https://github.com/hammadgul-dev/blogify/blob/main/Backend/config/db.js): db config · Connects the API to MongoDB · `Backend/config/db.js`
- [Passport config](https://github.com/hammadgul-dev/blogify/blob/main/Backend/config/passport.js): oauth config · Configures Google OAuth strategy · `Backend/config/passport.js`
- [Users](https://github.com/hammadgul-dev/blogify/blob/main/Backend/models/userAuthModel.js): mongoose model · Persisted user/auth records · `Backend/models/userAuthModel.js`
- [Blogs](https://github.com/hammadgul-dev/blogify/blob/main/Backend/models/addBlogModel.js): mongoose model · Persisted blog records used by the content lifecycle · `Backend/models/addBlogModel.js`

### External services

Datastore and third-party integrations

- **MongoDB**: datastore · Primary system of record
- **Cloudinary**: media storage · Stores uploaded blog images
- **Google OAuth**: identity provider · External sign-in provider
- **AI services**: generation services · External text and image generation backends

## Connections

- App boot → Routes: boots · Client entry initializes route handling
- App boot → UI state: provides · App-wide Redux state is wired at startup
- Routes → Public UI: public pages · Routes map to reader-facing screens
- Routes → Admin UI: admin area · Routes also mount the management workspace
- Public UI → API helper: reads data · Public pages load blogs and comments through the shared API helper
- Admin UI → API helper: mutates data · Admin screens perform content operations through the shared API helper
- UI state → Public UI: filters UI · Theme, search, and notification state affects the public experience
- API helper → Auth routes: calls · Frontend auth and identity requests go through the API layer
- API helper → Blog routes: calls · Frontend blog reads and updates go through the API layer
- API helper → Comment routes: calls · Comment operations go through the API layer
- API helper → Add-blog routes: calls · Admin create and generation actions go through the API layer
- API helper → Trash routes: calls · Trash and recovery actions go through the API layer
- Auth routes → Auth API: dispatches · Auth endpoints are handled by the auth controller
- Blog routes → Blog API: dispatches · Blog endpoints are handled by the blog controller
- Add-blog routes → Add-blog API: dispatches · Add-blog endpoints are handled by the creation controller
- Comment routes → Comments API: dispatches · Comment endpoints are handled by the comments controller
- Trash routes → Trash API: dispatches · Trash endpoints are handled by the lifecycle controller
- Auth API → Auth guard: protected by · Privileged auth-related actions are guarded where needed
- Add-blog API → Auth guard: protected by · Admin-only content creation is guarded server-side
- Blog API → Blogs: persists · Blog operations read and write blog records
- Comments API → Blogs: associates · Comment actions are tied to blog records
- Auth API → Users: persists · User identities are stored in the user model
- Blogs → Mongo config: uses · Blog data is stored through the configured database connection
- Users → Mongo config: uses · User data is stored through the configured database connection
- Mongo config → MongoDB: connects to · MongoDB is the primary datastore
- Upload middleware → Cloudinary: uploads to · Image handling sends media to Cloudinary
- Add-blog API → Upload middleware: uploads · Create flow uses upload middleware for images
- Passport config → Google OAuth: authenticates with · OAuth strategy delegates sign-in to Google
- Add-blog API → AI services: generates with · AI-assisted descriptions and thumbnails rely on external services