# ashik-khan-atul/talker-client architecture

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

- Interactive diagram: https://gitdiagram.com/ashik-khan-atul/talker-client
- Repository: https://github.com/ashik-khan-atul/talker-client

## Overview

Talker is a React social microblog frontend. Users register or log in, then browse and create posts, interact through likes and comments, and view or manage profiles. The UI also supports visiting other users’ profiles, with locked-profile content hidden. The backend is a separate project; API relationships beyond the sampled requests are included only where the README documents the capability. Several component implementations were not excerpted, so their internal request flows are not inferred.

Main entry points: [`src/Router/router.jsx`](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Router/router.jsx) (Route table), [`src/Components/Register.jsx/Register.jsx`](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/Register.jsx/Register.jsx) (Registration), [`src/Components/ProfileTab/ProfileTab.jsx`](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/ProfileTab/ProfileTab.jsx) (My profile tabs), [`src/Providers/AuthProvider.jsx`](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Providers/AuthProvider.jsx) (Auth provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_entry["React entry<br/>[main.jsx]"]
  node_routes["Route table<br/>[router.jsx]"]
  node_home["Home page<br/>[Home.jsx]"]
  node_layout["Home layout<br/>[HomeLayout.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_authprovider["Auth provider<br/>[AuthProvider.jsx]"]
  node_authhook["Auth hook<br/>[useAuth.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_register["Registration<br/>[Register.jsx]"]
  node_google["Google sign-in<br/>[GoogleLogin.jsx]"]
  node_firebase["Firebase Auth"]
  node_publichttp["Public API client<br/>[useAxiosPublic.jsx]"]
  node_securehttp["Secure API client<br/>[useAxiosSecure.jsx]"]
end

subgraph group_social["Posts and interaction"]
  node_createpost["Create post<br/>[CreatePost.jsx]"]
  node_feed["Post feed<br/>[Showpost.jsx]"]
  node_myposts["My posts<br/>[ShowPostByME.jsx]"]
  node_singlepost["Post detail<br/>[SinglePost.jsx]"]
end

subgraph group_profiles["Profile experience"]
  node_myprofile["My profile<br/>[Profile.jsx]"]
  node_profileinfo["Profile information<br/>[ProfileInfo.jsx]"]
  node_profileedit["Edit profile"]
  node_visitprofile["Visited profile<br/>[VisitProfile.jsx]"]
  node_visitimage["Visited profile header"]
  node_visittab["Visited profile tabs"]
  node_photos["Visited photos"]
  node_followers["Visited followers"]
  node_following["Visited following"]
  node_profiletabs["My profile tabs<br/>[ProfileTab.jsx]"]
  node_profileimage["My profile image<br/>[ProfileImage.jsx]"]
  node_editprofileimage["Posted image view<br/>[PostedImage.jsx]"]
  node_myfollowers["My followers<br/>[MyFollowers.jsx]"]
  node_myfollowing["My following<br/>[MyFollowing.jsx]"]
end

node_visitor(("Visitor or user"))
node_api["Talker API"]
node_imagehost["Image hosting"]

node_visitor -->|"opens"| node_entry
node_entry -->|"provides auth"| node_authprovider
node_entry -->|"mounts routes"| node_routes
node_routes -->|"routes through"| node_layout
node_routes -->|"routes to"| node_home
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_register
node_routes -->|"routes to"| node_singlepost
node_routes -->|"routes to"| node_myprofile
node_routes -->|"routes to"| node_visitprofile
node_routes -->|"routes to"| node_profileinfo
node_routes -->|"routes to"| node_profileedit
node_layout -->|"renders"| node_home
node_authprovider -->|"uses auth"| node_firebase
node_authprovider -->|"requests JWT"| node_publichttp
node_authprovider -->|"posts token request"| node_api
node_authhook -->|"reads context"| node_authprovider
node_login -->|"uses auth"| node_authhook
node_register -->|"uses auth"| node_authhook
node_register -->|"uploads image"| node_imagehost
node_register -->|"creates account"| node_firebase
node_register -->|"creates user"| node_api
node_login -->|"offers Google sign-in"| node_google
node_google -->|"uses auth"| node_authhook
node_google -->|"signs in"| node_firebase
node_google -->|"creates user"| node_api
node_home -->|"renders"| node_createpost
node_home -->|"renders"| node_feed
node_createpost -.->|"submits post"| node_api
node_feed -.->|"loads posts"| node_api
node_singlepost -->|"loads post"| node_api
node_singlepost -->|"likes post"| node_api
node_singlepost -->|"sends comments"| node_api
node_myposts -->|"loads own posts"| node_api
node_myposts -->|"deletes post"| node_api
node_myprofile -->|"renders"| node_profileimage
node_myprofile -->|"renders"| node_profiletabs
node_profiletabs -->|"shows posts"| node_myposts
node_profiletabs -->|"shows photos"| node_editprofileimage
node_profiletabs -->|"shows followers"| node_myfollowers
node_profiletabs -->|"shows following"| node_myfollowing
node_profileinfo -->|"loads profile"| node_api
node_profileedit -.->|"updates profile"| node_api
node_visitprofile -->|"renders"| node_visitimage
node_visitprofile -->|"renders"| node_visittab
node_visittab -->|"loads visited user"| node_api
node_visittab -->|"shows photos"| node_photos
node_visittab -->|"shows followers"| node_followers

click node_entry "https://github.com/ashik-khan-atul/talker-client/blob/main/src/main.jsx"
click node_routes "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Router/router.jsx"
click node_home "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/Home/Home.jsx"
click node_layout "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Layouts/HomeLayout/HomeLayout.jsx"
click node_authprovider "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Providers/AuthProvider.jsx"
click node_authhook "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Hooks/useAuth.jsx"
click node_login "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/Login/Login.jsx"
click node_register "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/Register.jsx/Register.jsx"
click node_google "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Shared/GoogleLogin.jsx"
click node_publichttp "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Hooks/useAxiosPublic.jsx"
click node_securehttp "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Hooks/useAxiosSecure.jsx"
click node_createpost "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/CreatePost/CreatePost.jsx"
click node_feed "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/Showpost/Showpost.jsx"
click node_myposts "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/ShowPostByME/ShowPostByME.jsx"
click node_singlepost "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/SinglePost/SinglePost.jsx"
click node_myprofile "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/Profile/Profile.jsx"
click node_profileinfo "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/ProfileInfo/ProfileInfo.jsx"
click node_profileedit "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/ProfileInfo/ProfileInfoEdit/ProfileInfoEdit.jsx"
click node_visitprofile "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitProfile.jsx"
click node_visitimage "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitProfileImage/VisitProfileImage.jsx"
click node_visittab "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitProfileTab/VisitProfileTab.jsx"
click node_photos "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitProfilePostedPhoto/VisitProfilePostedPhoto.jsx"
click node_followers "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitedProfileFollowers/VisitedProfileFollowers.jsx"
click node_following "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitedProfileFollowing/VisitedProfileFollowing.jsx"
click node_profiletabs "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/ProfileTab/ProfileTab.jsx"
click node_profileimage "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/ProfileImage/ProfileImage.jsx"
click node_editprofileimage "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/PostedImage/PostedImage.jsx"
click node_myfollowers "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/MyFollowers/MyFollowers.jsx"
click node_myfollowing "https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/MyFollowing/MyFollowing.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_entry,node_routes,node_home,node_layout,node_visitor toneBlue
class node_authprovider,node_authhook,node_login,node_register,node_google,node_firebase,node_publichttp,node_securehttp toneAmber
class node_createpost,node_feed,node_myposts,node_singlepost,node_api toneMint
class node_myprofile,node_profileinfo,node_profileedit,node_visitprofile,node_visitimage,node_visittab,node_photos,node_followers,node_following,node_profiletabs,node_profileimage,node_editprofileimage,node_myfollowers,node_myfollowing toneRose
class node_imagehost toneIndigo
```

## Components

### App navigation

- [React entry](https://github.com/ashik-khan-atul/talker-client/blob/main/src/main.jsx): `src/main.jsx`
- [Route table](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Router/router.jsx): `src/Router/router.jsx`
- [Home page](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/Home/Home.jsx): `src/Pages/Home/Home.jsx`
- [Home layout](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Layouts/HomeLayout/HomeLayout.jsx): `src/Layouts/HomeLayout/HomeLayout.jsx`

### Identity and access

- [Auth provider](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Providers/AuthProvider.jsx): `src/Providers/AuthProvider.jsx`
- [Auth hook](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Hooks/useAuth.jsx): `src/Hooks/useAuth.jsx`
- [Login](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/Login/Login.jsx): `src/Components/Login/Login.jsx`
- [Registration](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/Register.jsx/Register.jsx): `src/Components/Register.jsx/Register.jsx`
- [Google sign-in](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Shared/GoogleLogin.jsx): `src/Shared/GoogleLogin.jsx`
- **Firebase Auth**
- [Public API client](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Hooks/useAxiosPublic.jsx): `src/Hooks/useAxiosPublic.jsx`
- [Secure API client](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Hooks/useAxiosSecure.jsx): `src/Hooks/useAxiosSecure.jsx`

### Posts and interaction

- [Create post](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/CreatePost/CreatePost.jsx): `src/Components/CreatePost/CreatePost.jsx`
- [Post feed](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/Showpost/Showpost.jsx): `src/Components/Showpost/Showpost.jsx`
- [My posts](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/ShowPostByME/ShowPostByME.jsx): `src/Components/ShowPostByME/ShowPostByME.jsx`
- [Post detail](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/SinglePost/SinglePost.jsx): `src/Components/SinglePost/SinglePost.jsx`

### Profile experience

- [My profile](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/Profile/Profile.jsx): `src/Pages/Profile/Profile.jsx`
- [Profile information](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/ProfileInfo/ProfileInfo.jsx): `src/Pages/ProfileInfo/ProfileInfo.jsx`
- [Edit profile](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/ProfileInfo/ProfileInfoEdit/ProfileInfoEdit.jsx): `src/Pages/ProfileInfo/ProfileInfoEdit/ProfileInfoEdit.jsx`
- [Visited profile](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitProfile.jsx): `src/Pages/VisitProfile/VisitProfile.jsx`
- [Visited profile header](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitProfileImage/VisitProfileImage.jsx): `src/Pages/VisitProfile/VisitProfileImage/VisitProfileImage.jsx`
- [Visited profile tabs](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitProfileTab/VisitProfileTab.jsx): `src/Pages/VisitProfile/VisitProfileTab/VisitProfileTab.jsx`
- [Visited photos](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitProfilePostedPhoto/VisitProfilePostedPhoto.jsx): `src/Pages/VisitProfile/VisitProfilePostedPhoto/VisitProfilePostedPhoto.jsx`
- [Visited followers](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitedProfileFollowers/VisitedProfileFollowers.jsx): `src/Pages/VisitProfile/VisitedProfileFollowers/VisitedProfileFollowers.jsx`
- [Visited following](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Pages/VisitProfile/VisitedProfileFollowing/VisitedProfileFollowing.jsx): `src/Pages/VisitProfile/VisitedProfileFollowing/VisitedProfileFollowing.jsx`
- [My profile tabs](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/ProfileTab/ProfileTab.jsx): `src/Components/ProfileTab/ProfileTab.jsx`
- [My profile image](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/ProfileImage/ProfileImage.jsx): `src/Components/ProfileImage/ProfileImage.jsx`
- [Posted image view](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/PostedImage/PostedImage.jsx): `src/Components/PostedImage/PostedImage.jsx`
- [My followers](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/MyFollowers/MyFollowers.jsx): `src/Components/MyFollowers/MyFollowers.jsx`
- [My following](https://github.com/ashik-khan-atul/talker-client/blob/main/src/Components/MyFollowing/MyFollowing.jsx): `src/Components/MyFollowing/MyFollowing.jsx`

### Other components

- **Visitor or user**
- **Talker API**
- **Image hosting**

## Connections

- Visitor or user → React entry: opens (evidence: `src/main.jsx`)
- React entry → Auth provider: provides auth (evidence: `src/main.jsx`)
- React entry → Route table: mounts routes (evidence: `src/main.jsx`)
- Route table → Home layout: routes through (evidence: `src/Router/router.jsx`)
- Route table → Home page: routes to (evidence: `src/Router/router.jsx`)
- Route table → Login: routes to (evidence: `src/Router/router.jsx`)
- Route table → Registration: routes to (evidence: `src/Router/router.jsx`)
- Route table → Post detail: routes to (evidence: `src/Router/router.jsx`)
- Route table → My profile: routes to (evidence: `src/Router/router.jsx`)
- Route table → Visited profile: routes to (evidence: `src/Router/router.jsx`)
- Route table → Profile information: routes to (evidence: `src/Router/router.jsx`)
- Route table → Edit profile: routes to (evidence: `src/Router/router.jsx`)
- Home layout → Home page: renders (evidence: `src/Pages/Home/Home.jsx`)
- Auth provider → Firebase Auth: uses auth (evidence: `src/Providers/AuthProvider.jsx`)
- Auth provider → Public API client: requests JWT (evidence: `src/Providers/AuthProvider.jsx`)
- Auth provider → Talker API: posts token request (evidence: `src/Providers/AuthProvider.jsx`)
- Auth hook → Auth provider: reads context (evidence: `src/Hooks/useAuth.jsx`)
- Login → Auth hook: uses auth (evidence: `src/Components/Login/Login.jsx`)
- Registration → Auth hook: uses auth (evidence: `src/Components/Register.jsx/Register.jsx`)
- Registration → Image hosting: uploads image (evidence: `src/Components/Register.jsx/Register.jsx`)
- Registration → Firebase Auth: creates account
- Registration → Talker API: creates user (evidence: `src/Components/Register.jsx/Register.jsx`)
- Login → Google sign-in: offers Google sign-in (evidence: `src/Components/Login/Login.jsx`)
- Google sign-in → Auth hook: uses auth (evidence: `src/Shared/GoogleLogin.jsx`)
- Google sign-in → Firebase Auth: signs in
- Google sign-in → Talker API: creates user (evidence: `src/Shared/GoogleLogin.jsx`)
- Home page → Create post: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home page → Post feed: renders (evidence: `src/Pages/Home/Home.jsx`)
- Create post → Talker API: submits post (evidence: `README.md`)
- Post feed → Talker API: loads posts (evidence: `README.md`)
- Post detail → Talker API: loads post (evidence: `src/Components/SinglePost/SinglePost.jsx`)
- Post detail → Talker API: likes post (evidence: `src/Components/SinglePost/SinglePost.jsx`)
- Post detail → Talker API: sends comments (evidence: `src/Components/SinglePost/SinglePost.jsx`)
- My posts → Talker API: loads own posts (evidence: `src/Components/ShowPostByME/ShowPostByME.jsx`)
- My posts → Talker API: deletes post (evidence: `src/Components/ShowPostByME/ShowPostByME.jsx`)
- My profile → My profile image: renders (evidence: `src/Pages/Profile/Profile.jsx`)
- My profile → My profile tabs: renders (evidence: `src/Pages/Profile/Profile.jsx`)
- My profile tabs → My posts: shows posts (evidence: `src/Components/ProfileTab/ProfileTab.jsx`)
- My profile tabs → Posted image view: shows photos (evidence: `src/Components/ProfileTab/ProfileTab.jsx`)
- My profile tabs → My followers: shows followers (evidence: `src/Components/ProfileTab/ProfileTab.jsx`)
- My profile tabs → My following: shows following (evidence: `src/Components/ProfileTab/ProfileTab.jsx`)
- Profile information → Talker API: loads profile (evidence: `src/Pages/ProfileInfo/ProfileInfo.jsx`)
- Edit profile → Talker API: updates profile (evidence: `README.md`)
- Visited profile → Visited profile header: renders (evidence: `src/Pages/VisitProfile/VisitProfile.jsx`)
- Visited profile → Visited profile tabs: renders (evidence: `src/Pages/VisitProfile/VisitProfile.jsx`)
- Visited profile tabs → Talker API: loads visited user (evidence: `src/Pages/VisitProfile/VisitProfileTab/VisitProfileTab.jsx`)
- Visited profile tabs → Visited photos: shows photos (evidence: `src/Pages/VisitProfile/VisitProfileTab/VisitProfileTab.jsx`)
- Visited profile tabs → Visited followers: shows followers (evidence: `src/Pages/VisitProfile/VisitProfileTab/VisitProfileTab.jsx`)