# hectorg2211/heythere-messaging-app architecture

> Architecture diagram of the GitHub repository hectorg2211/heythere-messaging-app, 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/hectorg2211/heythere-messaging-app
- Repository: https://github.com/hectorg2211/heythere-messaging-app

## Overview

Heythere is a React messaging app: a user signs in with Google, browses rooms, opens one, and sends messages; room data comes from a REST API, while Pusher updates messages and room previews in real time. The app uses shared React state for the authenticated user. The README documents an Express/Mongoose backend and MongoDB, but those server components are external to this repository; their internal behavior is not shown in the sampled source.

Main entry points: [`src/App.js`](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/App.js) (App router), [`src/components/Sidebar.js`](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Sidebar.js) (Room sidebar), [`src/components/Login.js`](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Login.js) (Google sign-in), [`src/components/Chat.js`](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Chat.js) (Room chat)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and authentication"]
  node_app["App router<br/>[App.js]"]
  node_login["Google sign-in<br/>[Login.js]"]
  node_firebase["Firebase auth<br/>[firebase.js]"]
end

subgraph group_rooms["Room browsing"]
  node_sidebar["Room sidebar<br/>[Sidebar.js]"]
  node_roomrow["Room preview<br/>[UserChat.js]"]
  node_client["API client<br/>[axios.js]"]
end

subgraph group_messaging["Chat and updates"]
  node_chat["Room chat<br/>[Chat.js]"]
  node_pusher["Pusher events"]
end

subgraph group_state["Shared user state"]
  node_provider["State provider<br/>[StateProvider.js]"]
  node_reducer["User reducer<br/>[reducer.js]"]
end

node_user(("User"))
node_api["Messaging REST API"]
node_mongo[("MongoDB")]

node_user -->|"opens app"| node_app
node_app -->|"shows signed out"| node_login
node_app -->|"shows rooms"| node_sidebar
node_app -->|"routes room"| node_chat
node_user -->|"starts sign-in"| node_login
node_login -->|"authenticates"| node_firebase
node_firebase -->|"reports auth state"| node_login
node_login -->|"dispatches user"| node_provider
node_app -->|"reads user"| node_provider
node_provider -->|"reduces actions"| node_reducer
node_sidebar -->|"signs out"| node_firebase
node_sidebar -->|"requests rooms"| node_client
node_sidebar -->|"renders previews"| node_roomrow
node_sidebar -->|"subscribes updates"| node_pusher
node_chat -->|"reads user"| node_provider
node_chat -->|"loads and sends"| node_client
node_chat -->|"subscribes messages"| node_pusher
node_client -->|"sends HTTP requests"| node_api
node_api -->|"uses persistence"| node_mongo

click node_app "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/App.js"
click node_login "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Login.js"
click node_firebase "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/firebase.js"
click node_sidebar "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Sidebar.js"
click node_roomrow "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/UserChat.js"
click node_client "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/axios.js"
click node_chat "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Chat.js"
click node_provider "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/StateProvider.js"
click node_reducer "https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/reducer.js"

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_login,node_firebase,node_user toneBlue
class node_sidebar,node_roomrow,node_client,node_mongo toneAmber
class node_chat,node_pusher,node_api toneMint
class node_provider,node_reducer toneRose
```

## Components

### App and authentication

- [App router](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/App.js): `src/App.js`
- [Google sign-in](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Login.js): `src/components/Login.js`
- [Firebase auth](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/firebase.js): `src/firebase.js`

### Room browsing

- [Room sidebar](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Sidebar.js): `src/components/Sidebar.js`
- [Room preview](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/UserChat.js): `src/components/UserChat.js`
- [API client](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/axios.js): `src/axios.js`

### Chat and updates

- [Room chat](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/components/Chat.js): `src/components/Chat.js`
- **Pusher events**

### Shared user state

- [State provider](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/StateProvider.js): `src/StateProvider.js`
- [User reducer](https://github.com/hectorg2211/heythere-messaging-app/blob/master/src/reducer.js): `src/reducer.js`

### Other components

- **User**
- **Messaging REST API**
- **MongoDB**

## Connections

- User → App router: opens app
- App router → Google sign-in: shows signed out (evidence: `src/App.js`)
- App router → Room sidebar: shows rooms (evidence: `src/App.js`)
- App router → Room chat: routes room (evidence: `src/App.js`)
- User → Google sign-in: starts sign-in (evidence: `src/components/Login.js`)
- Google sign-in → Firebase auth: authenticates (evidence: `src/components/Login.js`)
- Firebase auth → Google sign-in: reports auth state (evidence: `src/components/Login.js`)
- Google sign-in → State provider: dispatches user (evidence: `src/components/Login.js`)
- App router → State provider: reads user (evidence: `src/App.js`)
- State provider → User reducer: reduces actions (evidence: `src/index.js`)
- Room sidebar → Firebase auth: signs out (evidence: `src/components/Sidebar.js`)
- Room sidebar → API client: requests rooms (evidence: `src/components/Sidebar.js`)
- Room sidebar → Room preview: renders previews (evidence: `src/components/Sidebar.js`)
- Room sidebar → Pusher events: subscribes updates (evidence: `src/components/Sidebar.js`)
- Room chat → State provider: reads user (evidence: `src/components/Chat.js`)
- Room chat → API client: loads and sends (evidence: `src/components/Chat.js`)
- Room chat → Pusher events: subscribes messages (evidence: `src/components/Chat.js`)
- API client → Messaging REST API: sends HTTP requests (evidence: `src/axios.js`)
- Messaging REST API → MongoDB: uses persistence (evidence: `README.md`)