# mrzorawar/connecto architecture

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

- Interactive diagram: https://gitdiagram.com/mrzorawar/connecto
- Repository: https://github.com/mrzorawar/connecto

## Overview

1. **Project shape**
   - This is a **Next.js App Router** application for video conferencing.
   - The architecture is split into three major areas: **auth routes**, **authenticated dashboard routes**, and **meeting-room routes**.

2. **Route and layout boundaries**
   - `src/app/layout.tsx` is the top-level shell for the whole app.
   - `src/app/(auth)` contains Clerk-driven sign-in and sign-up pages.
   - `src/app/(root)` contains the authenticated product UI, including dashboard and meeting pages.
   - `src/app/(root)/layout.tsx` and `src/app/(root)/dashboard/(home)/layout.tsx` provide nested layout boundaries for the private app sections.

3. **Authentication boundary**
   - Authentication is handled by **Clerk**.
   - The route structure with `sign-in/[[...sign-in]]` and `sign-up/[[...sign-up]]` is a strong signal that Clerk owns the auth UI and routing.
   - `src/middleware.ts` is the app’s route guard, enforcing that private routes stay behind auth and that unauthenticated users are sent to login flows.

4. **Video provider boundary**
   - `src/providers/StreamClientProvider.tsx` is the central integration point for **Stream Video SDK**.
   - This provider likely initializes the Stream client using the authenticated user identity and makes the client available to meeting components.
   - This keeps Stream setup out of page components and creates a clean boundary between app state and real-time call infrastructure.

5. **Server-side Stream token flow**
   - `src/actions/stream.actions.ts` is the backend-facing trust boundary for Stream.
   - The presence of a dedicated action file suggests the app generates or fetches Stream auth/token data server-side rather than exposing secrets to the browser.
   - This is the main data path for secure meeting access: user logs in via Clerk, then the app obtains Stream credentials through a server action.

6. **Dashboard subsystem**
   - The dashboard lives under `src/app/(root)/dashboard/(home)`.
   - It includes separate pages for **home**, **personal room**, **upcoming meetings**, and **recordings**.
   - This area is the “meeting management” subsystem: it does not host live calls, but surfaces meeting metadata and user-facing entry points.

7. **Meeting subsystem**
   - `src/app/(root)/meeting/[id]/page.tsx` is the live meeting entry point.
   - The `[id]` route parameter is the meeting-room identifier, which ties the URL directly to a Stream call/room.
   - Components like `MeetingRoom`, `MeetingSetup`, `MeetingModal`, and `EndCallButton` indicate the lifecycle: create/join, configure devices, run the call, then end it.

8. **Meeting data access**
   - `src/hooks/useGetCalls.ts` and `src/hooks/useGetCallById.ts` are the main data-fetching hooks for call history and individual meetings.
   - These hooks likely power the dashboard lists and meeting detail views, keeping fetch logic separate from presentation components.
   - `src/components/CallList.tsx`, `MeetingCard.tsx`, and `src/components/new/RecordingCard.tsx` are UI consumers of that data.

9. **UI composition**
   - The UI is built from a mix of custom components and ShadCN primitives in `src/components/ui`.
   - Feature-level components such as `Navbar`, `MobileNav`, `HomeCard`, `MeetingTypeList`, and the `new/` folder components suggest a reusable, compositional design system for both dashboard and marketing-style pages.
   - The app uses Tailwind and ShadCN as the primary presentation layer.

10. **Cross-cutting state and feedback**
   - Toast/alert infrastructure exists in `src/components/Alert.tsx`, `src/components/ui/toast.tsx`, `src/components/ui/toaster.tsx`, and `src/hooks/use-toast.ts`.
   - `src/components/Loader.tsx` handles async/loading states.
   - These are shared cross-cutting concerns used across auth, dashboard, and meeting flows.

11. **Static/config layer**
   - `src/constants/constants.ts`, `src/lib/utils.ts`, and `src/lib/mockdata.ts` hold shared configuration, helpers, and fallback data.
   - `components.json`, `tailwind.config.ts`, `postcss.config.mjs`, and `eslint.config.mjs` define UI/tooling conventions rather than runtime behavior.

12. **End-to-end runtime flow**
   - A user enters through the auth routes, is protected by middleware, lands in the dashboard, then either creates/join a meeting or opens a historical meeting record.
   - When joining a live call, the app uses the Stream provider and server action/token path to enter a room identified by the URL or selected call metadata.
   - Stream handles the actual real-time media transport; the app’s responsibility is session orchestration, meeting lifecycle UI, and history/recording surfacing.

13. **External services that shape the architecture**
   - **Clerk** is the identity system and route gatekeeper.
   - **Stream Video** is the real-time media backend and meeting-state source.
   - **Vercel** is the intended deployment target, which fits the App Router + server actions model.

14. **Diagramming takeaway**
   - The clearest architecture diagram should show three zones: **public/auth pages**, **authenticated dashboard**, and **live meeting room**.
   - Connect them through two core backend integrations: **Clerk for identity** and **Stream for call/session execution**.
   - Put `middleware` on the route edge, `StreamClientProvider` around the client runtime, and `stream.actions.ts` on the secure server boundary.

Main entry points: [`src/app/(root)/dashboard/(home)/layout.tsx`](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/layout.tsx) (Home layout), [`src/components/MeetingRoom.tsx`](https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingRoom.tsx) (Meeting room UI), [`src/app/(root)/layout.tsx`](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/layout.tsx) (Root layout), [`src/actions/stream.actions.ts`](https://github.com/mrzorawar/connecto/blob/main/src/actions/stream.actions.ts) (Stream actions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App routes"]
  node_app_shell["App shell<br/>next layout<br/>[layout.tsx]"]
  node_auth_routes["Auth routes<br/>clerk pages<br/>[page.tsx]"]
  node_root_layout["Root layout<br/>app layout<br/>[layout.tsx]"]
end

subgraph group_meeting["Meeting flow"]
  node_meeting_page["Meeting room<br/>meeting page<br/>[page.tsx]"]
  node_meeting_room["Meeting room UI<br/>call runtime<br/>[MeetingRoom.tsx]"]
  node_meeting_setup["Setup<br/>pre-call UI<br/>[MeetingSetup.tsx]"]
  node_meeting_modal["Meeting modal<br/>call UI<br/>[MeetingModal.tsx]"]
  node_end_call(("End call<br/>call control<br/>[EndCallButton.tsx]"))
end

subgraph group_dashboard["Dashboard"]
  node_home_layout["Home layout<br/>nested layout<br/>[layout.tsx]"]
  node_home_page["Home page<br/>dashboard page<br/>[page.tsx]"]
  node_personal_room["Personal room<br/>dashboard page<br/>[page.tsx]"]
  node_upcoming_page["Upcoming<br/>dashboard page<br/>[page.tsx]"]
  node_recordings_page["Recordings<br/>dashboard page<br/>[page.tsx]"]
end

subgraph group_ui["UI layer"]
  node_call_list["Call list<br/>calls UI<br/>[CallList.tsx]"]
  node_meeting_card["Meeting card<br/>summary card<br/>[MeetingCard.tsx]"]
  node_recording_card["Recording card<br/>summary card<br/>[RecordingCard.tsx]"]
  node_navbar["Navbar<br/>navigation<br/>[Navbar.tsx]"]
end

subgraph group_infra["Infra"]
  node_stream_provider["Stream provider<br/>video client"]
  node_stream_actions["Stream actions<br/>server action<br/>[stream.actions.ts]"]
  node_middleware["Route guard<br/>middleware<br/>[middleware.ts]"]
  node_calls_hook["Calls hook<br/>data hook<br/>[useGetCalls.ts]"]
  node_call_by_id_hook["Call by id<br/>data hook<br/>[useGetCallById.ts]"]
end

node_app_shell -->|"routes"| node_auth_routes
node_app_shell -->|"routes"| node_root_layout
node_middleware -->|"allows"| node_auth_routes
node_middleware -->|"protects"| node_root_layout
node_auth_routes -->|"sign-in"| node_root_layout
node_root_layout -->|"contains"| node_home_layout
node_home_layout -->|"hosts"| node_home_page
node_home_layout -->|"hosts"| node_personal_room
node_home_layout -->|"hosts"| node_upcoming_page
node_home_layout -->|"hosts"| node_recordings_page
node_home_page -->|"uses"| node_navbar
node_home_page -->|"shows"| node_call_list
node_upcoming_page -->|"loads"| node_calls_hook
node_recordings_page -->|"loads"| node_calls_hook
node_call_list -->|"renders"| node_meeting_card
node_recordings_page -->|"renders"| node_recording_card
node_meeting_page -->|"loads"| node_call_by_id_hook
node_meeting_page -->|"wraps"| node_stream_provider
node_meeting_page -->|"opens"| node_meeting_room
node_meeting_room -->|"pre-join"| node_meeting_setup
node_meeting_room -->|"controls"| node_end_call
node_meeting_modal -->|"requests token"| node_stream_actions
node_meeting_room -->|"authorizes"| node_stream_actions
node_stream_provider -->|"authenticates"| node_stream_actions
node_calls_hook -->|"fetches"| node_stream_actions

click node_app_shell "https://github.com/mrzorawar/connecto/blob/main/src/app/layout.tsx"
click node_auth_routes "https://github.com/mrzorawar/connecto/blob/main/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx"
click node_root_layout "https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/layout.tsx"
click node_home_layout "https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/layout.tsx"
click node_home_page "https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/page.tsx"
click node_personal_room "https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/personal-room/page.tsx"
click node_upcoming_page "https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/upcoming/page.tsx"
click node_recordings_page "https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/recordings/page.tsx"
click node_meeting_page "https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/meeting/[id]/page.tsx"
click node_meeting_room "https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingRoom.tsx"
click node_meeting_setup "https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingSetup.tsx"
click node_meeting_modal "https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingModal.tsx"
click node_end_call "https://github.com/mrzorawar/connecto/blob/main/src/components/EndCallButton.tsx"
click node_call_list "https://github.com/mrzorawar/connecto/blob/main/src/components/CallList.tsx"
click node_meeting_card "https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingCard.tsx"
click node_recording_card "https://github.com/mrzorawar/connecto/blob/main/src/components/new/RecordingCard.tsx"
click node_navbar "https://github.com/mrzorawar/connecto/blob/main/src/components/Navbar.tsx"
click node_stream_provider "https://github.com/mrzorawar/connecto/blob/main/src/providers/StreamClientProvider.tsx"
click node_stream_actions "https://github.com/mrzorawar/connecto/blob/main/src/actions/stream.actions.ts"
click node_middleware "https://github.com/mrzorawar/connecto/blob/main/src/middleware.ts"
click node_calls_hook "https://github.com/mrzorawar/connecto/blob/main/src/hooks/useGetCalls.ts"
click node_call_by_id_hook "https://github.com/mrzorawar/connecto/blob/main/src/hooks/useGetCallById.ts"

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_shell,node_auth_routes,node_root_layout toneBlue
class node_meeting_page,node_meeting_room,node_meeting_setup,node_meeting_modal,node_end_call toneAmber
class node_home_layout,node_home_page,node_personal_room,node_upcoming_page,node_recordings_page toneMint
class node_call_list,node_meeting_card,node_recording_card,node_navbar toneRose
class node_stream_provider,node_stream_actions,node_middleware,node_calls_hook,node_call_by_id_hook toneIndigo
```

## Components

### App routes

Next.js route segments and layout boundaries.

- [App shell](https://github.com/mrzorawar/connecto/blob/main/src/app/layout.tsx): next layout · Top-level application layout for the entire Next.js app. · `src/app/layout.tsx`
- [Auth routes](https://github.com/mrzorawar/connecto/blob/main/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx): clerk pages · Sign-in and sign-up route group owned by Clerk. · `src/app/(auth)/sign-in/[[...sign-in]]/page.tsx`
- [Root layout](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/layout.tsx): app layout · Authenticated app layout boundary for the private product area. · `src/app/(root)/layout.tsx`

### Meeting flow

Live call entry, setup, and in-call UI.

- [Meeting room](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/meeting/[id]/page.tsx): meeting page · Live meeting entry route keyed by meeting id. · `src/app/(root)/meeting/[id]/page.tsx`
- [Meeting room UI](https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingRoom.tsx): call runtime · Main in-call component that hosts the live meeting experience. · `src/components/MeetingRoom.tsx`
- [Setup](https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingSetup.tsx): pre-call UI · Device and pre-join configuration before entering a call. · `src/components/MeetingSetup.tsx`
- [Meeting modal](https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingModal.tsx): call UI · Modal flow for creating or joining meetings. · `src/components/MeetingModal.tsx`
- [End call](https://github.com/mrzorawar/connecto/blob/main/src/components/EndCallButton.tsx): call control · Control for terminating an active meeting. · `src/components/EndCallButton.tsx`

### Dashboard

Authenticated meeting management pages.

- [Home layout](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/layout.tsx): nested layout · Dashboard home section layout for the authenticated area. · `src/app/(root)/dashboard/(home)/layout.tsx`
- [Home page](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/page.tsx): dashboard page · Main dashboard landing page. · `src/app/(root)/dashboard/(home)/page.tsx`
- [Personal room](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/personal-room/page.tsx): dashboard page · User-specific meeting room page in the dashboard. · `src/app/(root)/dashboard/(home)/personal-room/page.tsx`
- [Upcoming](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/upcoming/page.tsx): dashboard page · Upcoming meetings view. · `src/app/(root)/dashboard/(home)/upcoming/page.tsx`
- [Recordings](https://github.com/mrzorawar/connecto/blob/main/src/app/(root)/dashboard/(home)/recordings/page.tsx): dashboard page · Recordings history view. · `src/app/(root)/dashboard/(home)/recordings/page.tsx`

### UI layer

Reusable components and presentation primitives.

- [Call list](https://github.com/mrzorawar/connecto/blob/main/src/components/CallList.tsx): calls UI · List view for historical or scheduled calls. · `src/components/CallList.tsx`
- [Meeting card](https://github.com/mrzorawar/connecto/blob/main/src/components/MeetingCard.tsx): summary card · Reusable card for meeting summaries and entry points. · `src/components/MeetingCard.tsx`
- [Recording card](https://github.com/mrzorawar/connecto/blob/main/src/components/new/RecordingCard.tsx): summary card · Card used to present recording items. · `src/components/new/RecordingCard.tsx`
- [Navbar](https://github.com/mrzorawar/connecto/blob/main/src/components/Navbar.tsx): navigation · Primary navigation for the authenticated UI. · `src/components/Navbar.tsx`

### Infra

Shared cross-cutting and integration boundaries.

- [Stream provider](https://github.com/mrzorawar/connecto/blob/main/src/providers/StreamClientProvider.tsx): video client · Client-side Stream Video SDK provider and runtime boundary. · `src/providers/StreamClientProvider.tsx`
- [Stream actions](https://github.com/mrzorawar/connecto/blob/main/src/actions/stream.actions.ts): server action · Server-side trust boundary for Stream credential and token flow. · `src/actions/stream.actions.ts`
- [Route guard](https://github.com/mrzorawar/connecto/blob/main/src/middleware.ts): middleware · Authentication gate that protects private routes and redirects unauthenticated users. · `src/middleware.ts`
- [Calls hook](https://github.com/mrzorawar/connecto/blob/main/src/hooks/useGetCalls.ts): data hook · Fetches call history and meeting collections for the dashboard. · `src/hooks/useGetCalls.ts`
- [Call by id](https://github.com/mrzorawar/connecto/blob/main/src/hooks/useGetCallById.ts): data hook · Fetches a single call or meeting by identifier. · `src/hooks/useGetCallById.ts`

## Connections

- App shell → Auth routes: routes · Top-level shell renders public auth pages.
- App shell → Root layout: routes · Top-level shell renders authenticated app routes.
- Route guard → Auth routes: allows · Unauthenticated users can access Clerk auth flows.
- Route guard → Root layout: protects · Private routes are guarded behind authentication.
- Auth routes → Root layout: sign-in · Successful login transitions into the private app.
- Root layout → Home layout: contains · Authenticated layout nests the dashboard home section.
- Home layout → Home page: hosts · Home layout frames the dashboard landing page.
- Home layout → Personal room: hosts · Home layout frames the personal room page.
- Home layout → Upcoming: hosts · Home layout frames upcoming meetings.
- Home layout → Recordings: hosts · Home layout frames recordings history.
- Home page → Navbar: uses · Dashboard pages share the main navigation.
- Home page → Call list: shows · Dashboard surfaces call history and meeting items.
- Upcoming → Calls hook: loads · Upcoming meetings are populated from call data.
- Recordings → Calls hook: loads · Recordings page derives items from meeting history.
- Call list → Meeting card: renders · Call lists are composed from meeting summary cards.
- Recordings → Recording card: renders · Recordings are shown using dedicated recording cards.
- Meeting room → Call by id: loads · Meeting route resolves the call by URL id.
- Meeting room → Stream provider: wraps · Live meeting UI runs inside the Stream client provider.
- Meeting room → Meeting room UI: opens · The meeting route mounts the live room experience.
- Meeting room UI → Setup: pre-join · Users configure devices before entering the call.
- Meeting room UI → End call: controls · In-call UI exposes call termination controls.
- Meeting modal → Stream actions: requests token · Create/join flows rely on server-side Stream credentials.
- Meeting room UI → Stream actions: authorizes · Live call participation depends on secure Stream session data.
- Stream provider → Stream actions: authenticates · Client provider consumes server-generated Stream access data.
- Calls hook → Stream actions: fetches · Meeting lists may depend on Stream-backed server data.