# tausif-islam-sheik/task-manager-app architecture

> Architecture diagram of the GitHub repository tausif-islam-sheik/task-manager-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tausif-islam-sheik/task-manager-app
- Repository: https://github.com/tausif-islam-sheik/task-manager-app

## Overview

1. **Overall shape**
   - This is a two-process monorepo: a **Next.js client** in `client/` and an **Express API server** in `server/`.
   - The browser talks only to the frontend on `http://localhost:3000`; the frontend then calls the backend API on `http://localhost:5000`.

2. **Frontend boundary**
   - The frontend is a **Next.js App Router** app (`client/src/app`) using React and Tailwind CSS.
   - `layout.tsx` and `globals.css` define the app shell and global styling, while `page.tsx` is the main task manager screen.
   - UI building blocks live under `client/src/components/ui`, including a reusable button component.

3. **Frontend data access**
   - API communication is centralized in `client/src/lib/api.ts`, which is the main boundary between React state/UI and the backend.
   - The client likely performs fetch-based CRUD calls from this layer, keeping the UI components focused on rendering and user interaction.
   - `client/src/lib/utils.ts` supports shared frontend utilities rather than business logic.

4. **Backend boundary**
   - The backend is a standalone **Node.js + Express** service under `server/`.
   - `server/src/app.ts` is the Express application setup, `server/src/server.ts` is the runtime entrypoint, and `server/api/index.ts` provides an API entry for serverless/deployment integration.
   - `server/vercel.json` indicates the server is prepared for Vercel-style deployment as well as local Node execution.

5. **API structure**
   - Route definitions are isolated in `server/src/app/routes/task.routes.ts`.
   - The API matches the README contract:
     - `GET /api/tasks`
     - `POST /api/tasks`
     - `PATCH /api/tasks/:id`
     - `DELETE /api/tasks/:id`
   - This route layer is the main HTTP boundary for all task operations.

6. **Task data flow**
   - Tasks are created in the frontend, sent to the API, stored in server memory, and then returned to the UI for rendering.
   - Updates and deletes follow the same round trip: user action → frontend fetch call → Express route → in-memory mutation → refreshed client state.
   - The UI groups tasks by status, so task status is the key field driving both display and mutation behavior.

7. **Persistence model**
   - There is **no database**.
   - Task records are held in an **in-memory array** on the server, so all data is lost when the backend restarts.
   - Task identifiers are generated with **UUID**, which matters because all update/delete operations target tasks by `id`.

8. **Cross-origin and local development**
   - The backend is configured with **CORS** restricted to `http://localhost:3000`, which is the frontend development origin.
   - This explicit cross-origin boundary is important to the architecture: the client and server are separate apps, not a single integrated runtime.

9. **Configuration and environment**
   - `server/src/app/config/env.ts` centralizes runtime configuration, likely including port and allowed origin values.
   - On the frontend, `next.config.ts`, `postcss.config.mjs`, and `eslint.config.mjs` support build/tooling rather than application logic.

10. **Deployment/runtime split**
   - The client is a standard Next.js app, built and run with the Node/Next toolchain.
   - The server is an Express app that can run locally as a Node process or be adapted to serverless hosting via the `api/` entrypoint and `vercel.json`.
   - This makes the system architecture “frontend app + stateless API service,” with state contained only in process memory.

11. **What to show in an architecture diagram**
   - Draw two separate boxes: **Next.js UI** and **Express Task API**.
   - Connect the UI to the API with fetch calls from `client/src/lib/api.ts`.
   - Show a single in-memory task store inside the API box.
   - Emphasize that CRUD operations all pass through the API, and the client does not persist data itself.

Main entry points: [`server/src/app.ts`](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/app.ts) (Express app), [`server/src/app/routes/task.routes.ts`](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/app/routes/task.routes.ts) (Task routes), [`client/src/app/page.tsx`](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/app/page.tsx) (Task screen), [`client/src/app/layout.tsx`](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/app/layout.tsx) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Next.js Client"]
  node_client_app_layout["App shell<br/>Next.js layout<br/>[layout.tsx]"]
  node_client_app_page["Task screen<br/>Next.js page<br/>[page.tsx]"]
  node_client_app_styles["Global styles<br/>CSS<br/>[globals.css]"]
  node_client_lib_api["API client<br/>fetch layer<br/>[api.ts]"]
  node_client_components_button["Button<br/>UI component<br/>[button.tsx]"]
  node_client_lib_utils["Utilities<br/>frontend helpers<br/>[utils.ts]"]
end

subgraph group_server["Express API"]
  node_server_runtime["Server entry<br/>Node entrypoint<br/>[server.ts]"]
  node_server_app["Express app<br/>Express setup<br/>[app.ts]"]
  node_server_env["Config<br/>[env.ts]"]
  node_server_routes["Task routes<br/>HTTP routes<br/>[task.routes.ts]"]
  node_server_store[("Task store<br/>in-memory state")]
  node_server_api_entry["API entry<br/>serverless entry<br/>[index.ts]"]
  node_server_vercel["Vercel config<br/>deployment config<br/>[vercel.json]"]
end

node_client_app_page -->|"fetch CRUD"| node_client_lib_api
node_client_app_page -->|"uses"| node_client_components_button
node_client_app_layout -->|"renders"| node_client_app_page
node_client_app_layout -->|"loads"| node_client_app_styles
node_client_lib_api -->|"HTTP calls"| node_server_routes
node_server_runtime -->|"boots"| node_server_app
node_server_app -->|"reads"| node_server_env
node_server_app -->|"mounts"| node_server_routes
node_server_routes -->|"mutates"| node_server_store
node_server_routes -.->|"UUID ids"| node_server_routes
node_server_api_entry -->|"adapts"| node_server_app
node_server_vercel -->|"routes to"| node_server_api_entry
node_server_app -->|"serves"| node_server_store
node_client_app_page -.->|"styles"| node_client_app_styles

click node_client_app_layout "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/app/layout.tsx"
click node_client_app_page "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/app/page.tsx"
click node_client_app_styles "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/app/globals.css"
click node_client_lib_api "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/lib/api.ts"
click node_client_components_button "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/components/ui/button.tsx"
click node_client_lib_utils "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/lib/utils.ts"
click node_server_runtime "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/server.ts"
click node_server_app "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/app.ts"
click node_server_env "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/app/config/env.ts"
click node_server_routes "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/app/routes/task.routes.ts"
click node_server_api_entry "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/api/index.ts"
click node_server_vercel "https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/vercel.json"

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_client_app_layout,node_client_app_page,node_client_app_styles,node_client_lib_api,node_client_components_button,node_client_lib_utils toneBlue
class node_server_runtime,node_server_app,node_server_env,node_server_routes,node_server_store,node_server_api_entry,node_server_vercel toneAmber
```

## Components

### Next.js Client

Browser-facing task UI and frontend data access

- [App shell](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/app/layout.tsx): Next.js layout · Root app shell and global styles · `client/src/app/layout.tsx`
- [Task screen](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/app/page.tsx): Next.js page · Main task manager interface · `client/src/app/page.tsx`
- [Global styles](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/app/globals.css): CSS · Tailwind/global styling entry · `client/src/app/globals.css`
- [API client](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/lib/api.ts): fetch layer · Centralized client-server communication · `client/src/lib/api.ts`
- [Button](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/components/ui/button.tsx): UI component · Reusable interactive control · `client/src/components/ui/button.tsx`
- [Utilities](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/client/src/lib/utils.ts): frontend helpers · Shared client-side utility functions · `client/src/lib/utils.ts`

### Express API

Task HTTP API and in-memory backend runtime

- [Server entry](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/server.ts): Node entrypoint · Starts the Express process · `server/src/server.ts`
- [Express app](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/app.ts): Express setup · Application wiring and middleware boundary · `server/src/app.ts`
- [Config](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/app/config/env.ts): runtime config · Centralized environment and port settings · `server/src/app/config/env.ts`
- [Task routes](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/src/app/routes/task.routes.ts): HTTP routes · CRUD endpoints for task operations · `server/src/app/routes/task.routes.ts`
- **Task store**: in-memory state · Process-local task array with UUID ids
- [API entry](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/api/index.ts): serverless entry · Deployment-facing API adapter · `server/api/index.ts`
- [Vercel config](https://github.com/tausif-islam-sheik/task-manager-app/blob/main/server/vercel.json): deployment config · Server deployment and routing configuration · `server/vercel.json`

## Connections

- Task screen → API client: fetch CRUD · Task actions are sent through the shared API client
- Task screen → Button: uses · Task UI reuses common controls
- App shell → Task screen: renders · Root shell hosts the main screen
- App shell → Global styles: loads · App shell imports global styling
- API client → Task routes: HTTP calls · Frontend CRUD requests target the task API
- Server entry → Express app: boots · Node entrypoint starts the Express app
- Express app → Config: reads · App setup uses centralized runtime config
- Express app → Task routes: mounts · Express app registers task routes
- Task routes → Task store: mutates · Create, update, and delete operations act on memory state
- Task routes → Task routes: UUID ids · Task identifiers are used for update/delete targeting
- API entry → Express app: adapts · Deployment entry reuses the Express application
- Vercel config → API entry: routes to · Vercel deployment points at the API entry
- Express app → Task store: serves · API reads and writes the process-local task list
- Task screen → Global styles: styles · Screen uses global UI styling