# liyupi/yu-like architecture

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

- Interactive diagram: https://gitdiagram.com/liyupi/yu-like
- Repository: https://github.com/liyupi/yu-like

## Overview

This is a Vue frontend and Spring Boot backend for blog browsing, user login, and high-volume blog likes. The main workflow runs from a user action through the frontend API and backend controller to like processing: Redis records the immediate state, Pulsar carries asynchronous events, and a consumer synchronizes durable records and counts. Blog browsing and session-based login are separate user-facing flows; scheduled jobs provide synchronization and reconciliation. The README also documents monitoring and alerting, but their implementation is not present in the supplied tree. Some subsystem links are omitted where the sampled code does not establish wiring.

Main entry points: [`thumb-front/src/api/services.js`](https://github.com/liyupi/yu-like/blob/main/thumb-front/src/api/services.js) (Frontend API), [`src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceMQImpl.java`](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceMQImpl.java) (Async like service), [`src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceImpl.java`](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceImpl.java) (Local-cache service), [`src/main/java/com/yuyuan/thumb/controller/ThumbController.java`](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/controller/ThumbController.java) (Like API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web frontend"]
  node_webapp["Vue app<br/>[main.js]"]
  node_blogviews["Blog views<br/>[Home.vue]"]
  node_thumbbutton["Like button<br/>[ThumbButton.vue]"]
  node_frontendstores["Pinia stores<br/>[thumb.js]"]
  node_frontendapi["Frontend API<br/>[services.js]"]
end

subgraph group_api["API and domain"]
  node_blogcontroller["Blog API"]
  node_usercontroller["User API"]
  node_thumbcontroller["Like API"]
  node_blogservice["Blog service"]
  node_userservice["User service"]
end

subgraph group_likes["Like processing"]
  node_thumbmq["Async like service"]
  node_thumbsync["Local-cache service"]
  node_consumer["Like consumer<br/>[ThumbConsumer.java]"]
  node_cachemanager["Hot-key cache<br/>[CacheManager.java]"]
end

subgraph group_persistence["State and recovery"]
  node_redis[("Redis")]
  node_pulsar["Pulsar"]
  node_relationaldb[("Relational DB")]
  node_syncjobs["Sync jobs"]
  node_compensate["Reconcile jobs"]
end

subgraph group_operations["Observability"]
  node_metrics["Metrics and alerts"]
  node_monitoring["Prometheus / Grafana"]
end

node_user(("User"))

node_user -->|"uses"| node_webapp
node_webapp -->|"routes to"| node_blogviews
node_user -->|"acts on"| node_thumbbutton
node_thumbbutton -->|"updates"| node_frontendstores
node_blogviews -->|"requests blogs"| node_frontendapi
node_frontendstores -->|"requests likes"| node_frontendapi
node_frontendapi -->|"calls blog API"| node_blogcontroller
node_frontendapi -->|"calls user API"| node_usercontroller
node_frontendapi -->|"calls like API"| node_thumbcontroller
node_blogcontroller -->|"delegates"| node_blogservice
node_usercontroller -->|"loads user"| node_userservice
node_thumbcontroller -->|"delegates"| node_thumbmq
node_thumbmq -->|"gets session user"| node_userservice
node_thumbmq -->|"runs Lua scripts"| node_redis
node_thumbmq -->|"sends events"| node_pulsar
node_pulsar -->|"dispatches events"| node_consumer
node_consumer -->|"persists batches"| node_relationaldb
node_thumbsync -->|"reads cache"| node_cachemanager
node_thumbsync -->|"reads and writes"| node_redis
node_thumbsync -->|"updates records"| node_relationaldb
node_cachemanager -->|"reads hashes"| node_redis
node_syncjobs -->|"synchronizes data"| node_relationaldb
node_compensate -->|"reconciles state"| node_relationaldb
node_thumbcontroller -->|"increments counters"| node_metrics
node_monitoring -.->|"scrapes metrics"| node_metrics

click node_webapp "https://github.com/liyupi/yu-like/blob/main/thumb-front/src/main.js"
click node_blogviews "https://github.com/liyupi/yu-like/blob/main/thumb-front/src/views/Home.vue"
click node_thumbbutton "https://github.com/liyupi/yu-like/blob/main/thumb-front/src/components/ThumbButton.vue"
click node_frontendstores "https://github.com/liyupi/yu-like/blob/main/thumb-front/src/stores/thumb.js"
click node_frontendapi "https://github.com/liyupi/yu-like/blob/main/thumb-front/src/api/services.js"
click node_blogcontroller "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/controller/BlogController.java"
click node_usercontroller "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/controller/UserController.java"
click node_thumbcontroller "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/controller/ThumbController.java"
click node_blogservice "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/BlogServiceImpl.java"
click node_userservice "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/UserServiceImpl.java"
click node_thumbmq "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceMQImpl.java"
click node_thumbsync "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceImpl.java"
click node_consumer "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/listener/thumb/ThumbConsumer.java"
click node_cachemanager "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/manager/cache/CacheManager.java"
click node_syncjobs "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/job/SyncThumb2DBJob.java"
click node_compensate "https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/job/ThumbReconcileJob.java"
click node_metrics "https://github.com/liyupi/yu-like/tree/main/src/main/java/com/yuyuan/thumb/controller"

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_webapp,node_blogviews,node_thumbbutton,node_frontendstores,node_frontendapi,node_user toneBlue
class node_blogcontroller,node_usercontroller,node_thumbcontroller,node_blogservice,node_userservice toneAmber
class node_thumbmq,node_thumbsync,node_consumer,node_cachemanager toneMint
class node_redis,node_pulsar,node_relationaldb,node_syncjobs,node_compensate toneRose
class node_metrics,node_monitoring toneIndigo
```

## Components

### Web frontend

- [Vue app](https://github.com/liyupi/yu-like/blob/main/thumb-front/src/main.js): `thumb-front/src/main.js`
- [Blog views](https://github.com/liyupi/yu-like/blob/main/thumb-front/src/views/Home.vue): `thumb-front/src/views/Home.vue`
- [Like button](https://github.com/liyupi/yu-like/blob/main/thumb-front/src/components/ThumbButton.vue): `thumb-front/src/components/ThumbButton.vue`
- [Pinia stores](https://github.com/liyupi/yu-like/blob/main/thumb-front/src/stores/thumb.js): `thumb-front/src/stores/thumb.js`
- [Frontend API](https://github.com/liyupi/yu-like/blob/main/thumb-front/src/api/services.js): `thumb-front/src/api/services.js`

### API and domain

- [Blog API](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/controller/BlogController.java): `src/main/java/com/yuyuan/thumb/controller/BlogController.java`
- [User API](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/controller/UserController.java): `src/main/java/com/yuyuan/thumb/controller/UserController.java`
- [Like API](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/controller/ThumbController.java): `src/main/java/com/yuyuan/thumb/controller/ThumbController.java`
- [Blog service](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/BlogServiceImpl.java): `src/main/java/com/yuyuan/thumb/service/impl/BlogServiceImpl.java`
- [User service](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/UserServiceImpl.java): `src/main/java/com/yuyuan/thumb/service/impl/UserServiceImpl.java`

### Like processing

- [Async like service](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceMQImpl.java): `src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceMQImpl.java`
- [Local-cache service](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceImpl.java): `src/main/java/com/yuyuan/thumb/service/impl/ThumbServiceImpl.java`
- [Like consumer](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/listener/thumb/ThumbConsumer.java): `src/main/java/com/yuyuan/thumb/listener/thumb/ThumbConsumer.java`
- [Hot-key cache](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/manager/cache/CacheManager.java): `src/main/java/com/yuyuan/thumb/manager/cache/CacheManager.java`

### State and recovery

- **Redis**
- **Pulsar**
- **Relational DB**
- [Sync jobs](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/job/SyncThumb2DBJob.java): `src/main/java/com/yuyuan/thumb/job/SyncThumb2DBJob.java`
- [Reconcile jobs](https://github.com/liyupi/yu-like/blob/main/src/main/java/com/yuyuan/thumb/job/ThumbReconcileJob.java): `src/main/java/com/yuyuan/thumb/job/ThumbReconcileJob.java`

### Observability

- [Metrics and alerts](https://github.com/liyupi/yu-like/tree/main/src/main/java/com/yuyuan/thumb/controller): `src/main/java/com/yuyuan/thumb/controller`
- **Prometheus / Grafana**

### Other components

- **User**

## Connections

- User → Vue app: uses
- Vue app → Blog views: routes to
- User → Like button: acts on
- Like button → Pinia stores: updates
- Blog views → Frontend API: requests blogs
- Pinia stores → Frontend API: requests likes
- Frontend API → Blog API: calls blog API
- Frontend API → User API: calls user API
- Frontend API → Like API: calls like API
- Blog API → Blog service: delegates
- User API → User service: loads user
- Like API → Async like service: delegates
- Async like service → User service: gets session user
- Async like service → Redis: runs Lua scripts
- Async like service → Pulsar: sends events
- Pulsar → Like consumer: dispatches events
- Like consumer → Relational DB: persists batches
- Local-cache service → Hot-key cache: reads cache
- Local-cache service → Redis: reads and writes
- Local-cache service → Relational DB: updates records
- Hot-key cache → Redis: reads hashes
- Sync jobs → Relational DB: synchronizes data
- Reconcile jobs → Relational DB: reconciles state
- Like API → Metrics and alerts: increments counters
- Prometheus / Grafana → Metrics and alerts: scrapes metrics