# js-developer-codebase/task-manager-with-admin-notification architecture

> Architecture diagram of the GitHub repository js-developer-codebase/task-manager-with-admin-notification, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/js-developer-codebase/task-manager-with-admin-notification
- Repository: https://github.com/js-developer-codebase/task-manager-with-admin-notification

## Overview

This is a MERN task-management application with account authentication, task tracking and statistics, and admin-originated real-time notifications. Users sign up or log in, then use the protected dashboard to manage and filter tasks; admins can queue broadcasts, which are persisted for later viewing and pushed to connected clients. The graph reflects documented layers and sampled calls; some frontend wiring and unsampled service implementations are represented only where the README supports the capability.

Main entry points: [`Backend/src/routes/index.ts`](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/index.ts) (API route mount), [`Backend/src/queues/notification.worker.ts`](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/queues/notification.worker.ts) (Notification worker), [`Backend/src/server.ts`](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/server.ts) (Server bootstrap), [`Frontend/src/App.tsx`](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/App.tsx) (React application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_webapp["React application<br/>[App.tsx]"]
  node_auth_pages["Login and signup<br/>[LoginPage.tsx]"]
  node_dashboard["Task dashboard<br/>[DashboardPage.tsx]"]
  node_api_client["Fetch API client<br/>[api.ts]"]
  node_socket_client["Socket client<br/>[socket.ts]"]
end

subgraph group_http["HTTP API"]
  node_api_app["Express app<br/>[app.ts]"]
  node_api_routes["API route mount<br/>[index.ts]"]
  node_auth_routes["Auth routes<br/>[auth.routes.ts]"]
  node_task_routes["Task routes<br/>[task.routes.ts]"]
  node_notification_routes["Notification routes"]
end

subgraph group_identity_tasks["Identity and Tasks"]
  node_auth_controller["Auth handlers<br/>[auth.controller.ts]"]
  node_auth_service["Auth logic<br/>[auth.service.ts]"]
  node_user_repository["User repository<br/>[user.repository.ts]"]
  node_task_controller["Task handlers<br/>[task.controller.ts]"]
  node_task_service["Task logic<br/>[task.service.ts]"]
  node_task_repository["Task repository<br/>[task.repository.ts]"]
end

subgraph group_notifications["Notifications"]
  node_notification_controller["Notification handlers"]
  node_notification_service["Notification logic"]
  node_notification_queue["Broadcast queue"]
  node_notification_worker["Notification worker"]
  node_notification_repository["Notification repository"]
  node_socket_server["Socket server<br/>[socket.ts]"]
end

subgraph group_runtime["Runtime and Storage"]
  node_server["Server bootstrap<br/>[server.ts]"]
  node_mongo[("MongoDB")]
  node_redis[("Redis")]
end

node_user(("User or admin"))

node_user -->|"uses"| node_webapp
node_webapp -->|"routes"| node_auth_pages
node_webapp -->|"protects"| node_dashboard
node_auth_pages -->|"requests"| node_api_client
node_dashboard -->|"requests"| node_api_client
node_dashboard -->|"connects"| node_socket_client
node_api_client -->|"calls API"| node_api_app
node_socket_client -->|"connects"| node_socket_server
node_api_app -->|"mounts"| node_api_routes
node_api_routes -->|"dispatches"| node_auth_routes
node_api_routes -->|"dispatches"| node_task_routes
node_api_routes -->|"dispatches"| node_notification_routes
node_auth_routes -->|"dispatches"| node_auth_controller
node_task_routes -->|"dispatches"| node_task_controller
node_notification_routes -->|"dispatches"| node_notification_controller
node_auth_controller -->|"calls"| node_auth_service
node_auth_service -->|"queries"| node_user_repository
node_task_controller -->|"calls"| node_task_service
node_task_service -->|"queries"| node_task_repository
node_notification_controller -->|"calls"| node_notification_service
node_notification_service -->|"enqueues"| node_notification_queue
node_notification_worker -->|"persists"| node_notification_repository
node_notification_worker -->|"emits"| node_socket_server
node_server -->|"serves"| node_api_app
node_server -->|"initializes"| node_socket_server
node_server -->|"starts"| node_notification_worker
node_auth_service -->|"via repository"| node_mongo
node_task_service -->|"via repository"| node_mongo
node_notification_repository -->|"reads/writes"| node_mongo
node_notification_queue -->|"queues jobs"| node_redis
node_notification_worker -->|"consumes jobs"| node_redis

click node_webapp "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/App.tsx"
click node_auth_pages "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/pages/LoginPage.tsx"
click node_dashboard "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/pages/DashboardPage.tsx"
click node_api_client "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/services/api.ts"
click node_socket_client "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/services/socket.ts"
click node_api_app "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/app.ts"
click node_api_routes "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/index.ts"
click node_auth_routes "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/auth.routes.ts"
click node_task_routes "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/task.routes.ts"
click node_notification_routes "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/notification.routes.ts"
click node_auth_controller "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/controllers/auth.controller.ts"
click node_auth_service "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/services/auth.service.ts"
click node_user_repository "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/repositories/user.repository.ts"
click node_task_controller "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/controllers/task.controller.ts"
click node_task_service "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/services/task.service.ts"
click node_task_repository "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/repositories/task.repository.ts"
click node_notification_controller "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/controllers/notification.controller.ts"
click node_notification_service "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/services/notification.service.ts"
click node_notification_queue "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/queues/notification.queue.ts"
click node_notification_worker "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/queues/notification.worker.ts"
click node_notification_repository "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/repositories/notification.repository.ts"
click node_socket_server "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/socket.ts"
click node_server "https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/server.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_webapp,node_auth_pages,node_dashboard,node_api_client,node_socket_client,node_user toneBlue
class node_api_app,node_api_routes,node_auth_routes,node_task_routes,node_notification_routes toneAmber
class node_auth_controller,node_auth_service,node_user_repository,node_task_controller,node_task_service,node_task_repository toneMint
class node_notification_controller,node_notification_service,node_notification_queue,node_notification_worker,node_notification_repository,node_socket_server toneRose
class node_server,node_mongo,node_redis toneIndigo
```

## Components

### Frontend

- [React application](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/App.tsx): `Frontend/src/App.tsx`
- [Login and signup](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/pages/LoginPage.tsx): `Frontend/src/pages/LoginPage.tsx`
- [Task dashboard](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/pages/DashboardPage.tsx): `Frontend/src/pages/DashboardPage.tsx`
- [Fetch API client](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/services/api.ts): `Frontend/src/services/api.ts`
- [Socket client](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Frontend/src/services/socket.ts): `Frontend/src/services/socket.ts`

### HTTP API

- [Express app](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/app.ts): `Backend/src/app.ts`
- [API route mount](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/index.ts): `Backend/src/routes/index.ts`
- [Auth routes](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/auth.routes.ts): `Backend/src/routes/auth.routes.ts`
- [Task routes](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/task.routes.ts): `Backend/src/routes/task.routes.ts`
- [Notification routes](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/routes/notification.routes.ts): `Backend/src/routes/notification.routes.ts`

### Identity and Tasks

- [Auth handlers](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/controllers/auth.controller.ts): `Backend/src/controllers/auth.controller.ts`
- [Auth logic](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/services/auth.service.ts): `Backend/src/services/auth.service.ts`
- [User repository](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/repositories/user.repository.ts): `Backend/src/repositories/user.repository.ts`
- [Task handlers](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/controllers/task.controller.ts): `Backend/src/controllers/task.controller.ts`
- [Task logic](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/services/task.service.ts): `Backend/src/services/task.service.ts`
- [Task repository](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/repositories/task.repository.ts): `Backend/src/repositories/task.repository.ts`

### Notifications

- [Notification handlers](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/controllers/notification.controller.ts): `Backend/src/controllers/notification.controller.ts`
- [Notification logic](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/services/notification.service.ts): `Backend/src/services/notification.service.ts`
- [Broadcast queue](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/queues/notification.queue.ts): `Backend/src/queues/notification.queue.ts`
- [Notification worker](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/queues/notification.worker.ts): `Backend/src/queues/notification.worker.ts`
- [Notification repository](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/repositories/notification.repository.ts): `Backend/src/repositories/notification.repository.ts`
- [Socket server](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/socket.ts): `Backend/src/socket.ts`

### Runtime and Storage

- [Server bootstrap](https://github.com/js-developer-codebase/task-manager-with-admin-notification/blob/main/Backend/src/server.ts): `Backend/src/server.ts`
- **MongoDB**
- **Redis**

### Other components

- **User or admin**

## Connections

- User or admin → React application: uses
- React application → Login and signup: routes
- React application → Task dashboard: protects
- Login and signup → Fetch API client: requests
- Task dashboard → Fetch API client: requests
- Task dashboard → Socket client: connects
- Fetch API client → Express app: calls API
- Socket client → Socket server: connects
- Express app → API route mount: mounts
- API route mount → Auth routes: dispatches
- API route mount → Task routes: dispatches
- API route mount → Notification routes: dispatches
- Auth routes → Auth handlers: dispatches
- Task routes → Task handlers: dispatches
- Notification routes → Notification handlers: dispatches
- Auth handlers → Auth logic: calls
- Auth logic → User repository: queries
- Task handlers → Task logic: calls
- Task logic → Task repository: queries
- Notification handlers → Notification logic: calls
- Notification logic → Broadcast queue: enqueues
- Notification worker → Notification repository: persists
- Notification worker → Socket server: emits
- Server bootstrap → Express app: serves
- Server bootstrap → Socket server: initializes
- Server bootstrap → Notification worker: starts
- Auth logic → MongoDB: via repository
- Task logic → MongoDB: via repository
- Notification repository → MongoDB: reads/writes
- Broadcast queue → Redis: queues jobs
- Notification worker → Redis: consumes jobs