# pratham-mehta07/syncup architecture

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

- Interactive diagram: https://gitdiagram.com/pratham-mehta07/syncup
- Repository: https://github.com/pratham-mehta07/syncup

## Overview

SyncUp is a browser-based video-meeting application. Users enter through the React app, authenticate or choose a meeting room, then use the meeting page for peer video/audio, in-meeting chat, and host-managed admission. The backend serves account APIs and coordinates room membership, signaling, participant updates, and chat over Socket.IO; account records are stored in MongoDB. The README also describes room-code management and responsive UI. Chat and several page implementations were not sampled, so their internal wiring is shown only where supported by the documented product flow.

Main entry points: [`frontend/src/pages/VideoMeet.jsx`](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/VideoMeet.jsx) (Meeting page), [`frontend/src/App.jsx`](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/App.jsx) (App routes), [`frontend/src/main.jsx`](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/main.jsx) (React entry), [`frontend/src/pages/authentication.jsx`](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/authentication.jsx) (Auth screen)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_entry["React entry<br/>[main.jsx]"]
  node_router["App routes<br/>[App.jsx]"]
  node_landing["Landing page<br/>[landing.jsx]"]
  node_home["Home page<br/>[home.jsx]"]
  node_authpage["Auth screen<br/>[authentication.jsx]"]
end

subgraph group_identity["Account services"]
  node_authstate["Auth context<br/>[AuthContext.jsx]"]
  node_guard["Auth guard<br/>[withAuth.jsx]"]
  node_api["Express API<br/>[app.js]"]
  node_useroutes["User routes<br/>[users.routes.js]"]
  node_usercontroller["Account controller<br/>[user.controller.js]"]
  node_usermodel["User model<br/>[user.model.js]"]
end

subgraph group_meetings["Meeting coordination"]
  node_meetingpage["Meeting page<br/>[VideoMeet.jsx]"]
  node_chatpage["Chat page<br/>[Chat.jsx]"]
  node_socketmanager["Room coordinator<br/>[socketmanager.js]"]
end

subgraph group_realtime["Realtime media"]
  node_socketio["Socket.IO transport"]
  node_browsermedia["Browser media"]
end

node_visitor(("Meeting user"))
node_mongodb[("MongoDB")]
node_peers(("Meeting peers"))

node_visitor -->|"opens"| node_entry
node_entry -->|"renders"| node_router
node_router -->|"routes"| node_landing
node_router -->|"routes"| node_home
node_router -->|"routes"| node_authpage
node_router -->|"routes"| node_meetingpage
node_authpage -->|"submits credentials"| node_authstate
node_authstate -->|"posts account data"| node_api
node_api -->|"mounts routes"| node_useroutes
node_useroutes -->|"dispatches"| node_usercontroller
node_usercontroller -->|"reads and saves"| node_usermodel
node_usermodel -->|"persists users"| node_mongodb
node_meetingpage -->|"checks session"| node_guard
node_meetingpage -->|"connects and emits"| node_socketio
node_socketio -->|"dispatches events"| node_socketmanager
node_socketmanager -->|"broadcasts events"| node_socketio
node_meetingpage -->|"captures media"| node_browsermedia
node_meetingpage -->|"exchanges WebRTC media"| node_peers
node_meetingpage -.->|"opens chat"| node_chatpage

click node_entry "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/main.jsx"
click node_router "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/App.jsx"
click node_landing "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/landing.jsx"
click node_home "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/home.jsx"
click node_authpage "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/authentication.jsx"
click node_authstate "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/context/AuthContext.jsx"
click node_guard "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/utils/withAuth.jsx"
click node_meetingpage "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/VideoMeet.jsx"
click node_chatpage "https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/Chat.jsx"
click node_api "https://github.com/pratham-mehta07/syncup/blob/main/backend/src/app.js"
click node_useroutes "https://github.com/pratham-mehta07/syncup/blob/main/backend/src/routes/users.routes.js"
click node_usercontroller "https://github.com/pratham-mehta07/syncup/blob/main/backend/src/controllers/user.controller.js"
click node_usermodel "https://github.com/pratham-mehta07/syncup/blob/main/backend/src/models/user.model.js"
click node_socketmanager "https://github.com/pratham-mehta07/syncup/blob/main/backend/src/controllers/socketmanager.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_entry,node_router,node_landing,node_home,node_authpage,node_visitor toneBlue
class node_authstate,node_guard,node_api,node_useroutes,node_usercontroller,node_usermodel,node_mongodb toneAmber
class node_meetingpage,node_chatpage,node_socketmanager toneMint
class node_socketio,node_browsermedia toneRose
class node_peers toneIndigo
```

## Components

### Web client

- [React entry](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [App routes](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Landing page](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/landing.jsx): `frontend/src/pages/landing.jsx`
- [Home page](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/home.jsx): `frontend/src/pages/home.jsx`
- [Auth screen](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/authentication.jsx): `frontend/src/pages/authentication.jsx`

### Account services

- [Auth context](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/context/AuthContext.jsx): `frontend/src/context/AuthContext.jsx`
- [Auth guard](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/utils/withAuth.jsx): `frontend/src/utils/withAuth.jsx`
- [Express API](https://github.com/pratham-mehta07/syncup/blob/main/backend/src/app.js): `backend/src/app.js`
- [User routes](https://github.com/pratham-mehta07/syncup/blob/main/backend/src/routes/users.routes.js): `backend/src/routes/users.routes.js`
- [Account controller](https://github.com/pratham-mehta07/syncup/blob/main/backend/src/controllers/user.controller.js): `backend/src/controllers/user.controller.js`
- [User model](https://github.com/pratham-mehta07/syncup/blob/main/backend/src/models/user.model.js): `backend/src/models/user.model.js`

### Meeting coordination

- [Meeting page](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/VideoMeet.jsx): `frontend/src/pages/VideoMeet.jsx`
- [Chat page](https://github.com/pratham-mehta07/syncup/blob/main/frontend/src/pages/Chat.jsx): `frontend/src/pages/Chat.jsx`
- [Room coordinator](https://github.com/pratham-mehta07/syncup/blob/main/backend/src/controllers/socketmanager.js): `backend/src/controllers/socketmanager.js`

### Realtime media

- **Socket.IO transport**
- **Browser media**

### Other components

- **Meeting user**
- **MongoDB**
- **Meeting peers**

## Connections

- Meeting user → React entry: opens
- React entry → App routes: renders
- App routes → Landing page: routes
- App routes → Home page: routes
- App routes → Auth screen: routes
- App routes → Meeting page: routes
- Auth screen → Auth context: submits credentials
- Auth context → Express API: posts account data
- Express API → User routes: mounts routes
- User routes → Account controller: dispatches
- Account controller → User model: reads and saves
- User model → MongoDB: persists users
- Meeting page → Auth guard: checks session
- Meeting page → Socket.IO transport: connects and emits
- Socket.IO transport → Room coordinator: dispatches events
- Room coordinator → Socket.IO transport: broadcasts events
- Meeting page → Browser media: captures media
- Meeting page → Meeting peers: exchanges WebRTC media
- Meeting page → Chat page: opens chat