# frontend-park-mail-ru/2026_2_kvmm architecture

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

- Interactive diagram: https://gitdiagram.com/frontend-park-mail-ru/2026_2_kvmm
- Repository: https://github.com/frontend-park-mail-ru/2026_2_kvmm

## Overview

KVMM Frontend is a browser-based social-network client. Its main workflow starts with session initialization and route selection, then takes users through login or staged signup and into authenticated feed, profile, people, and chat experiences backed by API requests; conversations also use a chat socket. The graph preserves the major feature areas visible in the tree and source index. Some page and integration wiring is unsampled, so uncertain connections are omitted rather than inferred.

Main entry points: [`src/index.ts`](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/index.ts) (App bootstrap), [`src/pages/SignupPage/SignupPage.ts`](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/SignupPage/SignupPage.ts) (Login and signup), [`src/modules/api.ts`](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/api.ts) (HTTP API), [`src/pages/ProfilePage/ProfilePage.ts`](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/ProfilePage/ProfilePage.ts) (Own profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_bootstrap["App bootstrap<br/>[index.ts]"]
  node_router["Route dispatch<br/>[index.ts]"]
  node_api["HTTP API<br/>[api.ts]"]
  node_network["Network status<br/>[network.ts]"]
  node_offline["Offline banner<br/>[OfflineBanner.ts]"]
end

subgraph group_identity["Identity and profiles"]
  node_authpages["Login and signup<br/>[SignupPage.ts]"]
  node_emailcode["Email verification<br/>[EmailCodePage.ts]"]
  node_authlayout["Auth layout<br/>[AuthLayout.ts]"]
  node_input["Form input<br/>[Input.ts]"]
  node_signupdraft["Signup draft<br/>[signupDraft.ts]"]
  node_validation["Input validation<br/>[validation.ts]"]
  node_phone["Phone masking<br/>[phoneMask.ts]"]
  node_session["Session state<br/>[user.ts]"]
end

subgraph group_social["Social features"]
  node_profile["Own profile<br/>[ProfilePage.ts]"]
  node_profileeditor["Profile editor<br/>[ProfileEditor.ts]"]
  node_feed["Feed<br/>[FeedPage.ts]"]
  node_posts["Post list<br/>[PostList.ts]"]
  node_friends["Friends and people<br/>[FriendsPage.ts]"]
  node_userpage["Other user profile<br/>[UserPage.ts]"]
  node_avatar["Avatar helpers<br/>[avatar.ts]"]
end

subgraph group_messaging["Messaging"]
  node_chats["Chat list<br/>[ChatsPage.ts]"]
  node_conversation["Conversation"]
  node_chatdata["Chat helpers<br/>[chats.ts]"]
  node_socket["Chat socket client<br/>[chatSocket.ts]"]
  node_socketpkg["Socket transport<br/>[index.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens app"| node_bootstrap
node_bootstrap -->|"checks session"| node_api
node_bootstrap -->|"sets session"| node_session
node_bootstrap -->|"starts routing"| node_router
node_bootstrap -->|"routes to"| node_authpages
node_bootstrap -->|"routes to"| node_emailcode
node_bootstrap -->|"routes to"| node_feed
node_bootstrap -->|"routes to"| node_profile
node_bootstrap -->|"routes to"| node_friends
node_bootstrap -->|"routes to"| node_chats
node_bootstrap -->|"routes to"| node_conversation
node_bootstrap -->|"routes to"| node_userpage
node_bootstrap -->|"registers worker"| node_network
node_bootstrap -->|"renders banner"| node_offline
node_bootstrap -->|"starts on login"| node_socket
node_bootstrap -->|"observes changes"| node_session
node_authpages -->|"submits credentials"| node_api
node_authpages -->|"uses draft"| node_signupdraft
node_authpages -->|"validates fields"| node_validation
node_authpages -->|"renders fields"| node_input
node_authpages -->|"uses layout"| node_authlayout
node_emailcode -->|"verifies code"| node_api
node_emailcode -->|"reads pending email"| node_signupdraft
node_validation -->|"masks phone"| node_phone
node_profile -->|"loads and updates"| node_api
node_profile -->|"opens editor"| node_profileeditor
node_profile -->|"renders posts"| node_posts
node_profile -->|"loads avatar"| node_avatar
node_feed -.->|"renders posts"| node_posts
node_friends -.->|"loads people"| node_api
node_userpage -->|"loads profile"| node_api
node_conversation -->|"loads chats"| node_chatdata
node_conversation -->|"sends messages"| node_socket
node_conversation -->|"loads messages"| node_api
node_conversation -->|"renders avatars"| node_avatar
node_socket -->|"delegates transport"| node_socketpkg

click node_bootstrap "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/index.ts"
click node_router "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/packages/router/src/index.ts"
click node_api "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/api.ts"
click node_network "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/network.ts"
click node_offline "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/OfflineBanner/OfflineBanner.ts"
click node_authpages "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/SignupPage/SignupPage.ts"
click node_emailcode "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/EmailCodePage/EmailCodePage.ts"
click node_authlayout "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/AuthLayout/AuthLayout.ts"
click node_input "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/Input/Input.ts"
click node_signupdraft "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/signupDraft.ts"
click node_validation "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/validation.ts"
click node_phone "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/phoneMask.ts"
click node_session "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/user.ts"
click node_profile "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/ProfilePage/ProfilePage.ts"
click node_profileeditor "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/ProfileEditor/ProfileEditor.ts"
click node_feed "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/FeedPage/FeedPage.ts"
click node_posts "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/PostList/PostList.ts"
click node_friends "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/FriendsPage/FriendsPage.ts"
click node_userpage "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/UserPage/UserPage.ts"
click node_avatar "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/avatar.ts"
click node_chats "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/ChatsPage/ChatsPage.ts"
click node_conversation "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/ConversationPage/ConversationPage.ts"
click node_chatdata "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/chats.ts"
click node_socket "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/chatSocket.ts"
click node_socketpkg "https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/packages/chat-socket/src/index.ts"

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_bootstrap,node_router,node_api,node_network,node_offline toneBlue
class node_authpages,node_emailcode,node_authlayout,node_input,node_signupdraft,node_validation,node_phone,node_session toneAmber
class node_profile,node_profileeditor,node_feed,node_posts,node_friends,node_userpage,node_avatar toneMint
class node_chats,node_conversation,node_chatdata,node_socket,node_socketpkg toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [App bootstrap](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/index.ts): `src/index.ts`
- [Route dispatch](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/packages/router/src/index.ts): `packages/router/src/index.ts`
- [HTTP API](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/api.ts): `src/modules/api.ts`
- [Network status](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/network.ts): `src/modules/network.ts`
- [Offline banner](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/OfflineBanner/OfflineBanner.ts): `src/components/OfflineBanner/OfflineBanner.ts`

### Identity and profiles

- [Login and signup](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/SignupPage/SignupPage.ts): `src/pages/SignupPage/SignupPage.ts`
- [Email verification](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/EmailCodePage/EmailCodePage.ts): `src/pages/EmailCodePage/EmailCodePage.ts`
- [Auth layout](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/AuthLayout/AuthLayout.ts): `src/components/AuthLayout/AuthLayout.ts`
- [Form input](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/Input/Input.ts): `src/components/Input/Input.ts`
- [Signup draft](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/signupDraft.ts): `src/modules/signupDraft.ts`
- [Input validation](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/validation.ts): `src/modules/validation.ts`
- [Phone masking](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/phoneMask.ts): `src/modules/phoneMask.ts`
- [Session state](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/user.ts): `src/modules/user.ts`

### Social features

- [Own profile](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/ProfilePage/ProfilePage.ts): `src/pages/ProfilePage/ProfilePage.ts`
- [Profile editor](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/ProfileEditor/ProfileEditor.ts): `src/components/ProfileEditor/ProfileEditor.ts`
- [Feed](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/FeedPage/FeedPage.ts): `src/pages/FeedPage/FeedPage.ts`
- [Post list](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/components/PostList/PostList.ts): `src/components/PostList/PostList.ts`
- [Friends and people](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/FriendsPage/FriendsPage.ts): `src/pages/FriendsPage/FriendsPage.ts`
- [Other user profile](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/UserPage/UserPage.ts): `src/pages/UserPage/UserPage.ts`
- [Avatar helpers](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/avatar.ts): `src/modules/avatar.ts`

### Messaging

- [Chat list](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/ChatsPage/ChatsPage.ts): `src/pages/ChatsPage/ChatsPage.ts`
- [Conversation](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/pages/ConversationPage/ConversationPage.ts): `src/pages/ConversationPage/ConversationPage.ts`
- [Chat helpers](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/chats.ts): `src/modules/chats.ts`
- [Chat socket client](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/src/modules/chatSocket.ts): `src/modules/chatSocket.ts`
- [Socket transport](https://github.com/frontend-park-mail-ru/2026_2_kvmm/blob/main/packages/chat-socket/src/index.ts): `packages/chat-socket/src/index.ts`

### Other components

- **Visitor**

## Connections

- Visitor → App bootstrap: opens app (evidence: `src/index.ts`)
- App bootstrap → HTTP API: checks session (evidence: `src/index.ts`)
- App bootstrap → Session state: sets session (evidence: `src/index.ts`)
- App bootstrap → Route dispatch: starts routing (evidence: `src/index.ts`)
- App bootstrap → Login and signup: routes to (evidence: `src/index.ts`)
- App bootstrap → Email verification: routes to (evidence: `src/index.ts`)
- App bootstrap → Feed: routes to (evidence: `src/index.ts`)
- App bootstrap → Own profile: routes to (evidence: `src/index.ts`)
- App bootstrap → Friends and people: routes to (evidence: `src/index.ts`)
- App bootstrap → Chat list: routes to (evidence: `src/index.ts`)
- App bootstrap → Conversation: routes to (evidence: `src/index.ts`)
- App bootstrap → Other user profile: routes to (evidence: `src/index.ts`)
- App bootstrap → Network status: registers worker (evidence: `src/index.ts`)
- App bootstrap → Offline banner: renders banner (evidence: `src/index.ts`)
- App bootstrap → Chat socket client: starts on login (evidence: `src/index.ts`)
- App bootstrap → Session state: observes changes (evidence: `src/index.ts`)
- Login and signup → HTTP API: submits credentials (evidence: `src/pages/SignupPage/SignupPage.ts`)
- Login and signup → Signup draft: uses draft (evidence: `src/pages/SignupPage/SignupPage.ts`)
- Login and signup → Input validation: validates fields (evidence: `src/pages/SignupPage/SignupPage.ts`)
- Login and signup → Form input: renders fields (evidence: `src/pages/SignupPage/SignupPage.ts`)
- Login and signup → Auth layout: uses layout (evidence: `src/pages/SignupPage/SignupPage.ts`)
- Email verification → HTTP API: verifies code (evidence: `src/pages/EmailCodePage/EmailCodePage.ts`)
- Email verification → Signup draft: reads pending email (evidence: `src/pages/EmailCodePage/EmailCodePage.ts`)
- Input validation → Phone masking: masks phone (evidence: `src/modules/validation.ts`)
- Own profile → HTTP API: loads and updates (evidence: `src/pages/ProfilePage/ProfilePage.ts`)
- Own profile → Profile editor: opens editor (evidence: `src/pages/ProfilePage/ProfilePage.ts`)
- Own profile → Post list: renders posts (evidence: `src/pages/ProfilePage/ProfilePage.ts`)
- Own profile → Avatar helpers: loads avatar (evidence: `src/pages/ProfilePage/ProfilePage.ts`)
- Feed → Post list: renders posts
- Friends and people → HTTP API: loads people
- Other user profile → HTTP API: loads profile (evidence: `src/pages/UserPage/UserPage.ts`)
- Conversation → Chat helpers: loads chats (evidence: `src/pages/ConversationPage/ConversationPage.ts`)
- Conversation → Chat socket client: sends messages (evidence: `src/pages/ConversationPage/ConversationPage.ts`)
- Conversation → HTTP API: loads messages (evidence: `src/pages/ConversationPage/ConversationPage.ts`)
- Conversation → Avatar helpers: renders avatars (evidence: `src/pages/ConversationPage/ConversationPage.ts`)
- Chat socket client → Socket transport: delegates transport (evidence: `src/modules/chatSocket.ts`)