# adityaraj-r/syncspace architecture

> Architecture diagram of the GitHub repository adityaraj-r/syncspace, 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/adityaraj-r/syncspace
- Repository: https://github.com/adityaraj-r/syncspace

## Overview

SyncSpace is a language-exchange social app: users sign up, complete a language profile, discover and connect with friends, then chat or call. The frontend routes users through those stages and calls a JSON API; the backend authenticates requests, updates user and friendship records, and issues Stream tokens. README-documented chat reactions, typing indicators, group calls, screen sharing, and recording are represented at the documented integration boundary; their implementation details are not shown in the excerpts.

Main entry points: [`frontend/src/App.jsx`](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/App.jsx) (Route and access), [`frontend/src/lib/api.js`](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/lib/api.js) (API client), [`backend/src/server.js`](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/server.js) (HTTP server), [`backend/src/middlewares/auth.middleware.js`](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/middlewares/auth.middleware.js) (JWT protection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client experience"]
  node_app["Route and access<br/>[App.jsx]"]
  node_api_client["API client<br/>[api.js]"]
  node_theme["Theme state<br/>[useThemeStore.js]"]
end

subgraph group_identity["Identity and profiles"]
  node_auth_pages["Sign-in and signup<br/>[LoginPage.jsx]"]
  node_onboard_page["Profile onboarding<br/>[OnBoardingpage.jsx]"]
  node_auth_query["Session query<br/>[useAuthUser.js]"]
  node_auth_controller["Auth and onboarding<br/>[auth.controller.js]"]
  node_auth_middleware["JWT protection<br/>[auth.middleware.js]"]
  node_user_model[("User records<br/>[User.js]")]
end

subgraph group_social["Language exchange"]
  node_home_page["Discovery home<br/>[Homepage.jsx]"]
  node_friends_page["Friends<br/>[FriendsPage.jsx]"]
  node_notifications["Requests and notices"]
  node_user_controller["Matching and requests<br/>[user.controller.js]"]
  node_request_model[("Friend requests<br/>[FriendRequest.js]")]
end

subgraph group_realtime["Realtime communication"]
  node_chat_page["Chat interface<br/>[Chatpage.jsx]"]
  node_call_page["Call interface<br/>[Callpage.jsx]"]
  node_chat_controller["Stream token<br/>[chat.controller.js]"]
end

subgraph group_backend["Backend API"]
  node_express_app["HTTP server<br/>[server.js]"]
  node_auth_routes["Auth routes<br/>[auth.route.js]"]
  node_user_routes["User routes<br/>[user.route.js]"]
  node_chat_routes["Chat routes<br/>[chat.route.js]"]
end

node_visitor(("Visitor"))
node_mongo[("MongoDB")]
node_stream{{"Stream chat and video"}}

node_visitor -->|"opens app"| node_app
node_app -->|"routes to"| node_auth_pages
node_app -->|"routes to"| node_onboard_page
node_app -->|"routes to"| node_home_page
node_app -->|"routes to"| node_friends_page
node_app -->|"routes to"| node_notifications
node_app -->|"routes to"| node_chat_page
node_app -->|"routes to"| node_call_page
node_app -->|"checks session"| node_auth_query
node_app -->|"reads theme"| node_theme
node_auth_pages -->|"submits credentials"| node_api_client
node_onboard_page -->|"saves profile"| node_api_client
node_auth_query -->|"loads session"| node_api_client
node_home_page -->|"fetches matches"| node_api_client
node_friends_page -->|"fetches friends"| node_api_client
node_notifications -->|"fetches requests"| node_api_client
node_chat_page -->|"gets token"| node_api_client
node_call_page -->|"gets token"| node_api_client
node_api_client -.->|"HTTP requests"| node_express_app
node_express_app -->|"mounts auth"| node_auth_routes
node_express_app -->|"mounts users"| node_user_routes
node_express_app -->|"mounts chat"| node_chat_routes
node_auth_routes -->|"dispatches"| node_auth_controller
node_auth_routes -->|"protects routes"| node_auth_middleware
node_user_routes -->|"dispatches"| node_user_controller
node_user_routes -->|"protects routes"| node_auth_middleware
node_chat_routes -->|"dispatches"| node_chat_controller
node_chat_routes -->|"protects route"| node_auth_middleware
node_auth_controller -->|"reads and updates"| node_user_model
node_auth_controller -->|"upserts user"| node_stream
node_auth_middleware -->|"loads user"| node_user_model
node_user_controller -->|"queries friends"| node_user_model
node_user_controller -->|"manages requests"| node_request_model
node_chat_controller -->|"creates token"| node_stream
node_express_app -->|"connects database"| node_mongo

click node_app "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/App.jsx"
click node_auth_pages "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/LoginPage.jsx"
click node_onboard_page "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/OnBoardingpage.jsx"
click node_home_page "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/Homepage.jsx"
click node_friends_page "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/FriendsPage.jsx"
click node_notifications "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/Notificationpage.jsx"
click node_chat_page "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/Chatpage.jsx"
click node_call_page "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/Callpage.jsx"
click node_api_client "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/lib/api.js"
click node_auth_query "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/hooks/useAuthUser.js"
click node_theme "https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/store/useThemeStore.js"
click node_express_app "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/server.js"
click node_auth_routes "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/routes/auth.route.js"
click node_user_routes "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/routes/user.route.js"
click node_chat_routes "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/routes/chat.route.js"
click node_auth_controller "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/controllers/auth.controller.js"
click node_auth_middleware "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/middlewares/auth.middleware.js"
click node_user_controller "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/controllers/user.controller.js"
click node_chat_controller "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/controllers/chat.controller.js"
click node_user_model "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/models/User.js"
click node_request_model "https://github.com/adityaraj-r/syncspace/blob/main/backend/src/models/FriendRequest.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_api_client,node_theme toneBlue
class node_auth_pages,node_onboard_page,node_auth_query,node_auth_controller,node_auth_middleware,node_user_model,node_mongo toneAmber
class node_home_page,node_friends_page,node_notifications,node_user_controller,node_request_model toneMint
class node_chat_page,node_call_page,node_chat_controller toneRose
class node_express_app,node_auth_routes,node_user_routes,node_chat_routes,node_visitor,node_stream toneIndigo
```

## Components

### Client experience

- [Route and access](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [API client](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/lib/api.js): `frontend/src/lib/api.js`
- [Theme state](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/store/useThemeStore.js): `frontend/src/store/useThemeStore.js`

### Identity and profiles

- [Sign-in and signup](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/LoginPage.jsx): `frontend/src/pages/LoginPage.jsx`
- [Profile onboarding](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/OnBoardingpage.jsx): `frontend/src/pages/OnBoardingpage.jsx`
- [Session query](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/hooks/useAuthUser.js): `frontend/src/hooks/useAuthUser.js`
- [Auth and onboarding](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/controllers/auth.controller.js): `backend/src/controllers/auth.controller.js`
- [JWT protection](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/middlewares/auth.middleware.js): `backend/src/middlewares/auth.middleware.js`
- [User records](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/models/User.js): `backend/src/models/User.js`

### Language exchange

- [Discovery home](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/Homepage.jsx): `frontend/src/pages/Homepage.jsx`
- [Friends](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/FriendsPage.jsx): `frontend/src/pages/FriendsPage.jsx`
- [Requests and notices](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/Notificationpage.jsx): `frontend/src/pages/Notificationpage.jsx`
- [Matching and requests](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/controllers/user.controller.js): `backend/src/controllers/user.controller.js`
- [Friend requests](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/models/FriendRequest.js): `backend/src/models/FriendRequest.js`

### Realtime communication

- [Chat interface](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/Chatpage.jsx): `frontend/src/pages/Chatpage.jsx`
- [Call interface](https://github.com/adityaraj-r/syncspace/blob/main/frontend/src/pages/Callpage.jsx): `frontend/src/pages/Callpage.jsx`
- [Stream token](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/controllers/chat.controller.js): `backend/src/controllers/chat.controller.js`

### Backend API

- [HTTP server](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/server.js): `backend/src/server.js`
- [Auth routes](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/routes/auth.route.js): `backend/src/routes/auth.route.js`
- [User routes](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/routes/user.route.js): `backend/src/routes/user.route.js`
- [Chat routes](https://github.com/adityaraj-r/syncspace/blob/main/backend/src/routes/chat.route.js): `backend/src/routes/chat.route.js`

### Other components

- **Visitor**
- **MongoDB**
- **Stream chat and video**

## Connections

- Visitor → Route and access: opens app (evidence: `frontend/src/App.jsx`)
- Route and access → Sign-in and signup: routes to (evidence: `frontend/src/App.jsx`)
- Route and access → Profile onboarding: routes to (evidence: `frontend/src/App.jsx`)
- Route and access → Discovery home: routes to (evidence: `frontend/src/App.jsx`)
- Route and access → Friends: routes to (evidence: `frontend/src/App.jsx`)
- Route and access → Requests and notices: routes to (evidence: `frontend/src/App.jsx`)
- Route and access → Chat interface: routes to (evidence: `frontend/src/App.jsx`)
- Route and access → Call interface: routes to (evidence: `frontend/src/App.jsx`)
- Route and access → Session query: checks session (evidence: `frontend/src/App.jsx`)
- Route and access → Theme state: reads theme (evidence: `frontend/src/App.jsx`)
- Sign-in and signup → API client: submits credentials (evidence: `frontend/src/lib/api.js`)
- Profile onboarding → API client: saves profile (evidence: `frontend/src/lib/api.js`)
- Session query → API client: loads session (evidence: `frontend/src/hooks/useAuthUser.js`)
- Discovery home → API client: fetches matches (evidence: `frontend/src/pages/Homepage.jsx`)
- Friends → API client: fetches friends (evidence: `frontend/src/pages/FriendsPage.jsx`)
- Requests and notices → API client: fetches requests (evidence: `frontend/src/pages/Notificationpage.jsx`)
- Chat interface → API client: gets token (evidence: `frontend/src/pages/Chatpage.jsx`)
- Call interface → API client: gets token (evidence: `frontend/src/pages/Callpage.jsx`)
- API client → HTTP server: HTTP requests (evidence: `frontend/src/lib/api.js`)
- HTTP server → Auth routes: mounts auth (evidence: `backend/src/server.js`)
- HTTP server → User routes: mounts users (evidence: `backend/src/server.js`)
- HTTP server → Chat routes: mounts chat (evidence: `backend/src/server.js`)
- Auth routes → Auth and onboarding: dispatches (evidence: `backend/src/routes/auth.route.js`)
- Auth routes → JWT protection: protects routes (evidence: `backend/src/routes/auth.route.js`)
- User routes → Matching and requests: dispatches (evidence: `backend/src/routes/user.route.js`)
- User routes → JWT protection: protects routes (evidence: `backend/src/routes/user.route.js`)
- Chat routes → Stream token: dispatches (evidence: `backend/src/routes/chat.route.js`)
- Chat routes → JWT protection: protects route (evidence: `backend/src/routes/chat.route.js`)
- Auth and onboarding → User records: reads and updates (evidence: `backend/src/controllers/auth.controller.js`)
- Auth and onboarding → Stream chat and video: upserts user (evidence: `backend/src/controllers/auth.controller.js`)
- JWT protection → User records: loads user (evidence: `backend/src/middlewares/auth.middleware.js`)
- Matching and requests → User records: queries friends (evidence: `backend/src/controllers/user.controller.js`)
- Matching and requests → Friend requests: manages requests (evidence: `backend/src/controllers/user.controller.js`)
- Stream token → Stream chat and video: creates token (evidence: `backend/src/controllers/chat.controller.js`)
- HTTP server → MongoDB: connects database (evidence: `backend/src/server.js`)