# abhishek1345/interview_app architecture

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

## Overview

Interview app architecture: users authenticate, open or join an interview, then exchange live media and collaborate through text and a shared drawing canvas. The Dashboard coordinates call setup and interview interactions; backend Socket.IO relays signaling and collaboration events, while authentication controllers persist account records. Evidence is limited to the sampled files; login, route, and some UI implementations are represented only at paths shown in the tree.

Main entry points: [`src/Dashboard.jsx`](https://github.com/abhishek1345/interview_app/blob/master/src/Dashboard.jsx) (Interview dashboard), [`backend/index.js`](https://github.com/abhishek1345/interview_app/blob/master/backend/index.js) (HTTP and Socket.IO server), [`src/socket/SocketProvider.jsx`](https://github.com/abhishek1345/interview_app/blob/master/src/socket/SocketProvider.jsx) (Socket context client), [`src/main.jsx`](https://github.com/abhishek1345/interview_app/blob/master/src/main.jsx) (React entry and routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_entry["React entry and routes<br/>[main.jsx]"]
  node_dashboard["Interview dashboard<br/>[Dashboard.jsx]"]
  node_state["Persisted user state<br/>[ReduxStore.jsx]"]
  node_newcall["Start-call modal<br/>[NewCallModal.jsx]"]
  node_joincall["Join-interview modal"]
end

subgraph group_identity["Identity and accounts"]
  node_signup["Signup and Google auth<br/>[Signup.jsx]"]
  node_login["Login screen<br/>[Login.jsx]"]
  node_firebase["Firebase authentication<br/>[firebase.jsx]"]
  node_registerroute["Registration routes<br/>[register.js]"]
  node_loginroute["Login routes<br/>[login.js]"]
  node_registercontroller["Registration controller<br/>[register.js]"]
  node_logincontroller["Login controller<br/>[login.js]"]
end

subgraph group_realtime["Interview collaboration"]
  node_peer["WebRTC peer service<br/>[peer.js]"]
  node_socketclient["Socket context client<br/>[SocketProvider.jsx]"]
  node_canvas["Shared drawing canvas<br/>[DrawingCanvas.jsx]"]
end

subgraph group_server["Backend services"]
  node_backend["HTTP and Socket.IO server<br/>[index.js]"]
  node_pgclient["Postgres client<br/>[pg.js]"]
end

node_participant(("Interview user"))
node_postgres[("PostgreSQL database")]

node_participant -->|"opens app"| node_entry
node_entry -->|"routes to"| node_signup
node_entry -->|"routes to"| node_login
node_entry -->|"routes to"| node_dashboard
node_signup -->|"dispatches login"| node_state
node_login -->|"updates user"| node_state
node_signup -->|"authenticates with"| node_firebase
node_signup -->|"posts registration"| node_backend
node_login -->|"submits login"| node_backend
node_dashboard -->|"reads user"| node_state
node_dashboard -->|"opens"| node_newcall
node_dashboard -->|"opens"| node_joincall
node_dashboard -->|"creates offers"| node_peer
node_dashboard -->|"handles answers"| node_peer
node_dashboard -->|"sends signaling"| node_socketclient
node_socketclient -->|"connects and emits"| node_backend
node_backend -->|"relays events"| node_socketclient
node_dashboard -->|"renders canvas"| node_canvas
node_canvas -->|"sends drawing events"| node_socketclient
node_socketclient -->|"delivers drawing events"| node_canvas
node_backend -->|"mounts routes"| node_registerroute
node_backend -->|"mounts routes"| node_loginroute
node_registerroute -->|"dispatches registration"| node_registercontroller
node_loginroute -->|"dispatches login"| node_logincontroller
node_registercontroller -->|"queries users"| node_pgclient
node_logincontroller -->|"queries users"| node_pgclient
node_pgclient -->|"reads and writes"| node_postgres

click node_entry "https://github.com/abhishek1345/interview_app/blob/master/src/main.jsx"
click node_dashboard "https://github.com/abhishek1345/interview_app/blob/master/src/Dashboard.jsx"
click node_signup "https://github.com/abhishek1345/interview_app/blob/master/src/Signup.jsx"
click node_login "https://github.com/abhishek1345/interview_app/blob/master/src/Login.jsx"
click node_state "https://github.com/abhishek1345/interview_app/blob/master/src/ReduxStore.jsx"
click node_firebase "https://github.com/abhishek1345/interview_app/blob/master/src/firebase.jsx"
click node_newcall "https://github.com/abhishek1345/interview_app/blob/master/src/components/NewCallModal.jsx"
click node_joincall "https://github.com/abhishek1345/interview_app/blob/master/src/components/JoinInterviewModal.jsx"
click node_peer "https://github.com/abhishek1345/interview_app/blob/master/src/service/peer.js"
click node_socketclient "https://github.com/abhishek1345/interview_app/blob/master/src/socket/SocketProvider.jsx"
click node_canvas "https://github.com/abhishek1345/interview_app/blob/master/src/components/DrawingCanvas.jsx"
click node_backend "https://github.com/abhishek1345/interview_app/blob/master/backend/index.js"
click node_registerroute "https://github.com/abhishek1345/interview_app/blob/master/backend/routes/register.js"
click node_loginroute "https://github.com/abhishek1345/interview_app/blob/master/backend/routes/login.js"
click node_registercontroller "https://github.com/abhishek1345/interview_app/blob/master/backend/controllers/register.js"
click node_logincontroller "https://github.com/abhishek1345/interview_app/blob/master/backend/controllers/login.js"
click node_pgclient "https://github.com/abhishek1345/interview_app/blob/master/backend/pg.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_dashboard,node_state,node_newcall,node_joincall,node_participant toneBlue
class node_signup,node_login,node_firebase,node_registerroute,node_loginroute,node_registercontroller,node_logincontroller,node_postgres toneAmber
class node_peer,node_socketclient,node_canvas toneMint
class node_backend,node_pgclient toneRose
```

## Components

### Web application

- [React entry and routes](https://github.com/abhishek1345/interview_app/blob/master/src/main.jsx): `src/main.jsx`
- [Interview dashboard](https://github.com/abhishek1345/interview_app/blob/master/src/Dashboard.jsx): `src/Dashboard.jsx`
- [Persisted user state](https://github.com/abhishek1345/interview_app/blob/master/src/ReduxStore.jsx): `src/ReduxStore.jsx`
- [Start-call modal](https://github.com/abhishek1345/interview_app/blob/master/src/components/NewCallModal.jsx): `src/components/NewCallModal.jsx`
- [Join-interview modal](https://github.com/abhishek1345/interview_app/blob/master/src/components/JoinInterviewModal.jsx): `src/components/JoinInterviewModal.jsx`

### Identity and accounts

- [Signup and Google auth](https://github.com/abhishek1345/interview_app/blob/master/src/Signup.jsx): `src/Signup.jsx`
- [Login screen](https://github.com/abhishek1345/interview_app/blob/master/src/Login.jsx): `src/Login.jsx`
- [Firebase authentication](https://github.com/abhishek1345/interview_app/blob/master/src/firebase.jsx): `src/firebase.jsx`
- [Registration routes](https://github.com/abhishek1345/interview_app/blob/master/backend/routes/register.js): `backend/routes/register.js`
- [Login routes](https://github.com/abhishek1345/interview_app/blob/master/backend/routes/login.js): `backend/routes/login.js`
- [Registration controller](https://github.com/abhishek1345/interview_app/blob/master/backend/controllers/register.js): `backend/controllers/register.js`
- [Login controller](https://github.com/abhishek1345/interview_app/blob/master/backend/controllers/login.js): `backend/controllers/login.js`

### Interview collaboration

- [WebRTC peer service](https://github.com/abhishek1345/interview_app/blob/master/src/service/peer.js): `src/service/peer.js`
- [Socket context client](https://github.com/abhishek1345/interview_app/blob/master/src/socket/SocketProvider.jsx): `src/socket/SocketProvider.jsx`
- [Shared drawing canvas](https://github.com/abhishek1345/interview_app/blob/master/src/components/DrawingCanvas.jsx): `src/components/DrawingCanvas.jsx`

### Backend services

- [HTTP and Socket.IO server](https://github.com/abhishek1345/interview_app/blob/master/backend/index.js): `backend/index.js`
- [Postgres client](https://github.com/abhishek1345/interview_app/blob/master/backend/pg.js): `backend/pg.js`

### Other components

- **Interview user**
- **PostgreSQL database**

## Connections

- Interview user → React entry and routes: opens app
- React entry and routes → Signup and Google auth: routes to
- React entry and routes → Login screen: routes to
- React entry and routes → Interview dashboard: routes to
- Signup and Google auth → Persisted user state: dispatches login
- Login screen → Persisted user state: updates user
- Signup and Google auth → Firebase authentication: authenticates with
- Signup and Google auth → HTTP and Socket.IO server: posts registration
- Login screen → HTTP and Socket.IO server: submits login
- Interview dashboard → Persisted user state: reads user
- Interview dashboard → Start-call modal: opens
- Interview dashboard → Join-interview modal: opens
- Interview dashboard → WebRTC peer service: creates offers
- Interview dashboard → WebRTC peer service: handles answers
- Interview dashboard → Socket context client: sends signaling
- Socket context client → HTTP and Socket.IO server: connects and emits
- HTTP and Socket.IO server → Socket context client: relays events
- Interview dashboard → Shared drawing canvas: renders canvas
- Shared drawing canvas → Socket context client: sends drawing events
- Socket context client → Shared drawing canvas: delivers drawing events
- HTTP and Socket.IO server → Registration routes: mounts routes
- HTTP and Socket.IO server → Login routes: mounts routes
- Registration routes → Registration controller: dispatches registration
- Login routes → Login controller: dispatches login
- Registration controller → Postgres client: queries users
- Login controller → Postgres client: queries users
- Postgres client → PostgreSQL database: reads and writes