# adoppp/achatx architecture

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

- Interactive diagram: https://gitdiagram.com/adoppp/achatx
- Repository: https://github.com/adoppp/achatx

## Overview

Achatx is a React chat application with email authentication, chat-listening/creation services, protected chat routes, and account settings. The visible runtime starts in `src/main.tsx`, which mounts theme, Redux, modal, and routing providers. Authentication services and the chat service use Firebase; auth state is reflected in Redux. Settings include theme customization persisted in browser storage. The README also calls out shared UI, error handling, and modal refactors. Several listeners and page implementations are present in the tree but their wiring was not sampled, so uncertain connections are omitted.

Main entry points: [`src/routing/routing.config.tsx`](https://github.com/adoppp/achatx/blob/main/src/routing/routing.config.tsx) (Route configuration), [`src/main.tsx`](https://github.com/adoppp/achatx/blob/main/src/main.tsx) (React entry), [`src/services/auth.service.ts`](https://github.com/adoppp/achatx/blob/main/src/services/auth.service.ts) (Auth service), [`src/sections/auth/SignInForm/SignInForm.tsx`](https://github.com/adoppp/achatx/blob/main/src/sections/auth/SignInForm/SignInForm.tsx) (Auth forms)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry and navigation"]
  node_entrypoint["React entry<br/>[main.tsx]"]
  node_router["Route configuration<br/>[routing.config.tsx]"]
  node_private["Protected routes<br/>[PrivateRoute.tsx]"]
end

subgraph group_identity["Authentication"]
  node_signin["Sign-in page<br/>[SignInPage.tsx]"]
  node_signup["Sign-up page<br/>[SignUpPage.tsx]"]
  node_authforms["Auth forms<br/>[SignInForm.tsx]"]
  node_authservice["Auth service<br/>[auth.service.ts]"]
  node_authlistener["Auth state listener"]
end

subgraph group_chat["Chat domain"]
  node_chatspage["Chats page<br/>[ChatsPage.tsx]"]
  node_chatpage["Chat page<br/>[ChatPage.tsx]"]
  node_chatlistener["Chat listener"]
  node_chatservice["Chat service<br/>[chats.service.ts]"]
end

subgraph group_shared["State and shared UX"]
  node_redux[("Redux store<br/>[store.ts]")]
  node_authstate["Auth state<br/>[authSlice.ts]"]
  node_errorstate["Error state<br/>[errorSlice.ts]"]
  node_errorhandler["Error handler"]
  node_modal["Modal system<br/>[ModalProvider.tsx]"]
  node_theme["Theme provider<br/>[useTheme.tsx]"]
  node_settings["Settings pages<br/>[ThemePage.tsx]"]
end

node_user(("User"))
node_firestore[("Firebase Firestore")]
node_firebaseauth["Firebase Auth"]

node_user -->|"opens app"| node_entrypoint
node_entrypoint -->|"mounts router"| node_router
node_entrypoint -->|"provides store"| node_redux
node_entrypoint -->|"provides modal"| node_modal
node_entrypoint -->|"provides theme"| node_theme
node_router -->|"guards routes"| node_private
node_router -->|"routes to"| node_chatspage
node_router -->|"routes to"| node_chatpage
node_router -->|"routes to"| node_signin
node_router -->|"routes to"| node_signup
node_signin -->|"renders form"| node_authforms
node_signup -->|"renders form"| node_authforms
node_authforms -->|"submits credentials"| node_authservice
node_authservice -->|"authenticates"| node_firebaseauth
node_authservice -->|"writes profile"| node_firestore
node_authlistener -->|"observes auth"| node_firebaseauth
node_authlistener -->|"dispatches state"| node_authstate
node_redux -->|"combines reducer"| node_authstate
node_chatlistener -->|"subscribes chats"| node_chatservice
node_chatservice -->|"reads and writes"| node_firestore
node_errorhandler -->|"selects errors"| node_errorstate
node_errorhandler -->|"opens or closes"| node_modal
node_settings -->|"sets appearance"| node_theme

click node_entrypoint "https://github.com/adoppp/achatx/blob/main/src/main.tsx"
click node_router "https://github.com/adoppp/achatx/blob/main/src/routing/routing.config.tsx"
click node_private "https://github.com/adoppp/achatx/blob/main/src/routing/routes/PrivateRoute.tsx"
click node_chatspage "https://github.com/adoppp/achatx/blob/main/src/pages/app/ChatsPage/ChatsPage.tsx"
click node_chatpage "https://github.com/adoppp/achatx/blob/main/src/pages/app/ChatPage/ChatPage.tsx"
click node_chatlistener "https://github.com/adoppp/achatx/blob/main/src/hooks/useChatsListener.tsx"
click node_chatservice "https://github.com/adoppp/achatx/blob/main/src/services/chats.service.ts"
click node_signin "https://github.com/adoppp/achatx/blob/main/src/pages/auth/SignInPage/SignInPage.tsx"
click node_signup "https://github.com/adoppp/achatx/blob/main/src/pages/auth/SignUpPage/SignUpPage.tsx"
click node_authforms "https://github.com/adoppp/achatx/blob/main/src/sections/auth/SignInForm/SignInForm.tsx"
click node_authservice "https://github.com/adoppp/achatx/blob/main/src/services/auth.service.ts"
click node_authlistener "https://github.com/adoppp/achatx/blob/main/src/hooks/useAuthListener.tsx"
click node_redux "https://github.com/adoppp/achatx/blob/main/src/redux/store.ts"
click node_authstate "https://github.com/adoppp/achatx/blob/main/src/redux/reducers/authSlice.ts"
click node_errorstate "https://github.com/adoppp/achatx/blob/main/src/redux/reducers/errorSlice.ts"
click node_errorhandler "https://github.com/adoppp/achatx/blob/main/src/hooks/useErrorHandler.tsx"
click node_modal "https://github.com/adoppp/achatx/blob/main/src/components/shared/Modal/ModalProvider.tsx"
click node_theme "https://github.com/adoppp/achatx/blob/main/src/hooks/useTheme.tsx"
click node_settings "https://github.com/adoppp/achatx/blob/main/src/pages/app/settings/ThemePage/ThemePage.tsx"

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_entrypoint,node_router,node_private,node_user toneBlue
class node_signin,node_signup,node_authforms,node_authservice,node_authlistener,node_firestore toneAmber
class node_chatspage,node_chatpage,node_chatlistener,node_chatservice toneMint
class node_redux,node_authstate,node_errorstate,node_errorhandler,node_modal,node_theme,node_settings toneRose
class node_firebaseauth toneIndigo
```

## Components

### App entry and navigation

- [React entry](https://github.com/adoppp/achatx/blob/main/src/main.tsx): `src/main.tsx`
- [Route configuration](https://github.com/adoppp/achatx/blob/main/src/routing/routing.config.tsx): `src/routing/routing.config.tsx`
- [Protected routes](https://github.com/adoppp/achatx/blob/main/src/routing/routes/PrivateRoute.tsx): `src/routing/routes/PrivateRoute.tsx`

### Authentication

- [Sign-in page](https://github.com/adoppp/achatx/blob/main/src/pages/auth/SignInPage/SignInPage.tsx): `src/pages/auth/SignInPage/SignInPage.tsx`
- [Sign-up page](https://github.com/adoppp/achatx/blob/main/src/pages/auth/SignUpPage/SignUpPage.tsx): `src/pages/auth/SignUpPage/SignUpPage.tsx`
- [Auth forms](https://github.com/adoppp/achatx/blob/main/src/sections/auth/SignInForm/SignInForm.tsx): `src/sections/auth/SignInForm/SignInForm.tsx`
- [Auth service](https://github.com/adoppp/achatx/blob/main/src/services/auth.service.ts): `src/services/auth.service.ts`
- [Auth state listener](https://github.com/adoppp/achatx/blob/main/src/hooks/useAuthListener.tsx): `src/hooks/useAuthListener.tsx`

### Chat domain

- [Chats page](https://github.com/adoppp/achatx/blob/main/src/pages/app/ChatsPage/ChatsPage.tsx): `src/pages/app/ChatsPage/ChatsPage.tsx`
- [Chat page](https://github.com/adoppp/achatx/blob/main/src/pages/app/ChatPage/ChatPage.tsx): `src/pages/app/ChatPage/ChatPage.tsx`
- [Chat listener](https://github.com/adoppp/achatx/blob/main/src/hooks/useChatsListener.tsx): `src/hooks/useChatsListener.tsx`
- [Chat service](https://github.com/adoppp/achatx/blob/main/src/services/chats.service.ts): `src/services/chats.service.ts`

### State and shared UX

- [Redux store](https://github.com/adoppp/achatx/blob/main/src/redux/store.ts): `src/redux/store.ts`
- [Auth state](https://github.com/adoppp/achatx/blob/main/src/redux/reducers/authSlice.ts): `src/redux/reducers/authSlice.ts`
- [Error state](https://github.com/adoppp/achatx/blob/main/src/redux/reducers/errorSlice.ts): `src/redux/reducers/errorSlice.ts`
- [Error handler](https://github.com/adoppp/achatx/blob/main/src/hooks/useErrorHandler.tsx): `src/hooks/useErrorHandler.tsx`
- [Modal system](https://github.com/adoppp/achatx/blob/main/src/components/shared/Modal/ModalProvider.tsx): `src/components/shared/Modal/ModalProvider.tsx`
- [Theme provider](https://github.com/adoppp/achatx/blob/main/src/hooks/useTheme.tsx): `src/hooks/useTheme.tsx`
- [Settings pages](https://github.com/adoppp/achatx/blob/main/src/pages/app/settings/ThemePage/ThemePage.tsx): `src/pages/app/settings/ThemePage/ThemePage.tsx`

### Other components

- **User**
- **Firebase Firestore**
- **Firebase Auth**

## Connections

- User → React entry: opens app
- React entry → Route configuration: mounts router
- React entry → Redux store: provides store
- React entry → Modal system: provides modal
- React entry → Theme provider: provides theme
- Route configuration → Protected routes: guards routes
- Route configuration → Chats page: routes to
- Route configuration → Chat page: routes to
- Route configuration → Sign-in page: routes to
- Route configuration → Sign-up page: routes to
- Sign-in page → Auth forms: renders form
- Sign-up page → Auth forms: renders form
- Auth forms → Auth service: submits credentials
- Auth service → Firebase Auth: authenticates
- Auth service → Firebase Firestore: writes profile
- Auth state listener → Firebase Auth: observes auth
- Auth state listener → Auth state: dispatches state
- Redux store → Auth state: combines reducer
- Chat listener → Chat service: subscribes chats
- Chat service → Firebase Firestore: reads and writes
- Error handler → Error state: selects errors
- Error handler → Modal system: opens or closes
- Settings pages → Theme provider: sets appearance