How js-developer-codebase/task-manager-with-admin-notification works
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: index.ts API route mount · notification.worker.ts Notification worker · server.ts Server bootstrap · App.tsx React application
Components 26
Frontend
- React application
Frontend/src/App.tsx - Login and signup
Frontend/src/pages/LoginPage.tsx - Task dashboard
Frontend/src/pages/DashboardPage.tsx - Fetch API client
Frontend/src/services/api.ts - Socket client
Frontend/src/services/socket.ts
HTTP API
- Express app
Backend/src/app.ts - API route mount
Backend/src/routes/index.ts - Auth routes
Backend/src/routes/auth.routes.ts - Task routes
Backend/src/routes/task.routes.ts - Notification routes
Backend/src/routes/notification.routes.ts
Identity and Tasks
- Auth handlers
Backend/src/controllers/auth.controller.ts - Auth logic
Backend/src/services/auth.service.ts - User repository
Backend/src/repositories/user.repository.ts - Task handlers
Backend/src/controllers/task.controller.ts - Task logic
Backend/src/services/task.service.ts - Task repository
Backend/src/repositories/task.repository.ts
Notifications
- Notification handlers
Backend/src/controllers/notification.controller.ts - Notification logic
Backend/src/services/notification.service.ts - Broadcast queue
Backend/src/queues/notification.queue.ts - Notification worker
Backend/src/queues/notification.worker.ts - Notification repository
Backend/src/repositories/notification.repository.ts - Socket server
Backend/src/socket.ts
Runtime and Storage
- Server bootstrap
Backend/src/server.ts - MongoDB
- Redis
Other components
- User or admin
Connections 31
- 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