How frontend-park-mail-ru/2026_2_kvmm works
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: index.ts App bootstrap · SignupPage.ts Login and signup · api.ts HTTP API · ProfilePage.ts Own profile
Components 26
Application shell
- App bootstrap
src/index.ts - Route dispatch
packages/router/src/index.ts - HTTP API
src/modules/api.ts - Network status
src/modules/network.ts - Offline banner
src/components/OfflineBanner/OfflineBanner.ts
Identity and profiles
- Login and signup
src/pages/SignupPage/SignupPage.ts - Email verification
src/pages/EmailCodePage/EmailCodePage.ts - Auth layout
src/components/AuthLayout/AuthLayout.ts - Form input
src/components/Input/Input.ts - Signup draft
src/modules/signupDraft.ts - Input validation
src/modules/validation.ts - Phone masking
src/modules/phoneMask.ts - Session state
src/modules/user.ts
Social features
- Own profile
src/pages/ProfilePage/ProfilePage.ts - Profile editor
src/components/ProfileEditor/ProfileEditor.ts - Feed
src/pages/FeedPage/FeedPage.ts - Post list
src/components/PostList/PostList.ts - Friends and people
src/pages/FriendsPage/FriendsPage.ts - Other user profile
src/pages/UserPage/UserPage.ts - Avatar helpers
src/modules/avatar.ts
Messaging
- Chat list
src/pages/ChatsPage/ChatsPage.ts - Conversation
src/pages/ConversationPage/ConversationPage.ts - Chat helpers
src/modules/chats.ts - Chat socket client
src/modules/chatSocket.ts - Socket transport
packages/chat-socket/src/index.ts
Other components
- Visitor
Connections 36
- Visitor → App bootstrap: opens app
src/index.ts - App bootstrap → HTTP API: checks session
src/index.ts - App bootstrap → Session state: sets session
src/index.ts - App bootstrap → Route dispatch: starts routing
src/index.ts - App bootstrap → Login and signup: routes to
src/index.ts - App bootstrap → Email verification: routes to
src/index.ts - App bootstrap → Feed: routes to
src/index.ts - App bootstrap → Own profile: routes to
src/index.ts - App bootstrap → Friends and people: routes to
src/index.ts - App bootstrap → Chat list: routes to
src/index.ts - App bootstrap → Conversation: routes to
src/index.ts - App bootstrap → Other user profile: routes to
src/index.ts - App bootstrap → Network status: registers worker
src/index.ts - App bootstrap → Offline banner: renders banner
src/index.ts - App bootstrap → Chat socket client: starts on login
src/index.ts - App bootstrap → Session state: observes changes
src/index.ts - Login and signup → HTTP API: submits credentials
src/pages/SignupPage/SignupPage.ts - Login and signup → Signup draft: uses draft
src/pages/SignupPage/SignupPage.ts - Login and signup → Input validation: validates fields
src/pages/SignupPage/SignupPage.ts - Login and signup → Form input: renders fields
src/pages/SignupPage/SignupPage.ts - Login and signup → Auth layout: uses layout
src/pages/SignupPage/SignupPage.ts - Email verification → HTTP API: verifies code
src/pages/EmailCodePage/EmailCodePage.ts - Email verification → Signup draft: reads pending email
src/pages/EmailCodePage/EmailCodePage.ts - Input validation → Phone masking: masks phone
src/modules/validation.ts - Own profile → HTTP API: loads and updates
src/pages/ProfilePage/ProfilePage.ts - Own profile → Profile editor: opens editor
src/pages/ProfilePage/ProfilePage.ts - Own profile → Post list: renders posts
src/pages/ProfilePage/ProfilePage.ts - Own profile → Avatar helpers: loads avatar
src/pages/ProfilePage/ProfilePage.ts - Feed → Post list: renders posts
- Friends and people → HTTP API: loads people
- Other user profile → HTTP API: loads profile
src/pages/UserPage/UserPage.ts - Conversation → Chat helpers: loads chats
src/pages/ConversationPage/ConversationPage.ts - Conversation → Chat socket client: sends messages
src/pages/ConversationPage/ConversationPage.ts - Conversation → HTTP API: loads messages
src/pages/ConversationPage/ConversationPage.ts - Conversation → Avatar helpers: renders avatars
src/pages/ConversationPage/ConversationPage.ts - Chat socket client → Socket transport: delegates transport
src/modules/chatSocket.ts