# iyiu9akhan/livechat architecture

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

- Interactive diagram: https://gitdiagram.com/iyiu9akhan/livechat
- Repository: https://github.com/iyiu9akhan/livechat

## Overview

LiveChat is a React chat and social app with registration, login, password reset, a home area, messages, and settings. The visible social workflow is user discovery and friend requests, followed by accepting a request into the friends list and opening a message box; users can also create groups and manage blocked users. Registration explicitly uses Firebase Authentication and writes profile data to Realtime Database. Several page and component implementations were not sampled, so their internal wiring and message persistence are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/iyiu9akhan/livechat/blob/main/src/App.jsx) (Route application), [`src/pages/Home.jsx`](https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Home.jsx) (Home page), [`src/pages/Registration.jsx`](https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Registration.jsx) (Registration page), [`src/components/Layout/SideBar.jsx`](https://github.com/iyiu9akhan/livechat/blob/main/src/components/Layout/SideBar.jsx) (Navigation and logout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_app["Route application<br/>[App.jsx]"]
  node_home["Home page<br/>[Home.jsx]"]
  node_sidebar["Navigation and logout<br/>[SideBar.jsx]"]
end

subgraph group_account["Accounts"]
  node_login["Login page<br/>[Login.jsx]"]
  node_registration["Registration page<br/>[Registration.jsx]"]
  node_reset["Password reset<br/>[ResetPassword.jsx]"]
  node_settings["Settings page<br/>[Settings.jsx]"]
  node_firebaseconfig["Firebase configuration<br/>[firebase.config.js]"]
end

subgraph group_social["Social network"]
  node_userlist["User discovery<br/>[UserList.jsx]"]
  node_requests["Friend requests<br/>[FriendRqst.jsx]"]
  node_friends["Friends list<br/>[Friends.jsx]"]
  node_blocked["Blocked users<br/>[BlockedUser.jsx]"]
  node_grouplist["Group directory<br/>[GroupList.jsx]"]
  node_groups["Group view<br/>[Groups.jsx]"]
end

subgraph group_messaging["Messaging and state"]
  node_messages["Messages page<br/>[Messages.jsx]"]
  node_activebox["Active message state<br/>[activeMsgBox.js]"]
  node_userslice["User session state<br/>[userSlice.js]"]
  node_store["Redux store<br/>[store.js]"]
end

node_visitor(("Visitor"))
node_auth{{"Firebase Authentication"}}
node_realtimedb[("Firebase Realtime DB")]

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_registration
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_reset
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_messages
node_app -->|"routes to"| node_settings
node_registration -->|"creates account"| node_auth
node_registration -->|"verifies email"| node_auth
node_registration -->|"writes profile"| node_realtimedb
node_registration -->|"uses config"| node_firebaseconfig
node_login -->|"authenticates"| node_auth
node_reset -->|"resets password"| node_auth
node_home -.->|"presents"| node_userlist
node_home -.->|"presents"| node_requests
node_home -.->|"presents"| node_friends
node_home -.->|"presents"| node_blocked
node_home -.->|"presents"| node_grouplist
node_userlist -->|"reads requests"| node_realtimedb
node_userlist -->|"sends requests"| node_realtimedb
node_requests -->|"reads requests"| node_realtimedb
node_requests -->|"accepts request"| node_realtimedb
node_friends -->|"reads friends"| node_realtimedb
node_friends -->|"selects conversation"| node_activebox
node_blocked -->|"reads and removes"| node_realtimedb
node_grouplist -->|"creates group"| node_realtimedb
node_grouplist -.->|"opens group"| node_groups
node_messages -.->|"uses selection"| node_activebox
node_app -->|"provides state"| node_store
node_store -->|"registers reducer"| node_userslice
node_store -->|"registers reducer"| node_activebox
node_sidebar -->|"signs out"| node_auth
node_sidebar -->|"clears session"| node_userslice
node_sidebar -->|"navigates"| node_app

click node_app "https://github.com/iyiu9akhan/livechat/blob/main/src/App.jsx"
click node_home "https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Home.jsx"
click node_login "https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Login.jsx"
click node_registration "https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Registration.jsx"
click node_reset "https://github.com/iyiu9akhan/livechat/blob/main/src/pages/ResetPassword.jsx"
click node_settings "https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Settings.jsx"
click node_firebaseconfig "https://github.com/iyiu9akhan/livechat/blob/main/src/authentication/firebase.config.js"
click node_userlist "https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/userList/UserList.jsx"
click node_requests "https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/friendRqst/FriendRqst.jsx"
click node_friends "https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/friends/Friends.jsx"
click node_blocked "https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/blockedUser/BlockedUser.jsx"
click node_grouplist "https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/groupList/GroupList.jsx"
click node_groups "https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/groups/Groups.jsx"
click node_messages "https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Messages.jsx"
click node_activebox "https://github.com/iyiu9akhan/livechat/blob/main/src/slice/activeMsgBox.js"
click node_userslice "https://github.com/iyiu9akhan/livechat/blob/main/src/slice/userSlice.js"
click node_store "https://github.com/iyiu9akhan/livechat/blob/main/src/store.js"
click node_sidebar "https://github.com/iyiu9akhan/livechat/blob/main/src/components/Layout/SideBar.jsx"

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_home,node_sidebar toneBlue
class node_login,node_registration,node_reset,node_settings,node_firebaseconfig,node_realtimedb toneAmber
class node_userlist,node_requests,node_friends,node_blocked,node_grouplist,node_groups toneMint
class node_messages,node_activebox,node_userslice,node_store toneRose
class node_visitor,node_auth toneIndigo
```

## Components

### App entry

- [Route application](https://github.com/iyiu9akhan/livechat/blob/main/src/App.jsx): `src/App.jsx`
- [Home page](https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Navigation and logout](https://github.com/iyiu9akhan/livechat/blob/main/src/components/Layout/SideBar.jsx): `src/components/Layout/SideBar.jsx`

### Accounts

- [Login page](https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Registration page](https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Registration.jsx): `src/pages/Registration.jsx`
- [Password reset](https://github.com/iyiu9akhan/livechat/blob/main/src/pages/ResetPassword.jsx): `src/pages/ResetPassword.jsx`
- [Settings page](https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Settings.jsx): `src/pages/Settings.jsx`
- [Firebase configuration](https://github.com/iyiu9akhan/livechat/blob/main/src/authentication/firebase.config.js): `src/authentication/firebase.config.js`

### Social network

- [User discovery](https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/userList/UserList.jsx): `src/components/home/userList/UserList.jsx`
- [Friend requests](https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/friendRqst/FriendRqst.jsx): `src/components/home/friendRqst/FriendRqst.jsx`
- [Friends list](https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/friends/Friends.jsx): `src/components/home/friends/Friends.jsx`
- [Blocked users](https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/blockedUser/BlockedUser.jsx): `src/components/home/blockedUser/BlockedUser.jsx`
- [Group directory](https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/groupList/GroupList.jsx): `src/components/home/groupList/GroupList.jsx`
- [Group view](https://github.com/iyiu9akhan/livechat/blob/main/src/components/home/groups/Groups.jsx): `src/components/home/groups/Groups.jsx`

### Messaging and state

- [Messages page](https://github.com/iyiu9akhan/livechat/blob/main/src/pages/Messages.jsx): `src/pages/Messages.jsx`
- [Active message state](https://github.com/iyiu9akhan/livechat/blob/main/src/slice/activeMsgBox.js): `src/slice/activeMsgBox.js`
- [User session state](https://github.com/iyiu9akhan/livechat/blob/main/src/slice/userSlice.js): `src/slice/userSlice.js`
- [Redux store](https://github.com/iyiu9akhan/livechat/blob/main/src/store.js): `src/store.js`

### Other components

- **Visitor**
- **Firebase Authentication**
- **Firebase Realtime DB**

## Connections

- Visitor → Route application: opens
- Route application → Registration page: routes to
- Route application → Login page: routes to
- Route application → Password reset: routes to
- Route application → Home page: routes to
- Route application → Messages page: routes to
- Route application → Settings page: routes to
- Registration page → Firebase Authentication: creates account
- Registration page → Firebase Authentication: verifies email
- Registration page → Firebase Realtime DB: writes profile
- Registration page → Firebase configuration: uses config
- Login page → Firebase Authentication: authenticates
- Password reset → Firebase Authentication: resets password
- Home page → User discovery: presents
- Home page → Friend requests: presents
- Home page → Friends list: presents
- Home page → Blocked users: presents
- Home page → Group directory: presents
- User discovery → Firebase Realtime DB: reads requests
- User discovery → Firebase Realtime DB: sends requests
- Friend requests → Firebase Realtime DB: reads requests
- Friend requests → Firebase Realtime DB: accepts request
- Friends list → Firebase Realtime DB: reads friends
- Friends list → Active message state: selects conversation
- Blocked users → Firebase Realtime DB: reads and removes
- Group directory → Firebase Realtime DB: creates group
- Group directory → Group view: opens group
- Messages page → Active message state: uses selection
- Route application → Redux store: provides state
- Redux store → User session state: registers reducer
- Redux store → Active message state: registers reducer
- Navigation and logout → Firebase Authentication: signs out
- Navigation and logout → User session state: clears session
- Navigation and logout → Route application: navigates