# xuanhau1902/personal-blog architecture

> Architecture diagram of the GitHub repository xuanhau1902/personal-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/xuanhau1902/personal-blog
- Repository: https://github.com/xuanhau1902/personal-blog

## Overview

Personal Blog is a React/Spring Boot blogging application. Readers browse and search published posts, open post details, and interact through likes and comments; signed-in users can create or edit posts, manage avatars, and upload images. JWT registration, login, refresh, and role/ownership checks support protected actions. The README documents drafts, tags, Markdown, galleries, and Cloudinary uploads. Sampled code confirms post and authentication service calls; wiring for several listed controllers and frontend page data flows is not shown, so those connections are left out.

Main entry points: [`frontend/src/api.ts`](https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/api.ts) (API client), [`frontend/src/App.tsx`](https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/App.tsx) (Route application), [`src/main/java/com/projects/PersonalBlog/service/PostService.java`](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/PostService.java) (Post service), [`src/main/java/com/projects/PersonalBlog/service/AuthService.java`](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/AuthService.java) (Auth service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React frontend"]
  node_app["Route application<br/>[App.tsx]"]
  node_api["API client<br/>[api.ts]"]
  node_authpages["Auth pages<br/>[LoginPage.tsx]"]
  node_home["Post feed<br/>[HomePage.tsx]"]
  node_detail["Post detail<br/>[PostDetailPage.tsx]"]
  node_editor["Post editor<br/>[PostEditorPage.tsx]"]
end

subgraph group_auth["Identity and access"]
  node_authcontroller["Auth endpoints"]
  node_authservice["Auth service<br/>[AuthService.java]"]
  node_security["JWT security"]
  node_jwt["JWT utilities<br/>[JwtUtil.java]"]
  node_userdetails["User lookup"]
end

subgraph group_content["Blog content"]
  node_postcontroller["Post endpoints"]
  node_postservice["Post service<br/>[PostService.java]"]
  node_posts[("Posts and tags")]
  node_tags[("Tag repository<br/>[TagRepository.java]")]
end

subgraph group_community["Reader interactions"]
  node_commentscontroller["Comment endpoints"]
  node_commentservice["Comment service"]
  node_comments[("Comment repository")]
end

subgraph group_media["Profiles and media"]
  node_userscontroller["User endpoints"]
  node_userservice["User service<br/>[UserService.java]"]
  node_filescontroller["Upload endpoint"]
  node_uploadservice["Image upload"]
end

node_reader(("Reader / author"))
node_cloudinary(("Cloudinary"))
node_mysql[("MySQL")]

node_reader -->|"uses"| node_app
node_app -->|"routes"| node_authpages
node_app -->|"routes"| node_home
node_app -->|"routes"| node_detail
node_app -->|"routes"| node_editor
node_api -->|"HTTP requests"| node_authcontroller
node_api -->|"HTTP requests"| node_postcontroller
node_api -->|"HTTP requests"| node_commentscontroller
node_api -->|"HTTP requests"| node_filescontroller
node_api -->|"HTTP requests"| node_userscontroller
node_authcontroller -->|"delegates"| node_authservice
node_authservice -->|"issues tokens"| node_jwt
node_authservice -->|"reads/writes users"| node_mysql
node_security -->|"loads identity"| node_userdetails
node_userdetails -->|"reads users"| node_mysql
node_postcontroller -->|"delegates"| node_postservice
node_postservice -->|"reads/writes posts"| node_posts
node_postservice -->|"resolves tags"| node_tags
node_postservice -->|"reads/writes likes"| node_mysql
node_commentservice -->|"reads/writes comments"| node_comments
node_commentservice -->|"reads posts/users"| node_mysql
node_userservice -->|"reads/writes users"| node_mysql
node_uploadservice -.->|"uploads images"| node_cloudinary

click node_app "https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/App.tsx"
click node_api "https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/api.ts"
click node_authpages "https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/pages/LoginPage.tsx"
click node_home "https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/pages/HomePage.tsx"
click node_detail "https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/pages/PostDetailPage.tsx"
click node_editor "https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/pages/PostEditorPage.tsx"
click node_authcontroller "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/AuthController.java"
click node_authservice "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/AuthService.java"
click node_security "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/security/SecurityConfig.java"
click node_jwt "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/security/JwtUtil.java"
click node_userdetails "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/security/CustomUserDetailsService.java"
click node_postcontroller "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/PostController.java"
click node_postservice "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/PostService.java"
click node_posts "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/repository/PostRepository.java"
click node_tags "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/repository/TagRepository.java"
click node_commentscontroller "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/CommentController.java"
click node_commentservice "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/CommentService.java"
click node_comments "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/repository/CommentRepository.java"
click node_userscontroller "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/UserController.java"
click node_userservice "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/UserService.java"
click node_filescontroller "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/FileController.java"
click node_uploadservice "https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/FileUploadService.java"

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_api,node_authpages,node_home,node_detail,node_editor toneBlue
class node_authcontroller,node_authservice,node_security,node_jwt,node_userdetails,node_mysql toneAmber
class node_postcontroller,node_postservice,node_posts,node_tags toneMint
class node_commentscontroller,node_commentservice,node_comments toneRose
class node_userscontroller,node_userservice,node_filescontroller,node_uploadservice,node_reader,node_cloudinary toneIndigo
```

## Components

### React frontend

- [Route application](https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [API client](https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/api.ts): `frontend/src/api.ts`
- [Auth pages](https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/pages/LoginPage.tsx): `frontend/src/pages/LoginPage.tsx`
- [Post feed](https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/pages/HomePage.tsx): `frontend/src/pages/HomePage.tsx`
- [Post detail](https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/pages/PostDetailPage.tsx): `frontend/src/pages/PostDetailPage.tsx`
- [Post editor](https://github.com/xuanhau1902/personal-blog/blob/main/frontend/src/pages/PostEditorPage.tsx): `frontend/src/pages/PostEditorPage.tsx`

### Identity and access

- [Auth endpoints](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/AuthController.java): `src/main/java/com/projects/PersonalBlog/controller/AuthController.java`
- [Auth service](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/AuthService.java): `src/main/java/com/projects/PersonalBlog/service/AuthService.java`
- [JWT security](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/security/SecurityConfig.java): `src/main/java/com/projects/PersonalBlog/security/SecurityConfig.java`
- [JWT utilities](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/security/JwtUtil.java): `src/main/java/com/projects/PersonalBlog/security/JwtUtil.java`
- [User lookup](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/security/CustomUserDetailsService.java): `src/main/java/com/projects/PersonalBlog/security/CustomUserDetailsService.java`

### Blog content

- [Post endpoints](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/PostController.java): `src/main/java/com/projects/PersonalBlog/controller/PostController.java`
- [Post service](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/PostService.java): `src/main/java/com/projects/PersonalBlog/service/PostService.java`
- [Posts and tags](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/repository/PostRepository.java): `src/main/java/com/projects/PersonalBlog/repository/PostRepository.java`
- [Tag repository](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/repository/TagRepository.java): `src/main/java/com/projects/PersonalBlog/repository/TagRepository.java`

### Reader interactions

- [Comment endpoints](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/CommentController.java): `src/main/java/com/projects/PersonalBlog/controller/CommentController.java`
- [Comment service](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/CommentService.java): `src/main/java/com/projects/PersonalBlog/service/CommentService.java`
- [Comment repository](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/repository/CommentRepository.java): `src/main/java/com/projects/PersonalBlog/repository/CommentRepository.java`

### Profiles and media

- [User endpoints](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/UserController.java): `src/main/java/com/projects/PersonalBlog/controller/UserController.java`
- [User service](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/UserService.java): `src/main/java/com/projects/PersonalBlog/service/UserService.java`
- [Upload endpoint](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/controller/FileController.java): `src/main/java/com/projects/PersonalBlog/controller/FileController.java`
- [Image upload](https://github.com/xuanhau1902/personal-blog/blob/main/src/main/java/com/projects/PersonalBlog/service/FileUploadService.java): `src/main/java/com/projects/PersonalBlog/service/FileUploadService.java`

### Other components

- **Reader / author**
- **Cloudinary**
- **MySQL**

## Connections

- Reader / author → Route application: uses
- Route application → Auth pages: routes
- Route application → Post feed: routes
- Route application → Post detail: routes
- Route application → Post editor: routes
- API client → Auth endpoints: HTTP requests
- API client → Post endpoints: HTTP requests
- API client → Comment endpoints: HTTP requests
- API client → Upload endpoint: HTTP requests
- API client → User endpoints: HTTP requests
- Auth endpoints → Auth service: delegates
- Auth service → JWT utilities: issues tokens
- Auth service → MySQL: reads/writes users
- JWT security → User lookup: loads identity
- User lookup → MySQL: reads users
- Post endpoints → Post service: delegates
- Post service → Posts and tags: reads/writes posts
- Post service → Tag repository: resolves tags
- Post service → MySQL: reads/writes likes
- Comment service → Comment repository: reads/writes comments
- Comment service → MySQL: reads posts/users
- User service → MySQL: reads/writes users
- Image upload → Cloudinary: uploads images