How manish-9245/orbit works
Purpose and runtime
Orbit is a Next.js 14 App Router video-conferencing application. It provides authenticated users with instant, scheduled, personal-room, and joined meetings, backed by Stream’s real-time video SDK and Clerk authentication. It runs as a TypeScript React application on Node.js 18+; Bun or npm installs dependencies.
Paths: app/layout.tsx, package.json, .env.example
Application entry and route topology
The root layout establishes global styling and application-level providers. Route groups separate unauthenticated Clerk sign-in/sign-up screens from authenticated product routes. The home area exposes dashboard, upcoming, previous, and recordings views; a dynamic meeting route resolves and joins a specific call.
Paths: app/layout.tsx, app/(auth)/sign-in/[[...sign-in]]/page.tsx, app/(root)/meeting/[id]/page.tsx
Authentication boundary
Clerk owns user identity and sign-in/sign-up UI. Middleware is the request-level access boundary for protected routes, while authenticated layouts/pages consume the current identity to scope Stream client usage and meeting behavior.
Paths: middleware.ts, app/(auth)/sign-up/[[...sign-up]]/page.tsx, app/(root)/layout.tsx
Stream client integration
A dedicated provider initializes and supplies the Stream video client to the authenticated React tree. Stream is the external real-time service for call state, participant media, chat, screen sharing, recordings, and scheduled-call metadata. Required deployment secrets/keys include Clerk credentials plus Stream API key and secret.
Paths: providers/stream-client-provider.tsx, .env.example, app/(root)/layout.tsx
Meeting lifecycle
The dashboard presents meeting types and invokes modal/setup flows. User actions create, schedule, join, or start calls through server actions; then navigation reaches the dynamic meeting page. That page obtains the call by ID, performs setup/join handling, and renders the live meeting room with call controls including ending the call.
Paths: components/meeting-type-list.tsx, components/modals/meeting-modal.tsx, actions/stream.actions.ts
Call retrieval and history views
Client hooks encapsulate Stream call queries: one resolves an individual call and another obtains categorized call collections. The home subroutes render these results as upcoming meetings, previous calls, and recordings, using shared call/meeting cards. This creates a boundary between Stream query state and presentational route components.
Paths: hooks/use-get-call-by-id.ts, hooks/use-get-calls.ts, app/(root)/(home)/upcoming/page.tsx
Live meeting UI and shared shell
The meeting experience is composed from a setup stage and an in-call room stage, with a focused end-call control. The authenticated shell provides desktop and mobile navigation; reusable UI primitives supply dialogs, sheets, inputs, toasts, and buttons. Tailwind and shadcn/Radix-style components handle responsive presentation rather than a separate backend UI service.
Paths: components/meeting-setup.tsx, components/meeting-room.tsx, components/navbar.tsx
Main entry points: middleware.ts Auth middleware · layout.tsx Authenticated layout · page.tsx Dynamic meeting route · stream.actions.ts Call server actions
Components 18
Next.js application
App Router product routes and shared UI.
- Root layout · Installs global styling and application providers.
app/layout.tsx - Authenticated layout · Scopes product pages to the signed-in user.
app/(root)/layout.tsx - Navigation shell · Desktop and mobile authenticated navigation.
components/navbar.tsx - Meeting dashboard · Presents available meeting types.
components/meeting-type-list.tsx - Meeting modal · Collects create, schedule, or join inputs.
components/modals/meeting-modal.tsx - Upcoming meetings · Renders categorized calls with shared cards.
app/(root)/(home)/upcoming/page.tsx - Dynamic meeting route · Loads and joins the requested call.
app/(root)/meeting/[id]/page.tsx - Meeting setup · Handles the pre-join stage.
components/meeting-setup.tsx - Live meeting room · Renders participant media and call controls.
components/meeting-room.tsx
Authentication
Clerk identity and protected-route boundary.
- Sign-in / sign-up · Clerk-hosted authentication UI routes.
app/(auth)/sign-in/[[...sign-in]]/page.tsx - Auth middleware · Guards protected application routes.
middleware.ts
Stream video integration
Client provisioning, call operations, and real-time service.
- Call server actions · Creates, schedules, joins, and starts Stream calls.
actions/stream.actions.ts - Call collection queries · Loads upcoming, previous, and recorded calls.
hooks/use-get-calls.ts - Call lookup · Resolves an individual Stream call by ID.
hooks/use-get-call-by-id.ts - Stream client provider · Initializes and supplies the Stream client.
providers/stream-client-provider.tsx - Stream Video · Provides call state, media, chat, recordings, and metadata.
Other components
- Node.js / Next.js runtime · Next.js 14 TypeScript application.
package.json - Deployment secrets · Clerk credentials and Stream API keys/secrets.
.env.example
Connections 20
- Node.js / Next.js runtime → Root layout: runs
- Root layout → Auth middleware: request protection
- Auth middleware → Sign-in / sign-up: unauthenticated access
- Auth middleware → Authenticated layout: authenticated access
- Authenticated layout → Navigation shell: renders
- Authenticated layout → Stream client provider: provides identity-scoped client
- Stream client provider → Stream Video: connects to
- Deployment secrets → Stream client provider: configures
- Deployment secrets → Auth middleware: configures Clerk
- Meeting dashboard → Meeting modal: opens
- Meeting modal → Call server actions: submits lifecycle action
- Call server actions → Stream Video: creates or updates calls
- Call server actions → Dynamic meeting route: navigates to call
- Upcoming meetings → Call collection queries: loads calls
- Call collection queries → Stream Video: queries categorized calls
- Dynamic meeting route → Call lookup: resolves call ID
- Call lookup → Stream Video: retrieves call
- Dynamic meeting route → Meeting setup: renders pre-join
- Meeting setup → Live meeting room: joins call
- Live meeting room → Stream Video: media and call controls