# thanthanwinn/mysocial architecture

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

- Interactive diagram: https://gitdiagram.com/thanthanwinn/mysocial
- Repository: https://github.com/thanthanwinn/mysocial

## Overview

This repository contains a Spring-backed social application and its React client. Users register or log in, then browse and manage posts, profiles, relationships, messages, notifications, and to-do lists. The client routes authenticated users to these features and calls the backend through HTTP services; chat also has a WebSocket-related backend subsystem in the tree. The excerpts show client routing and several client-to-service calls, but not backend controller implementations, so backend links are limited to the API families visible in client URLs.

Main entry points: [`spring-react-project/src/App.tsx`](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/App.tsx) (App routes), [`spring-project/src/main/java/org/example/springproject/controller`](https://github.com/thanthanwinn/mysocial/tree/master/spring-project/src/main/java/org/example/springproject/controller) (Spring HTTP API), [`spring-react-project/src/service/user.service.ts`](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/user.service.ts) (User and post API), [`spring-react-project/src/components/ProfileComponent.tsx`](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ProfileComponent.tsx) (Profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React client"]
  node_app["App routes<br/>[App.tsx]"]
  node_authui["Login and register<br/>[LoginComponent.tsx]"]
  node_header["Header"]
  node_weather["Weather widget"]
end

subgraph group_social["Social features"]
  node_home["Home feed<br/>[HomeComponent.tsx]"]
  node_posts["Post list"]
  node_postcard["Post card"]
  node_postmgmt["Post management"]
  node_profile["Profile"]
  node_editprofile["Profile editor"]
  node_friends["Friends"]
  node_messages["Inbox"]
  node_chat["Conversation"]
  node_notifications["Notifications"]
  node_todos["To-do list"]
end

subgraph group_backend["Spring backend"]
  node_api["Spring HTTP API"]
  node_websocket["WebSocket chat"]
  node_security["Authentication security"]
end

subgraph group_shared["Client foundations"]
  node_authsvc["Auth service<br/>[auth.service.ts]"]
  node_usersvc["User and post API<br/>[user.service.ts]"]
  node_relationsvc["Relations API"]
  node_messagesvc["Message API<br/>[message.service.ts]"]
  node_todosvc["To-do API<br/>[todo.service.ts]"]
  node_context["User context"]
  node_theme["Theme context<br/>[ThemeContext.tsx]"]
  node_dtos["DTO types<br/>[dto.ts]"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_authui
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_friends
node_app -->|"routes to"| node_chat
node_app -->|"routes to"| node_messages
node_app -->|"routes to"| node_notifications
node_app -->|"routes to"| node_editprofile
node_app -->|"renders"| node_header
node_app -->|"provides"| node_context
node_app -->|"provides"| node_theme
node_authui -->|"calls"| node_authsvc
node_home -->|"renders"| node_posts
node_posts -->|"renders"| node_postcard
node_posts -->|"uses"| node_postmgmt
node_postmgmt -->|"calls"| node_usersvc
node_postcard -->|"fetches comments"| node_usersvc
node_profile -->|"loads profile"| node_usersvc
node_profile -->|"loads friends"| node_relationsvc
node_profile -->|"renders"| node_postcard
node_editprofile -->|"updates profile"| node_usersvc
node_friends -->|"calls"| node_relationsvc
node_messages -->|"calls"| node_messagesvc
node_chat -->|"calls"| node_messagesvc
node_notifications -->|"fetches"| node_usersvc
node_todos -->|"calls"| node_todosvc
node_app -.->|"renders via layout"| node_weather
node_authsvc -->|"HTTP auth requests"| node_api
node_usersvc -->|"HTTP user and post requests"| node_api
node_relationsvc -->|"HTTP relation requests"| node_api
node_messagesvc -->|"HTTP message requests"| node_api
node_todosvc -.->|"HTTP requests"| node_api
node_chat -.->|"chat transport"| node_websocket
node_api -.->|"secured by"| node_security
node_context -->|"types user state"| node_dtos
node_messagesvc -->|"uses types"| node_dtos
node_authsvc -->|"uses types"| node_dtos

click node_app "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/App.tsx"
click node_authui "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/LoginComponent.tsx"
click node_header "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/HeaderComponent.tsx"
click node_home "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/HomeComponent.tsx"
click node_posts "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/PostListComponent.tsx"
click node_postcard "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/PostCardComponent.tsx"
click node_postmgmt "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/usePostManagement.ts"
click node_profile "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ProfileComponent.tsx"
click node_editprofile "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/EditProfileComponent.tsx"
click node_friends "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/FriendsComponent.tsx"
click node_messages "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/MessageComponent.tsx"
click node_chat "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ChatConversation.tsx"
click node_notifications "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/NotificationComponent.tsx"
click node_todos "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/TodoListComponent.tsx"
click node_weather "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/WeatherComponent.tsx"
click node_authsvc "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/auth.service.ts"
click node_usersvc "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/user.service.ts"
click node_relationsvc "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/relations.service.ts"
click node_messagesvc "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/message.service.ts"
click node_todosvc "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/todo.service.ts"
click node_context "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ContextProvider.tsx"
click node_theme "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ThemeContext.tsx"
click node_dtos "https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/ds/dto.ts"
click node_api "https://github.com/thanthanwinn/mysocial/tree/master/spring-project/src/main/java/org/example/springproject/controller"
click node_websocket "https://github.com/thanthanwinn/mysocial/blob/master/spring-project/src/main/java/org/example/springproject/config/WebSocketConfig.java"
click node_security "https://github.com/thanthanwinn/mysocial/blob/master/spring-project/src/main/java/org/example/springproject/config/SecurityConfig.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_authui,node_header,node_weather,node_user toneBlue
class node_home,node_posts,node_postcard,node_postmgmt,node_profile,node_editprofile,node_friends,node_messages,node_chat,node_notifications,node_todos toneAmber
class node_api,node_websocket,node_security toneMint
class node_authsvc,node_usersvc,node_relationsvc,node_messagesvc,node_todosvc,node_context,node_theme,node_dtos toneRose
```

## Components

### React client

- [App routes](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/App.tsx): `spring-react-project/src/App.tsx`
- [Login and register](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/LoginComponent.tsx): `spring-react-project/src/components/LoginComponent.tsx`
- [Header](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/HeaderComponent.tsx): `spring-react-project/src/components/HeaderComponent.tsx`
- [Weather widget](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/WeatherComponent.tsx): `spring-react-project/src/components/WeatherComponent.tsx`

### Social features

- [Home feed](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/HomeComponent.tsx): `spring-react-project/src/components/HomeComponent.tsx`
- [Post list](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/PostListComponent.tsx): `spring-react-project/src/components/PostListComponent.tsx`
- [Post card](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/PostCardComponent.tsx): `spring-react-project/src/components/PostCardComponent.tsx`
- [Post management](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/usePostManagement.ts): `spring-react-project/src/service/usePostManagement.ts`
- [Profile](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ProfileComponent.tsx): `spring-react-project/src/components/ProfileComponent.tsx`
- [Profile editor](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/EditProfileComponent.tsx): `spring-react-project/src/components/EditProfileComponent.tsx`
- [Friends](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/FriendsComponent.tsx): `spring-react-project/src/components/FriendsComponent.tsx`
- [Inbox](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/MessageComponent.tsx): `spring-react-project/src/components/MessageComponent.tsx`
- [Conversation](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ChatConversation.tsx): `spring-react-project/src/components/ChatConversation.tsx`
- [Notifications](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/NotificationComponent.tsx): `spring-react-project/src/components/NotificationComponent.tsx`
- [To-do list](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/TodoListComponent.tsx): `spring-react-project/src/components/TodoListComponent.tsx`

### Spring backend

- [Spring HTTP API](https://github.com/thanthanwinn/mysocial/tree/master/spring-project/src/main/java/org/example/springproject/controller): `spring-project/src/main/java/org/example/springproject/controller`
- [WebSocket chat](https://github.com/thanthanwinn/mysocial/blob/master/spring-project/src/main/java/org/example/springproject/config/WebSocketConfig.java): `spring-project/src/main/java/org/example/springproject/config/WebSocketConfig.java`
- [Authentication security](https://github.com/thanthanwinn/mysocial/blob/master/spring-project/src/main/java/org/example/springproject/config/SecurityConfig.java): `spring-project/src/main/java/org/example/springproject/config/SecurityConfig.java`

### Client foundations

- [Auth service](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/auth.service.ts): `spring-react-project/src/service/auth.service.ts`
- [User and post API](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/user.service.ts): `spring-react-project/src/service/user.service.ts`
- [Relations API](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/relations.service.ts): `spring-react-project/src/service/relations.service.ts`
- [Message API](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/message.service.ts): `spring-react-project/src/service/message.service.ts`
- [To-do API](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/service/todo.service.ts): `spring-react-project/src/service/todo.service.ts`
- [User context](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ContextProvider.tsx): `spring-react-project/src/components/ContextProvider.tsx`
- [Theme context](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/components/ThemeContext.tsx): `spring-react-project/src/components/ThemeContext.tsx`
- [DTO types](https://github.com/thanthanwinn/mysocial/blob/master/spring-react-project/src/ds/dto.ts): `spring-react-project/src/ds/dto.ts`

### Other components

- **User**

## Connections

- User → App routes: uses
- App routes → Login and register: routes to (evidence: `spring-react-project/src/App.tsx`)
- App routes → Home feed: routes to (evidence: `spring-react-project/src/App.tsx`)
- App routes → Profile: routes to (evidence: `spring-react-project/src/App.tsx`)
- App routes → Friends: routes to (evidence: `spring-react-project/src/App.tsx`)
- App routes → Conversation: routes to (evidence: `spring-react-project/src/App.tsx`)
- App routes → Inbox: routes to (evidence: `spring-react-project/src/App.tsx`)
- App routes → Notifications: routes to (evidence: `spring-react-project/src/App.tsx`)
- App routes → Profile editor: routes to (evidence: `spring-react-project/src/App.tsx`)
- App routes → Header: renders (evidence: `spring-react-project/src/App.tsx`)
- App routes → User context: provides (evidence: `spring-react-project/src/App.tsx`)
- App routes → Theme context: provides (evidence: `spring-react-project/src/App.tsx`)
- Login and register → Auth service: calls (evidence: `spring-react-project/src/App.tsx`)
- Home feed → Post list: renders (evidence: `spring-react-project/src/components/HomeComponent.tsx`)
- Post list → Post card: renders (evidence: `spring-react-project/src/components/PostListComponent.tsx`)
- Post list → Post management: uses (evidence: `spring-react-project/src/components/PostListComponent.tsx`)
- Post management → User and post API: calls (evidence: `spring-react-project/src/service/usePostManagement.ts`)
- Post card → User and post API: fetches comments (evidence: `spring-react-project/src/components/PostCardComponent.tsx`)
- Profile → User and post API: loads profile (evidence: `spring-react-project/src/components/ProfileComponent.tsx`)
- Profile → Relations API: loads friends (evidence: `spring-react-project/src/components/ProfileComponent.tsx`)
- Profile → Post card: renders (evidence: `spring-react-project/src/components/ProfileComponent.tsx`)
- Profile editor → User and post API: updates profile (evidence: `spring-react-project/src/components/EditProfileComponent.tsx`)
- Friends → Relations API: calls (evidence: `spring-react-project/src/components/FriendsComponent.tsx`)
- Inbox → Message API: calls (evidence: `spring-react-project/src/components/MessageComponent.tsx`)
- Conversation → Message API: calls (evidence: `spring-react-project/src/components/ChatConversation.tsx`)
- Notifications → User and post API: fetches (evidence: `spring-react-project/src/components/NotificationComponent.tsx`)
- To-do list → To-do API: calls (evidence: `spring-react-project/src/components/TodoListComponent.tsx`)
- App routes → Weather widget: renders via layout
- Auth service → Spring HTTP API: HTTP auth requests (evidence: `spring-react-project/src/service/auth.service.ts`)
- User and post API → Spring HTTP API: HTTP user and post requests (evidence: `spring-react-project/src/service/user.service.ts`)
- Relations API → Spring HTTP API: HTTP relation requests (evidence: `spring-react-project/src/service/relations.service.ts`)
- Message API → Spring HTTP API: HTTP message requests (evidence: `spring-react-project/src/service/message.service.ts`)
- To-do API → Spring HTTP API: HTTP requests
- Conversation → WebSocket chat: chat transport
- Spring HTTP API → Authentication security: secured by
- User context → DTO types: types user state (evidence: `spring-react-project/src/components/ContextProvider.tsx`)
- Message API → DTO types: uses types (evidence: `spring-react-project/src/service/message.service.ts`)
- Auth service → DTO types: uses types (evidence: `spring-react-project/src/service/auth.service.ts`)