# compilewithvansh/blogify-1 architecture

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

- Interactive diagram: https://gitdiagram.com/compilewithvansh/blogify-1
- Repository: https://github.com/compilewithvansh/blogify-1

## Overview

1. **Repository shape**
   - This is a two-app full-stack system: a **Next.js frontend** in `frontend/` and an **Express/MongoDB backend** in `backend/`.
   - The frontend is the presentation and client-side state layer; the backend owns authentication, authorization, persistence, and media uploads.

2. **Primary request flow**
   - Users interact with the Next.js app.
   - The frontend calls the backend API through `frontend/lib/api.js`.
   - The backend handles the request, talks to MongoDB via Mongoose, optionally sends images to Cloudinary, and returns JSON.
   - The frontend renders pages, forms, and lists from that API response.

3. **Frontend routing and page boundaries**
   - The app uses the **Next.js App Router** with route groups:
     - `frontend/app/(auth)` for login and registration.
     - `frontend/app/(main)` for the authenticated/content area.
   - Main screens include blog listing, post detail, create/edit post, dashboard, profile, and admin.
   - `frontend/app/layout.jsx` and `frontend/app/(main)/layout.jsx` define shared layout boundaries for the app and the main section.

4. **Frontend component layer**
   - Reusable UI is centralized in `frontend/components/`:
     - `Navbar.jsx` and `Footer.jsx` for site chrome.
     - `PostCard.jsx` for post previews.
     - `PostForm.jsx` for create/edit flows.
   - This keeps page files thin and makes post rendering and editing consistent across routes.

5. **Frontend state and integration utilities**
   - `frontend/lib/AuthContext.js` is the main auth/session state boundary for the client.
   - `frontend/lib/api.js` encapsulates backend HTTP access, so all API calls flow through one place.
   - `frontend/lib/avatar.js` generates DiceBear-based emoji avatars from usernames, which means user identity visuals are derived client-side rather than uploaded.
   - `frontend/lib/utils.js` likely contains shared formatting/helpers used by multiple screens.

6. **Backend entry point and infrastructure**
   - `backend/server.js` is the Express application bootstrap.
   - `backend/config/db.js` connects the app to MongoDB.
   - `backend/config/cloudinary.js` configures Cloudinary for image storage.
   - Environment variables in `backend/.env.example` control DB, JWT, Cloudinary, CORS origin, and the admin email.

7. **Backend API boundaries**
   - The backend is split into route modules:
     - `backend/routes/auth.routes.js`
     - `backend/routes/post.routes.js`
     - `backend/routes/admin.routes.js`
   - Each route module delegates to a controller, keeping URL wiring separate from business logic.
   - The exposed API is organized around auth, posts, and admin operations.

8. **Auth and access control**
   - `backend/controllers/auth.controller.js` implements register/login/me behavior.
   - `backend/middleware/auth.middleware.js` protects routes and enforces JWT-based authorization.
   - The system supports role-based access with at least two roles: `user` and `admin`.
   - The README indicates the first user matching `ADMIN_EMAIL` is promoted to admin, which is a bootstrap rule embedded in registration logic.

9. **Content and media subsystem**
   - `backend/controllers/post.controller.js` manages blog post CRUD.
   - Posts support slug-based public access, plus create/update/delete via authenticated routes.
   - Image upload is a two-step backend responsibility: the request comes in with Multer, then the image is sent to Cloudinary, and the post stores the resulting image reference/URL.
   - `backend/models/Post.js` is the persistence boundary for post content and metadata.

10. **Admin subsystem**
   - `backend/controllers/admin.controller.js` and `backend/routes/admin.routes.js` provide elevated operations over all posts and users.
   - Admins can view all posts, view all users, and delete any post.
   - This is a separate permission boundary from the regular user-owned post workflow.

11. **Data model boundary**
   - `backend/models/User.js` and `backend/models/Post.js` are the two persistent domain models.
   - User data supports authentication, role assignment, and avatar identity.
   - Post data supports author ownership, slug-based lookup, category/search filtering, and image metadata.

12. **Cross-cutting concerns**
   - `backend/middleware/error.middleware.js` centralizes API error handling.
   - The frontend uses Tailwind CSS for layout/styling and Sonner for toasts, so UI feedback is handled client-side while failures originate from API responses.
   - CORS is expected to be configured around `FRONTEND_URL`, which forms the deployment boundary between the two apps.

13. **How to draw the architecture**
   - Show two top-level boxes: **Next.js Frontend** and **Express Backend**.
   - From frontend to backend, draw API calls for auth, posts, and admin.
   - From backend to MongoDB, draw persistence for users and posts.
   - From backend to Cloudinary, draw image upload flow.
   - Put JWT/auth middleware and admin authorization as a gate in front of protected backend routes.
   - Treat DiceBear avatar generation as a frontend-side external service used during profile rendering, not as part of the backend data store.

Main entry points: [`frontend/app/(main)`](https://github.com/compilewithvansh/blogify-1/tree/main/frontend/app/(main)) (Main pages), [`backend/routes`](https://github.com/compilewithvansh/blogify-1/tree/main/backend/routes) (API routes), [`backend/controllers/post.controller.js`](https://github.com/compilewithvansh/blogify-1/blob/main/backend/controllers/post.controller.js) (Post controller), [`backend/controllers/auth.controller.js`](https://github.com/compilewithvansh/blogify-1/blob/main/backend/controllers/auth.controller.js) (Auth controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Next.js Frontend"]
  node_frontend_app["App Router<br/>next app"]
  node_frontend_auth_routes["Auth pages<br/>route group"]
  node_frontend_main_routes["Main pages<br/>route group"]
  node_frontend_ui["UI components<br/>shared components"]
  node_frontend_auth_ctx(("Auth context<br/>client state<br/>[AuthContext.js]"))
  node_frontend_api["API client<br/>http client<br/>[api.js]"]
  node_frontend_avatar(("Avatar helper<br/>client util<br/>[avatar.js]"))
  node_frontend_layouts["Layouts<br/>layout boundary<br/>[layout.jsx]"]
end

subgraph group_backend["Express Backend"]
  node_backend_server["Server bootstrap<br/>express app<br/>[server.js]"]
  node_backend_routes["API routes<br/>route modules"]
  node_backend_auth_ctrl["Auth controller<br/>[auth.controller.js]"]
  node_backend_post_ctrl["Post controller<br/>[post.controller.js]"]
  node_backend_admin_ctrl["Admin controller"]
  node_backend_auth_mw(("Auth guard<br/>middleware<br/>[auth.middleware.js]"))
  node_backend_error_mw(("Error handler<br/>middleware"))
  node_backend_db[("MongoDB<br/>database<br/>[db.js]")]
  node_backend_cloudinary[("Cloudinary<br/>media storage<br/>[cloudinary.js]")]
  node_backend_user_model["User model<br/>mongoose model<br/>[User.js]"]
  node_backend_post_model["Post model<br/>mongoose model<br/>[Post.js]"]
end

node_frontend_layouts -->|"wraps"| node_frontend_app
node_frontend_app -->|"hosts"| node_frontend_auth_routes
node_frontend_app -->|"hosts"| node_frontend_main_routes
node_frontend_main_routes -->|"uses"| node_frontend_ui
node_frontend_main_routes -->|"fetches"| node_frontend_api
node_frontend_auth_routes -->|"auth calls"| node_frontend_api
node_frontend_auth_ctx -->|"attaches auth"| node_frontend_api
node_frontend_main_routes -->|"reads session"| node_frontend_auth_ctx
node_frontend_main_routes -->|"renders avatars"| node_frontend_avatar
node_frontend_api -->|"HTTP API"| node_backend_server
node_backend_server -->|"mounts"| node_backend_routes
node_backend_routes -->|"protects"| node_backend_auth_mw
node_backend_auth_mw -->|"gates"| node_backend_auth_ctrl
node_backend_routes -->|"auth endpoints"| node_backend_auth_ctrl
node_backend_routes -->|"post endpoints"| node_backend_post_ctrl
node_backend_routes -->|"admin endpoints"| node_backend_admin_ctrl
node_backend_post_ctrl -->|"persists"| node_backend_post_model
node_backend_auth_ctrl -->|"persists"| node_backend_user_model
node_backend_admin_ctrl -->|"reads users"| node_backend_user_model
node_backend_admin_ctrl -->|"reads posts"| node_backend_post_model
node_backend_post_ctrl -->|"uploads images"| node_backend_cloudinary
node_backend_auth_ctrl -->|"stores users"| node_backend_db
node_backend_post_ctrl -->|"stores posts"| node_backend_db
node_backend_error_mw -->|"handles failures"| node_backend_server

click node_frontend_app "https://github.com/compilewithvansh/blogify-1/tree/main/frontend/app"
click node_frontend_auth_routes "https://github.com/compilewithvansh/blogify-1/tree/main/frontend/app/(auth)"
click node_frontend_main_routes "https://github.com/compilewithvansh/blogify-1/tree/main/frontend/app/(main)"
click node_frontend_ui "https://github.com/compilewithvansh/blogify-1/tree/main/frontend/components"
click node_frontend_auth_ctx "https://github.com/compilewithvansh/blogify-1/blob/main/frontend/lib/AuthContext.js"
click node_frontend_api "https://github.com/compilewithvansh/blogify-1/blob/main/frontend/lib/api.js"
click node_frontend_avatar "https://github.com/compilewithvansh/blogify-1/blob/main/frontend/lib/avatar.js"
click node_frontend_layouts "https://github.com/compilewithvansh/blogify-1/blob/main/frontend/app/layout.jsx"
click node_backend_server "https://github.com/compilewithvansh/blogify-1/blob/main/backend/server.js"
click node_backend_routes "https://github.com/compilewithvansh/blogify-1/tree/main/backend/routes"
click node_backend_auth_ctrl "https://github.com/compilewithvansh/blogify-1/blob/main/backend/controllers/auth.controller.js"
click node_backend_post_ctrl "https://github.com/compilewithvansh/blogify-1/blob/main/backend/controllers/post.controller.js"
click node_backend_admin_ctrl "https://github.com/compilewithvansh/blogify-1/blob/main/backend/controllers/admin.controller.js"
click node_backend_auth_mw "https://github.com/compilewithvansh/blogify-1/blob/main/backend/middleware/auth.middleware.js"
click node_backend_error_mw "https://github.com/compilewithvansh/blogify-1/blob/main/backend/middleware/error.middleware.js"
click node_backend_db "https://github.com/compilewithvansh/blogify-1/blob/main/backend/config/db.js"
click node_backend_cloudinary "https://github.com/compilewithvansh/blogify-1/blob/main/backend/config/cloudinary.js"
click node_backend_user_model "https://github.com/compilewithvansh/blogify-1/blob/main/backend/models/User.js"
click node_backend_post_model "https://github.com/compilewithvansh/blogify-1/blob/main/backend/models/Post.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_frontend_app,node_frontend_auth_routes,node_frontend_main_routes,node_frontend_ui,node_frontend_auth_ctx,node_frontend_api,node_frontend_avatar,node_frontend_layouts toneBlue
class node_backend_server,node_backend_routes,node_backend_auth_ctrl,node_backend_post_ctrl,node_backend_admin_ctrl,node_backend_auth_mw,node_backend_error_mw,node_backend_db,node_backend_cloudinary,node_backend_user_model,node_backend_post_model toneAmber
```

## Components

### Next.js Frontend

App Router UI, client state, and API integration

- [App Router](https://github.com/compilewithvansh/blogify-1/tree/main/frontend/app): next app · Top-level routing and shared app layouts · `frontend/app`
- [Auth pages](https://github.com/compilewithvansh/blogify-1/tree/main/frontend/app/(auth)): route group · Login and registration screens · `frontend/app/(auth)`
- [Main pages](https://github.com/compilewithvansh/blogify-1/tree/main/frontend/app/(main)): route group · Authenticated content area and primary screens · `frontend/app/(main)`
- [UI components](https://github.com/compilewithvansh/blogify-1/tree/main/frontend/components): shared components · Reusable chrome, cards, and forms · `frontend/components`
- [Auth context](https://github.com/compilewithvansh/blogify-1/blob/main/frontend/lib/AuthContext.js): client state · Session and authentication state boundary · `frontend/lib/AuthContext.js`
- [API client](https://github.com/compilewithvansh/blogify-1/blob/main/frontend/lib/api.js): http client · Single integration layer for backend requests · `frontend/lib/api.js`
- [Avatar helper](https://github.com/compilewithvansh/blogify-1/blob/main/frontend/lib/avatar.js): client util · Derives DiceBear-style avatars from usernames · `frontend/lib/avatar.js`
- [Layouts](https://github.com/compilewithvansh/blogify-1/blob/main/frontend/app/layout.jsx): layout boundary · Shared shell for the app and main section · `frontend/app/layout.jsx`

### Express Backend

REST API, auth, persistence, and uploads

- [Server bootstrap](https://github.com/compilewithvansh/blogify-1/blob/main/backend/server.js): express app · Express entry point and middleware wiring · `backend/server.js`
- [API routes](https://github.com/compilewithvansh/blogify-1/tree/main/backend/routes): route modules · Auth, post, and admin route boundaries · `backend/routes`
- [Auth controller](https://github.com/compilewithvansh/blogify-1/blob/main/backend/controllers/auth.controller.js): controller · Register, login, and current-user logic · `backend/controllers/auth.controller.js`
- [Post controller](https://github.com/compilewithvansh/blogify-1/blob/main/backend/controllers/post.controller.js): controller · Post CRUD, slug lookup, and media handling · `backend/controllers/post.controller.js`
- [Admin controller](https://github.com/compilewithvansh/blogify-1/blob/main/backend/controllers/admin.controller.js): controller · Elevated admin operations over users and posts · `backend/controllers/admin.controller.js`
- [Auth guard](https://github.com/compilewithvansh/blogify-1/blob/main/backend/middleware/auth.middleware.js): middleware · JWT protection and role-based access control · `backend/middleware/auth.middleware.js`
- [Error handler](https://github.com/compilewithvansh/blogify-1/blob/main/backend/middleware/error.middleware.js): middleware · Central API error normalization · `backend/middleware/error.middleware.js`
- [MongoDB](https://github.com/compilewithvansh/blogify-1/blob/main/backend/config/db.js): database · Persistent store for users and posts · `backend/config/db.js`
- [Cloudinary](https://github.com/compilewithvansh/blogify-1/blob/main/backend/config/cloudinary.js): media storage · External image upload destination · `backend/config/cloudinary.js`
- [User model](https://github.com/compilewithvansh/blogify-1/blob/main/backend/models/User.js): mongoose model · Authentication, roles, and profile identity · `backend/models/User.js`
- [Post model](https://github.com/compilewithvansh/blogify-1/blob/main/backend/models/Post.js): mongoose model · Post content, ownership, slugs, and image metadata · `backend/models/Post.js`

## Connections

- Layouts → App Router: wraps · Shared shell defines app-wide presentation boundaries
- App Router → Auth pages: hosts · App Router serves auth screens
- App Router → Main pages: hosts · App Router serves authenticated content screens
- Main pages → UI components: uses · Pages render shared navigation, cards, and forms
- Main pages → API client: fetches · Pages load and mutate data through the API client
- Auth pages → API client: auth calls · Login and registration submit through the API client
- Auth context → API client: attaches auth · Client state feeds authenticated request handling
- Main pages → Auth context: reads session · Protected views depend on client auth state
- Main pages → Avatar helper: renders avatars · Profile and user displays derive avatars client-side
- API client → Server bootstrap: HTTP API · Frontend talks to backend endpoints through a single client boundary
- Server bootstrap → API routes: mounts · Express bootstraps route modules
- API routes → Auth guard: protects · Protected routes pass through JWT and role checks
- Auth guard → Auth controller: gates · Auth-aware requests reach controller logic only after verification
- API routes → Auth controller: auth endpoints · Register, login, and me behavior
- API routes → Post controller: post endpoints · Create, read, update, delete, and public slug access
- API routes → Admin controller: admin endpoints · Elevated management routes for posts and users
- Post controller → Post model: persists · Post CRUD reads and writes the post model
- Auth controller → User model: persists · User registration and login use the user model
- Admin controller → User model: reads users · Admin operations enumerate users
- Admin controller → Post model: reads posts · Admin operations enumerate and delete posts
- Post controller → Cloudinary: uploads images · Multer-backed uploads are sent to Cloudinary
- Auth controller → MongoDB: stores users · User records are persisted in MongoDB
- Post controller → MongoDB: stores posts · Post records are persisted in MongoDB
- Error handler → Server bootstrap: handles failures · Centralized error middleware terminates failed requests