# harshiit112/alpha_slack architecture

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

- Interactive diagram: https://gitdiagram.com/harshiit112/alpha_slack
- Repository: https://github.com/harshiit112/alpha_slack

## Overview

Alpha Slack is a real-time team messaging and video-collaboration app. Users authenticate through Clerk, enter the React workspace, and connect to Stream for chat; calls use the video experience. The backend verifies requests and issues Stream tokens. Separately, Clerk user events trigger Inngest workflows that synchronize user records and Stream accounts. The README also documents channel/member tools and telemetry. Those broader UI capabilities are represented at their enclosing paths; their internal wiring was not sampled, so uncertain links are omitted.

Main entry points: [`frontend/src/App.jsx`](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/App.jsx) (App routing), [`backend/src/server.js`](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/server.js) (Express app), [`backend/src/config/inngest.js`](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/config/inngest.js) (Event functions), [`frontend/src/pages/HomePage.jsx`](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/HomePage.jsx) (Workspace chat)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client app"]
  node_app["App routing<br/>[App.jsx]"]
  node_authpage["Sign-in<br/>[AuthPage.jsx]"]
  node_home["Workspace chat<br/>[HomePage.jsx]"]
  node_calls["Video calls<br/>[CallPage.jsx]"]
  node_users["User directory<br/>[UsersList.jsx]"]
  node_chatui["Channel tools"]
  node_streamhook["Chat connection<br/>[useStreamChat.js]"]
  node_authprovider["Token setup<br/>[AuthProvider.jsx]"]
  node_api["API client<br/>[api.js]"]
end

subgraph group_backend["Backend API"]
  node_server["Express app<br/>[server.js]"]
  node_routes["Chat routes<br/>[chat.route.js]"]
  node_controller["Token controller<br/>[chat.controller.js]"]
  node_streamconfig["Stream config<br/>[stream.js]"]
  node_authmw["Auth middleware<br/>[auth.middleware.js]"]
  node_dbconfig["Database connection<br/>[db.js]"]
end

subgraph group_onboarding["User sync"]
  node_inngestconfig["Event functions<br/>[inngest.js]"]
  node_usermodel[("User model<br/>[user.model.js]")]
end

subgraph group_services["External services"]
  node_clerk{{"Clerk"}}
  node_stream{{"Stream chat and video"}}
  node_mongodb[("MongoDB")]
  node_inngest["Inngest service"]
  node_sentry{{"Sentry"}}
end

node_user(("Workspace user"))

node_user -->|"uses"| node_app
node_app -->|"routes"| node_authpage
node_app -->|"routes"| node_home
node_app -->|"routes"| node_calls
node_app -->|"routes"| node_users
node_home -->|"renders"| node_chatui
node_home -->|"connects via"| node_streamhook
node_streamhook -->|"requests token"| node_api
node_api -->|"HTTP request"| node_server
node_server -->|"dispatches"| node_routes
node_routes -->|"protects"| node_authmw
node_routes -->|"dispatches"| node_controller
node_controller -->|"generates token"| node_streamconfig
node_streamconfig -->|"creates token"| node_stream
node_streamhook -->|"connects chat"| node_stream
node_calls -->|"uses video"| node_stream
node_server -->|"connects lazily"| node_dbconfig
node_dbconfig -->|"connects"| node_mongodb
node_clerk -->|"authenticates"| node_authpage
node_authprovider -->|"gets session token"| node_clerk
node_authprovider -->|"adds bearer token"| node_api
node_clerk -.->|"sends user events"| node_inngest
node_server -->|"serves functions"| node_inngestconfig
node_inngest -->|"invokes events"| node_inngestconfig
node_inngestconfig -->|"connects database"| node_dbconfig
node_inngestconfig -->|"creates or deletes"| node_usermodel
node_usermodel -->|"stores user records"| node_mongodb
node_inngestconfig -->|"syncs Stream users"| node_streamconfig
node_server -.->|"reports errors"| node_sentry
node_app -.->|"reports telemetry"| node_sentry

click node_app "https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/App.jsx"
click node_authpage "https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/AuthPage.jsx"
click node_home "https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/HomePage.jsx"
click node_calls "https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/CallPage.jsx"
click node_users "https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/UsersList.jsx"
click node_chatui "https://github.com/harshiit112/alpha_slack/tree/main/frontend/src/components"
click node_streamhook "https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/hooks/useStreamChat.js"
click node_authprovider "https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/providers/AuthProvider.jsx"
click node_api "https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/lib/api.js"
click node_server "https://github.com/harshiit112/alpha_slack/blob/main/backend/src/server.js"
click node_routes "https://github.com/harshiit112/alpha_slack/blob/main/backend/src/routes/chat.route.js"
click node_controller "https://github.com/harshiit112/alpha_slack/blob/main/backend/src/controllers/chat.controller.js"
click node_streamconfig "https://github.com/harshiit112/alpha_slack/blob/main/backend/src/config/stream.js"
click node_authmw "https://github.com/harshiit112/alpha_slack/blob/main/backend/src/middleware/auth.middleware.js"
click node_dbconfig "https://github.com/harshiit112/alpha_slack/blob/main/backend/src/config/db.js"
click node_inngestconfig "https://github.com/harshiit112/alpha_slack/blob/main/backend/src/config/inngest.js"
click node_usermodel "https://github.com/harshiit112/alpha_slack/blob/main/backend/src/models/user.model.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_authpage,node_home,node_calls,node_users,node_chatui,node_streamhook,node_authprovider,node_api,node_user toneBlue
class node_server,node_routes,node_controller,node_streamconfig,node_authmw,node_dbconfig toneAmber
class node_inngestconfig,node_usermodel toneMint
class node_clerk,node_stream,node_mongodb,node_inngest,node_sentry toneRose
```

## Components

### Client app

- [App routing](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Sign-in](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/AuthPage.jsx): `frontend/src/pages/AuthPage.jsx`
- [Workspace chat](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/HomePage.jsx): `frontend/src/pages/HomePage.jsx`
- [Video calls](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/CallPage.jsx): `frontend/src/pages/CallPage.jsx`
- [User directory](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/pages/UsersList.jsx): `frontend/src/pages/UsersList.jsx`
- [Channel tools](https://github.com/harshiit112/alpha_slack/tree/main/frontend/src/components): `frontend/src/components`
- [Chat connection](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/hooks/useStreamChat.js): `frontend/src/hooks/useStreamChat.js`
- [Token setup](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/providers/AuthProvider.jsx): `frontend/src/providers/AuthProvider.jsx`
- [API client](https://github.com/harshiit112/alpha_slack/blob/main/frontend/src/lib/api.js): `frontend/src/lib/api.js`

### Backend API

- [Express app](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/server.js): `backend/src/server.js`
- [Chat routes](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/routes/chat.route.js): `backend/src/routes/chat.route.js`
- [Token controller](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/controllers/chat.controller.js): `backend/src/controllers/chat.controller.js`
- [Stream config](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/config/stream.js): `backend/src/config/stream.js`
- [Auth middleware](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/middleware/auth.middleware.js): `backend/src/middleware/auth.middleware.js`
- [Database connection](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/config/db.js): `backend/src/config/db.js`

### User sync

- [Event functions](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/config/inngest.js): `backend/src/config/inngest.js`
- [User model](https://github.com/harshiit112/alpha_slack/blob/main/backend/src/models/user.model.js): `backend/src/models/user.model.js`

### External services

- **Clerk**
- **Stream chat and video**
- **MongoDB**
- **Inngest service**
- **Sentry**

### Other components

- **Workspace user**

## Connections

- Workspace user → App routing: uses
- App routing → Sign-in: routes
- App routing → Workspace chat: routes
- App routing → Video calls: routes
- App routing → User directory: routes
- Workspace chat → Channel tools: renders
- Workspace chat → Chat connection: connects via
- Chat connection → API client: requests token
- API client → Express app: HTTP request
- Express app → Chat routes: dispatches
- Chat routes → Auth middleware: protects
- Chat routes → Token controller: dispatches
- Token controller → Stream config: generates token
- Stream config → Stream chat and video: creates token
- Chat connection → Stream chat and video: connects chat
- Video calls → Stream chat and video: uses video
- Express app → Database connection: connects lazily
- Database connection → MongoDB: connects
- Clerk → Sign-in: authenticates
- Token setup → Clerk: gets session token
- Token setup → API client: adds bearer token
- Clerk → Inngest service: sends user events
- Express app → Event functions: serves functions
- Inngest service → Event functions: invokes events
- Event functions → Database connection: connects database
- Event functions → User model: creates or deletes
- User model → MongoDB: stores user records
- Event functions → Stream config: syncs Stream users
- Express app → Sentry: reports errors
- App routing → Sentry: reports telemetry