# anoop-kumar-31/queueflow architecture

> Architecture diagram of the GitHub repository anoop-kumar-31/queueflow, 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/anoop-kumar-31/queueflow
- Repository: https://github.com/anoop-kumar-31/queueflow

## Overview

1. **Repository scope**
   - This repo is the **QueueFlow frontend only**: a React 18 + Vite single-page app that talks to an external REST API and a Socket.io backend.
   - There is no server code here; the architectural boundary is the browser UI, Redux state, and service adapters.

2. **App bootstrap**
   - `src/main.jsx` is the entry point that mounts the React app and connects it to the Redux store.
   - `src/App.jsx` is the top-level route/shell coordinator, while `src/store.js` wires together the feature slices.

3. **Routing and screen boundaries**
   - `src/pages/` contains the primary route-level screens: `Login`, `Register`, `Dashboard`, `ProjectBoard`, `TasksBoard`, `AnalyticsDashboard`, and `Profile`.
   - This suggests a role-driven SPA where authenticated users move between workspace, task, analytics, and profile views rather than separate server-rendered pages.

4. **Global application shell**
   - `src/components/AppLayout.jsx` plus the `src/components/layout/` folder form the persistent UI shell.
   - The shared header/sidebar area includes `AppSidebar`, `SearchBar`, `NotificationBell`, and `ThemeToggle`, which implies navigation, global search, real-time alerts, and theme state are always available across authenticated screens.

5. **State management layer**
   - Redux Toolkit is the central state boundary in `src/features/`.
   - The slices are split by domain: `authSlice.js` for session/user state, `projectSlice.js` for workspace/project data, and `tasksSlice.js` for task/board state.
   - This is the main client-side source of truth for both REST-fetched and socket-driven updates.

6. **Backend integration layer**
   - `src/services/api.js` is the REST adapter, likely handling CRUD, auth, project membership, tasks, and analytics fetches.
   - `src/services/socket.js` is the real-time adapter, responsible for connecting to Socket.io and broadcasting/receiving collaborative events.
   - The architecture separates request/response traffic from push-based updates instead of mixing them in components.

7. **Real-time collaboration flow**
   - User actions such as task moves, project membership changes, invite generation, and notes feed into the API and/or socket service.
   - Socket events then update Redux slices, which immediately refresh the Kanban board, notification feed, and activity timeline without a page reload.
   - This push-based loop is the core interaction model of the app.

8. **Project and task workflows**
   - Project-level actions are surfaced through modal components such as `CreateProjectModal`, `JoinProjectModal`, `GenerateInviteModal`, and `ManageAccessModal`.
   - Task-level actions are handled by `CreateTaskModal` and `TaskDetailsModal`, indicating most mutations happen in focused overlays rather than full-page forms.
   - `TasksBoard` and `ProjectBoard` are the main working surfaces for these flows.

9. **Collaboration and visibility features**
   - `ActivityTimeline.jsx` represents the event stream for workspace history.
   - `NotificationBell.jsx` provides unread, real-time awareness of teammate actions.
   - These are separate from the main board, which helps distinguish operational work from audit/visibility surfaces.

10. **Analytics and reporting**
   - `AnalyticsDashboard.jsx` is a dedicated reporting surface for workflow intelligence.
   - It likely consumes task/project state from the store and/or API responses to render bottlenecks, completion trends, and workload views.
   - This is a read-heavy subsystem distinct from the task mutation path.

11. **Authentication boundary**
   - `Login.jsx` and `Register.jsx` isolate unauthenticated access from the rest of the workspace.
   - The rest of the app appears to assume an authenticated session and role-aware UI, so auth is a gateway dependency for all project/task features.

12. **Shared UI and loading state**
   - `Loading.jsx` is a standalone boot/loading experience, separate from normal navigation.
   - `src/App.css` and `src/index.css` provide app-wide styling, while `src/assets/` holds static UI assets.
   - Visual presentation is likely utility-first with Tailwind, but the architectural point is that styling is centralized and shared across all screens.

13. **External systems**
   - The frontend depends on a backend REST API and a Socket.io server, configured through the Vite environment variable noted in the README.
   - The app is built and served as a static SPA via Vite, so all business logic shown here is client-side orchestration around those backend services.

14. **High-level data flow**
   - User interaction starts in a page or modal, dispatches Redux actions, calls the REST API for persistence, and then receives socket broadcasts for cross-user synchronization.
   - The store updates drive the visible UI: boards, timelines, analytics, notifications, and access management all read from the same shared client state.

Main entry points: [`src/App.jsx`](https://github.com/anoop-kumar-31/queueflow/blob/main/src/App.jsx) (App), [`src/components/AppLayout.jsx`](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/AppLayout.jsx) (AppLayout), [`src/pages/ProjectBoard.jsx`](https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/ProjectBoard.jsx) (Project Board), [`src/store.js`](https://github.com/anoop-kumar-31/queueflow/blob/main/src/store.js) (Store)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_shell["UI Shell"]
  node_layout["AppLayout<br/>shell<br/>[AppLayout.jsx]"]
  node_sidebar["Sidebar<br/>nav<br/>[AppSidebar.jsx]"]
  node_search["Search<br/>[SearchBar.jsx]"]
  node_notify(("Alerts<br/>realtime ui"))
  node_theme(("Theme<br/>ui control<br/>[ThemeToggle.jsx]"))
  node_timeline["Timeline<br/>activity feed"]
  node_loading(("Loading<br/>boot screen<br/>[Loading.jsx]"))
  node_create_project["Create Project<br/>modal"]
  node_join_project["Join Project<br/>modal"]
  node_invite["Invite<br/>modal"]
  node_access["Access<br/>modal"]
  node_create_task["Create Task<br/>modal"]
  node_task_details["Task Details<br/>modal"]
end

subgraph group_group_pages["Pages"]
  node_login["Login<br/>auth page<br/>[Login.jsx]"]
  node_register["Register<br/>auth page<br/>[Register.jsx]"]
  node_dashboard["Dashboard<br/>workspace page<br/>[Dashboard.jsx]"]
  node_project_board["Project Board<br/>workspace page<br/>[ProjectBoard.jsx]"]
  node_tasks_board["Tasks Board<br/>workspace page<br/>[TasksBoard.jsx]"]
  node_analytics["Analytics<br/>reporting page"]
  node_profile["Profile<br/>account page<br/>[Profile.jsx]"]
end

subgraph group_group_state["State"]
  node_store["Store<br/>redux setup<br/>[store.js]"]
  node_auth_slice["Auth<br/>slice<br/>[authSlice.js]"]
  node_project_slice["Projects<br/>slice<br/>[projectSlice.js]"]
  node_tasks_slice["Tasks<br/>slice<br/>[tasksSlice.js]"]
end

subgraph group_group_services["Services"]
  node_api["API<br/>rest adapter<br/>[api.js]"]
  node_socket["Socket<br/>realtime adapter<br/>[socket.js]"]
end

subgraph group_group_boot["Bootstrap"]
  node_main["main<br/>entry<br/>[main.jsx]"]
  node_app["App<br/>router shell<br/>[App.jsx]"]
end

node_main -->|"mounts"| node_app
node_main -->|"provides store"| node_store
node_app -->|"renders shell"| node_layout
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_register
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_project_board
node_app -->|"routes to"| node_tasks_board
node_app -->|"routes to"| node_analytics
node_app -->|"routes to"| node_profile
node_layout -->|"contains"| node_sidebar
node_layout -->|"contains"| node_search
node_layout -->|"contains"| node_notify
node_layout -->|"contains"| node_theme
node_layout -->|"shows"| node_timeline
node_store -->|"includes"| node_auth_slice
node_store -->|"includes"| node_project_slice
node_store -->|"includes"| node_tasks_slice
node_auth_slice -->|"syncs via"| node_api
node_project_slice -->|"syncs via"| node_api
node_tasks_slice -->|"syncs via"| node_api
node_project_slice -->|"receives events"| node_socket
node_tasks_slice -->|"receives events"| node_socket
node_socket -->|"drives"| node_notify
node_socket -->|"feeds"| node_timeline
node_project_board -->|"opens"| node_create_project
node_project_board -->|"opens"| node_join_project
node_project_board -->|"opens"| node_invite
node_project_board -->|"opens"| node_access
node_tasks_board -->|"opens"| node_create_task
node_tasks_board -->|"opens"| node_task_details
node_loading -.->|"precedes"| node_main

click node_main "https://github.com/anoop-kumar-31/queueflow/blob/main/src/main.jsx"
click node_app "https://github.com/anoop-kumar-31/queueflow/blob/main/src/App.jsx"
click node_store "https://github.com/anoop-kumar-31/queueflow/blob/main/src/store.js"
click node_auth_slice "https://github.com/anoop-kumar-31/queueflow/blob/main/src/features/authSlice.js"
click node_project_slice "https://github.com/anoop-kumar-31/queueflow/blob/main/src/features/projectSlice.js"
click node_tasks_slice "https://github.com/anoop-kumar-31/queueflow/blob/main/src/features/tasksSlice.js"
click node_api "https://github.com/anoop-kumar-31/queueflow/blob/main/src/services/api.js"
click node_socket "https://github.com/anoop-kumar-31/queueflow/blob/main/src/services/socket.js"
click node_layout "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/AppLayout.jsx"
click node_sidebar "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/layout/AppSidebar.jsx"
click node_search "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/layout/SearchBar.jsx"
click node_notify "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/layout/NotificationBell.jsx"
click node_theme "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/layout/ThemeToggle.jsx"
click node_timeline "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/ActivityTimeline.jsx"
click node_loading "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/Loading.jsx"
click node_login "https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/Login.jsx"
click node_register "https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/Register.jsx"
click node_dashboard "https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/Dashboard.jsx"
click node_project_board "https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/ProjectBoard.jsx"
click node_tasks_board "https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/TasksBoard.jsx"
click node_analytics "https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/AnalyticsDashboard.jsx"
click node_profile "https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/Profile.jsx"
click node_create_project "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/CreateProjectModal.jsx"
click node_join_project "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/JoinProjectModal.jsx"
click node_invite "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/GenerateInviteModal.jsx"
click node_access "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/ManageAccessModal.jsx"
click node_create_task "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/CreateTaskModal.jsx"
click node_task_details "https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/TaskDetailsModal.jsx"

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_layout,node_sidebar,node_search,node_notify,node_theme,node_timeline,node_loading,node_create_project,node_join_project,node_invite,node_access,node_create_task,node_task_details toneBlue
class node_login,node_register,node_dashboard,node_project_board,node_tasks_board,node_analytics,node_profile toneAmber
class node_store,node_auth_slice,node_project_slice,node_tasks_slice toneMint
class node_api,node_socket toneRose
class node_main,node_app toneIndigo
```

## Components

### UI Shell

Persistent app chrome and shared overlays

- [AppLayout](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/AppLayout.jsx): shell · Persistent authenticated application layout · `src/components/AppLayout.jsx`
- [Sidebar](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/layout/AppSidebar.jsx): nav · Primary workspace navigation · `src/components/layout/AppSidebar.jsx`
- [Search](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/layout/SearchBar.jsx): global search · Shared search entry in the shell · `src/components/layout/SearchBar.jsx`
- [Alerts](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/layout/NotificationBell.jsx): realtime ui · Unread notifications and event awareness · `src/components/layout/NotificationBell.jsx`
- [Theme](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/layout/ThemeToggle.jsx): ui control · Global theme switching · `src/components/layout/ThemeToggle.jsx`
- [Timeline](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/ActivityTimeline.jsx): activity feed · Workspace history and event stream · `src/components/ActivityTimeline.jsx`
- [Loading](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/Loading.jsx): boot screen · Startup and loading state · `src/components/Loading.jsx`
- [Create Project](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/CreateProjectModal.jsx): modal · Project creation workflow · `src/components/CreateProjectModal.jsx`
- [Join Project](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/JoinProjectModal.jsx): modal · Project join and invite entry · `src/components/JoinProjectModal.jsx`
- [Invite](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/GenerateInviteModal.jsx): modal · Invite link generation · `src/components/GenerateInviteModal.jsx`
- [Access](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/ManageAccessModal.jsx): modal · Membership and permission management · `src/components/ManageAccessModal.jsx`
- [Create Task](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/CreateTaskModal.jsx): modal · Task creation workflow · `src/components/CreateTaskModal.jsx`
- [Task Details](https://github.com/anoop-kumar-31/queueflow/blob/main/src/components/TaskDetailsModal.jsx): modal · Task inspection and editing · `src/components/TaskDetailsModal.jsx`

### Pages

Route-level screens

- [Login](https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/Login.jsx): auth page · Authenticated entry gate · `src/pages/Login.jsx`
- [Register](https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/Register.jsx): auth page · Account creation screen · `src/pages/Register.jsx`
- [Dashboard](https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/Dashboard.jsx): workspace page · Authenticated landing view · `src/pages/Dashboard.jsx`
- [Project Board](https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/ProjectBoard.jsx): workspace page · Project-level collaboration surface · `src/pages/ProjectBoard.jsx`
- [Tasks Board](https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/TasksBoard.jsx): workspace page · Task planning and execution board · `src/pages/TasksBoard.jsx`
- [Analytics](https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/AnalyticsDashboard.jsx): reporting page · Workflow metrics and trends · `src/pages/AnalyticsDashboard.jsx`
- [Profile](https://github.com/anoop-kumar-31/queueflow/blob/main/src/pages/Profile.jsx): account page · User account and preferences · `src/pages/Profile.jsx`

### State

Redux store and domain slices

- [Store](https://github.com/anoop-kumar-31/queueflow/blob/main/src/store.js): redux setup · Configures the client state container · `src/store.js`
- [Auth](https://github.com/anoop-kumar-31/queueflow/blob/main/src/features/authSlice.js): slice · Session and user state · `src/features/authSlice.js`
- [Projects](https://github.com/anoop-kumar-31/queueflow/blob/main/src/features/projectSlice.js): slice · Workspace and membership state · `src/features/projectSlice.js`
- [Tasks](https://github.com/anoop-kumar-31/queueflow/blob/main/src/features/tasksSlice.js): slice · Board and task state · `src/features/tasksSlice.js`

### Services

REST and realtime adapters

- [API](https://github.com/anoop-kumar-31/queueflow/blob/main/src/services/api.js): rest adapter · REST client for persistence and reads · `src/services/api.js`
- [Socket](https://github.com/anoop-kumar-31/queueflow/blob/main/src/services/socket.js): realtime adapter · Socket.io connection and event handling · `src/services/socket.js`

### Bootstrap

Entry and app composition

- [main](https://github.com/anoop-kumar-31/queueflow/blob/main/src/main.jsx): entry · Mounts React and connects the store · `src/main.jsx`
- [App](https://github.com/anoop-kumar-31/queueflow/blob/main/src/App.jsx): router shell · Top-level route and screen coordinator · `src/App.jsx`

## Connections

- main → App: mounts · Bootstraps the React application
- main → Store: provides store · Connects Redux to the app
- App → AppLayout: renders shell · Wraps authenticated content in persistent chrome
- App → Login: routes to · Unauthenticated gateway
- App → Register: routes to · Account creation route
- App → Dashboard: routes to · Default workspace view
- App → Project Board: routes to · Project collaboration view
- App → Tasks Board: routes to · Task board view
- App → Analytics: routes to · Reporting view
- App → Profile: routes to · User account view
- AppLayout → Sidebar: contains · Primary navigation
- AppLayout → Search: contains · Global search entry
- AppLayout → Alerts: contains · Real-time notification indicator
- AppLayout → Theme: contains · Theme switching control
- AppLayout → Timeline: shows · Activity and history feed
- Store → Auth: includes · Session state
- Store → Projects: includes · Project state
- Store → Tasks: includes · Task state
- Auth → API: syncs via · Auth and session persistence
- Projects → API: syncs via · Project CRUD and membership reads
- Tasks → API: syncs via · Task persistence and fetches
- Projects → Socket: receives events · Collaborative project updates
- Tasks → Socket: receives events · Realtime task and board updates
- Socket → Alerts: drives · Pushes unread activity into alerts
- Socket → Timeline: feeds · Streams collaborative activity
- Project Board → Create Project: opens · Project creation overlay
- Project Board → Join Project: opens · Join workflow overlay
- Project Board → Invite: opens · Invite generation overlay
- Project Board → Access: opens · Permission management overlay
- Tasks Board → Create Task: opens · Task creation overlay
- Tasks Board → Task Details: opens · Task inspection and edit overlay
- Loading → main: precedes · Startup experience before app render