# anwesha24-code/zoom architecture

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

- Interactive diagram: https://gitdiagram.com/anwesha24-code/zoom
- Repository: https://github.com/anwesha24-code/zoom

## Overview

1. This repository is a two-tier Zoom-like meeting app: a React frontend and a Node.js backend. The frontend owns the user experience for auth, meeting entry, live video, and history; the backend owns user/data APIs and real-time socket coordination.

2. The frontend lives under `frontend/` and is a standard React single-page app. Its main screens are `landing`, `home`, `authentication`, `VideoMeet`, and `history`, which suggests the app flow is: arrive, sign in, join or host a meeting, then review meeting history.

3. Authentication state is centralized in `frontend/src/contexts/AuthContext.jsx`, with `withAuth.jsx` acting as a route guard/wrapper. That means protected screens such as meeting and history views are gated on client-side auth state rather than being left completely open.

4. The live meeting experience is isolated in `frontend/src/pages/VideoMeet.jsx` with supporting UI modules and styles. This is the likely browser-side surface for camera/microphone/video room interactions, while the actual real-time coordination is pushed to the backend socket layer.

5. The backend is a Node service organized around `src/app.js`, `routes`, `controllers`, and `models`. `users.routes.js` exposes the user-facing HTTP API, `user.controller.js` contains the request handling logic, and the `user.model.js` / `meeting.model.js` files define persistence boundaries for identity and meeting records.

6. `src/controllers/socketManager.js` is the key real-time subsystem. Its presence implies a socket-based channel, likely used for signaling, room join/leave events, and meeting coordination that must happen outside normal request/response HTTP flow.

7. The data path is split between two communication styles: HTTP for user/account/meeting metadata, and sockets for live session orchestration. In a typical flow, the frontend authenticates over HTTP, then opens a socket connection for the meeting room once the user enters `VideoMeet`.

8. Meeting history is a separate domain slice, surfaced in `frontend/src/pages/history.jsx` and backed by the meeting model on the server. This indicates the app persists meeting events or summaries rather than treating sessions as purely ephemeral.

9. The repo contains duplicated backend structure at both `Backend/src/` and root-level `src/`, with matching controllers, models, and routes. That usually means one copy is a deployment variant or an older mirrored backend; for architecture diagrams, treat them as the same server boundary unless there is evidence they are deployed separately.

10. Styling and UI composition are local to the frontend and do not appear to be split into a design system or external component library. The app uses a small set of reusable UI pieces under `pages/components` plus CSS modules and context-driven state.

11. The only clearly defined external boundary from the file tree is the browser-to-server interface. No separate queue, microservice, or third-party backend is evident from the tree, so the architecture is best drawn as a client app talking to a single backend service with both REST and socket endpoints.

12. In diagram terms, the core subsystems are: React UI, auth/state context, protected routes, HTTP API controllers, socket manager, and persistence models. The important arrows are browser UI to HTTP API, browser UI to socket channel, and backend controllers/socket manager to the data models.

Main entry points: [`frontend/src/App.js`](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/App.js) (React App), [`frontend/src/utils/withAuth.jsx`](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/utils/withAuth.jsx) (Route Guard), [`src/app.js`](https://github.com/anwesha24-code/zoom/blob/main/src/app.js) (Backend App), [`src/controllers/user.controller.js`](https://github.com/anwesha24-code/zoom/blob/main/src/controllers/user.controller.js) (User Controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_frontend_app["React App<br/>SPA shell<br/>[App.js]"]
  node_landing_page["Landing<br/>entry screen<br/>[landing.jsx]"]
  node_home_page["Home<br/>meeting hub<br/>[home.jsx]"]
  node_auth_page["Sign In<br/>auth screen<br/>[authentication.jsx]"]
  node_video_meet_page["Video Meet<br/>room UI<br/>[VideoMeet.jsx]"]
  node_history_page["History<br/>[history.jsx]"]
  node_auth_context(("Auth Context<br/>client state<br/>[AuthContext.jsx]"))
  node_with_auth["Route Guard<br/>protected routing<br/>[withAuth.jsx]"]
  node_ui_components["UI Pieces<br/>shared components<br/>[SignInCard.js]"]
end

subgraph group_backend["Backend"]
  node_backend_app["Backend App<br/>Node service<br/>[app.js]"]
  node_user_routes["User Routes<br/>HTTP routes<br/>[users.routes.js]"]
  node_user_controller["User Controller<br/>request handlers<br/>[user.controller.js]"]
  node_socket_manager(("Socket Manager<br/>realtime layer<br/>[socketManager.js]"))
  node_user_model[("User Model<br/>persistence model<br/>[user.model.js]")]
  node_meeting_model[("Meeting Model<br/>persistence model<br/>[meeting.model.js]")]
end

node_frontend_app -->|"routes to"| node_landing_page
node_frontend_app -->|"routes to"| node_home_page
node_frontend_app -->|"routes to"| node_auth_page
node_frontend_app -->|"routes to"| node_video_meet_page
node_frontend_app -->|"routes to"| node_history_page
node_auth_context -->|"powers"| node_with_auth
node_with_auth -->|"guards"| node_video_meet_page
node_with_auth -->|"guards"| node_history_page
node_with_auth -->|"guards"| node_home_page
node_ui_components -->|"composes"| node_auth_page
node_video_meet_page -->|"HTTP + socket"| node_backend_app
node_history_page -->|"HTTP"| node_backend_app
node_backend_app -->|"mounts"| node_user_routes
node_user_routes -->|"delegates"| node_user_controller
node_user_controller -->|"reads/writes"| node_user_model
node_user_controller -->|"reads/writes"| node_meeting_model
node_backend_app -->|"initializes"| node_socket_manager
node_socket_manager -->|"updates"| node_meeting_model

click node_frontend_app "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/App.js"
click node_landing_page "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/landing.jsx"
click node_home_page "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/home.jsx"
click node_auth_page "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/authentication.jsx"
click node_video_meet_page "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/VideoMeet.jsx"
click node_history_page "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/history.jsx"
click node_auth_context "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/contexts/AuthContext.jsx"
click node_with_auth "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/utils/withAuth.jsx"
click node_ui_components "https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/components/SignInCard.js"
click node_backend_app "https://github.com/anwesha24-code/zoom/blob/main/src/app.js"
click node_user_routes "https://github.com/anwesha24-code/zoom/blob/main/src/routes/users.routes.js"
click node_user_controller "https://github.com/anwesha24-code/zoom/blob/main/src/controllers/user.controller.js"
click node_socket_manager "https://github.com/anwesha24-code/zoom/blob/main/src/controllers/socketManager.js"
click node_user_model "https://github.com/anwesha24-code/zoom/blob/main/src/models/user.model.js"
click node_meeting_model "https://github.com/anwesha24-code/zoom/blob/main/src/models/meeting.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_frontend_app,node_landing_page,node_home_page,node_auth_page,node_video_meet_page,node_history_page,node_auth_context,node_with_auth,node_ui_components toneBlue
class node_backend_app,node_user_routes,node_user_controller,node_socket_manager,node_user_model,node_meeting_model toneAmber
```

## Components

### Frontend

React single-page app for auth, meeting entry, live room, and history

- [React App](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/App.js): SPA shell · Top-level client app and routing entry · `frontend/src/App.js`
- [Landing](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/landing.jsx): entry screen · Public arrival and entry screen · `frontend/src/pages/landing.jsx`
- [Home](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/home.jsx): meeting hub · Main signed-in meeting hub · `frontend/src/pages/home.jsx`
- [Sign In](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/authentication.jsx): auth screen · Authentication and sign-in UI · `frontend/src/pages/authentication.jsx`
- [Video Meet](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/VideoMeet.jsx): room UI · Live meeting experience with media controls · `frontend/src/pages/VideoMeet.jsx`
- [History](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/history.jsx): history screen · Meeting history and past session view · `frontend/src/pages/history.jsx`
- [Auth Context](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/contexts/AuthContext.jsx): client state · Centralized authentication state and session context · `frontend/src/contexts/AuthContext.jsx`
- [Route Guard](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/utils/withAuth.jsx): protected routing · Wraps protected pages behind auth state · `frontend/src/utils/withAuth.jsx`
- [UI Pieces](https://github.com/anwesha24-code/zoom/blob/main/frontend/src/pages/components/SignInCard.js): shared components · Reusable sign-in and page composition components · `frontend/src/pages/components/SignInCard.js`

### Backend

Node service exposing HTTP APIs and real-time socket coordination

- [Backend App](https://github.com/anwesha24-code/zoom/blob/main/src/app.js): Node service · Server entry and API composition; mirrored under Backend/src · `src/app.js`
- [User Routes](https://github.com/anwesha24-code/zoom/blob/main/src/routes/users.routes.js): HTTP routes · User-facing REST endpoints · `src/routes/users.routes.js`
- [User Controller](https://github.com/anwesha24-code/zoom/blob/main/src/controllers/user.controller.js): request handlers · HTTP request handling and business logic · `src/controllers/user.controller.js`
- [Socket Manager](https://github.com/anwesha24-code/zoom/blob/main/src/controllers/socketManager.js): realtime layer · Real-time room signaling and meeting coordination · `src/controllers/socketManager.js`
- [User Model](https://github.com/anwesha24-code/zoom/blob/main/src/models/user.model.js): persistence model · User identity and account persistence boundary · `src/models/user.model.js`
- [Meeting Model](https://github.com/anwesha24-code/zoom/blob/main/src/models/meeting.model.js): persistence model · Meeting records and history persistence boundary · `src/models/meeting.model.js`

## Connections

- React App → Landing: routes to · Client navigation starts at landing
- React App → Home: routes to · Signed-in landing area
- React App → Sign In: routes to · Authentication entry
- React App → Video Meet: routes to · Live meeting screen
- React App → History: routes to · Past meetings view
- Auth Context → Route Guard: powers · Auth state gates protected routes
- Route Guard → Video Meet: guards · Protects live meeting room
- Route Guard → History: guards · Protects history view
- Route Guard → Home: guards · Protects signed-in area
- UI Pieces → Sign In: composes · Sign-in UI is assembled from shared pieces
- Video Meet → Backend App: HTTP + socket · Authenticates over HTTP and joins meeting over realtime channel
- History → Backend App: HTTP · Loads meeting history from server
- Backend App → User Routes: mounts · API route registration
- User Routes → User Controller: delegates · Routes dispatch to request handlers
- User Controller → User Model: reads/writes · User data persistence
- User Controller → Meeting Model: reads/writes · Meeting metadata and history persistence
- Backend App → Socket Manager: initializes · Realtime coordination subsystem
- Socket Manager → Meeting Model: updates · Socket-driven meeting events may persist to history