# greatstackdev/project-management architecture

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

## Overview

This is a client-side React project-management platform. Users move through workspaces to projects, then manage tasks and inspect project analytics, calendars, and settings; team membership and dashboard summaries are additional capabilities. The sampled Redux slice holds workspace and task state, initialized from bundled assets rather than a demonstrated backend. Some page and component wiring is unsampled, so those relationships are shown only where the excerpts or route declarations support them.

Main entry points: [`src/app/store.js`](https://github.com/greatstackdev/project-management/blob/main/src/app/store.js) (Redux store), [`src/App.jsx`](https://github.com/greatstackdev/project-management/blob/main/src/App.jsx) (App routes), [`src/pages/ProjectDetails.jsx`](https://github.com/greatstackdev/project-management/blob/main/src/pages/ProjectDetails.jsx) (Project details), [`src/features/workspaceSlice.js`](https://github.com/greatstackdev/project-management/blob/main/src/features/workspaceSlice.js) (Workspace state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["App routes<br/>[App.jsx]"]
  node_runtime["React runtime<br/>[main.jsx]"]
  node_layout["App layout<br/>[Layout.jsx]"]
end

subgraph group_workspace["Workspace state"]
  node_store["Redux store<br/>[store.js]"]
  node_workspace_slice["Workspace state<br/>[workspaceSlice.js]"]
  node_theme_slice["Theme state<br/>[themeSlice.js]"]
  node_assets["Seed data<br/>[assets.js]"]
  node_schema["Data model<br/>[schema.prisma]"]
end

subgraph group_projects["Project and task work"]
  node_projects_page["Projects list<br/>[Projects.jsx]"]
  node_project_details["Project details<br/>[ProjectDetails.jsx]"]
  node_task_details["Task details<br/>[TaskDetails.jsx]"]
  node_project_tasks["Task list<br/>[ProjectTasks.jsx]"]
  node_create_task["Create task"]
  node_analytics["Project analytics"]
  node_calendar["Project calendar"]
  node_settings["Project settings"]
end

subgraph group_team["Team and overview"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_team_page["Team management<br/>[Team.jsx]"]
  node_invite["Invite member"]
  node_team_add["Add project member"]
  node_summary["Task summaries<br/>[TasksSummary.jsx]"]
  node_my_tasks["My tasks<br/>[MyTasksSidebar.jsx]"]
end

node_user(("User"))

node_user -->|"opens app"| node_runtime
node_runtime -->|"renders"| node_app
node_runtime -->|"provides state"| node_store
node_app -->|"routes through"| node_layout
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_projects_page
node_app -->|"routes to"| node_project_details
node_app -->|"routes to"| node_task_details
node_app -->|"routes to"| node_team_page
node_store -->|"registers reducer"| node_workspace_slice
node_store -->|"registers reducer"| node_theme_slice
node_workspace_slice -->|"initializes from"| node_assets
node_workspace_slice -->|"persists selection"| node_user
node_project_details -->|"renders"| node_project_tasks
node_project_details -->|"opens"| node_create_task
node_project_details -->|"renders"| node_analytics
node_project_details -->|"renders"| node_calendar
node_project_details -->|"renders"| node_settings
node_project_tasks -->|"dispatches task changes"| node_workspace_slice
node_project_details -->|"reads project state"| node_store
node_task_details -->|"reads task state"| node_store
node_team_page -->|"opens"| node_invite
node_team_page -->|"reads workspace"| node_store
node_summary -->|"reads workspace"| node_store
node_my_tasks -->|"reads workspace"| node_store

click node_app "https://github.com/greatstackdev/project-management/blob/main/src/App.jsx"
click node_runtime "https://github.com/greatstackdev/project-management/blob/main/src/main.jsx"
click node_store "https://github.com/greatstackdev/project-management/blob/main/src/app/store.js"
click node_workspace_slice "https://github.com/greatstackdev/project-management/blob/main/src/features/workspaceSlice.js"
click node_theme_slice "https://github.com/greatstackdev/project-management/blob/main/src/features/themeSlice.js"
click node_assets "https://github.com/greatstackdev/project-management/blob/main/src/assets/assets.js"
click node_layout "https://github.com/greatstackdev/project-management/blob/main/src/pages/Layout.jsx"
click node_dashboard "https://github.com/greatstackdev/project-management/blob/main/src/pages/Dashboard.jsx"
click node_projects_page "https://github.com/greatstackdev/project-management/blob/main/src/pages/Projects.jsx"
click node_project_details "https://github.com/greatstackdev/project-management/blob/main/src/pages/ProjectDetails.jsx"
click node_task_details "https://github.com/greatstackdev/project-management/blob/main/src/pages/TaskDetails.jsx"
click node_team_page "https://github.com/greatstackdev/project-management/blob/main/src/pages/Team.jsx"
click node_project_tasks "https://github.com/greatstackdev/project-management/blob/main/src/components/ProjectTasks.jsx"
click node_create_task "https://github.com/greatstackdev/project-management/blob/main/src/components/CreateTaskDialog.jsx"
click node_analytics "https://github.com/greatstackdev/project-management/blob/main/src/components/ProjectAnalytics.jsx"
click node_calendar "https://github.com/greatstackdev/project-management/blob/main/src/components/ProjectCalendar.jsx"
click node_settings "https://github.com/greatstackdev/project-management/blob/main/src/components/ProjectSettings.jsx"
click node_invite "https://github.com/greatstackdev/project-management/blob/main/src/components/InviteMemberDialog.jsx"
click node_team_add "https://github.com/greatstackdev/project-management/blob/main/src/components/AddProjectMember.jsx"
click node_summary "https://github.com/greatstackdev/project-management/blob/main/src/components/TasksSummary.jsx"
click node_my_tasks "https://github.com/greatstackdev/project-management/blob/main/src/components/MyTasksSidebar.jsx"
click node_schema "https://github.com/greatstackdev/project-management/blob/main/src/assets/schema.prisma"

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_app,node_runtime,node_layout,node_user toneBlue
class node_store,node_workspace_slice,node_theme_slice,node_assets,node_schema toneAmber
class node_projects_page,node_project_details,node_task_details,node_project_tasks,node_create_task,node_analytics,node_calendar,node_settings toneMint
class node_dashboard,node_team_page,node_invite,node_team_add,node_summary,node_my_tasks toneRose
```

## Components

### App navigation

- [App routes](https://github.com/greatstackdev/project-management/blob/main/src/App.jsx): `src/App.jsx`
- [React runtime](https://github.com/greatstackdev/project-management/blob/main/src/main.jsx): `src/main.jsx`
- [App layout](https://github.com/greatstackdev/project-management/blob/main/src/pages/Layout.jsx): `src/pages/Layout.jsx`

### Workspace state

- [Redux store](https://github.com/greatstackdev/project-management/blob/main/src/app/store.js): `src/app/store.js`
- [Workspace state](https://github.com/greatstackdev/project-management/blob/main/src/features/workspaceSlice.js): `src/features/workspaceSlice.js`
- [Theme state](https://github.com/greatstackdev/project-management/blob/main/src/features/themeSlice.js): `src/features/themeSlice.js`
- [Seed data](https://github.com/greatstackdev/project-management/blob/main/src/assets/assets.js): `src/assets/assets.js`
- [Data model](https://github.com/greatstackdev/project-management/blob/main/src/assets/schema.prisma): `src/assets/schema.prisma`

### Project and task work

- [Projects list](https://github.com/greatstackdev/project-management/blob/main/src/pages/Projects.jsx): `src/pages/Projects.jsx`
- [Project details](https://github.com/greatstackdev/project-management/blob/main/src/pages/ProjectDetails.jsx): `src/pages/ProjectDetails.jsx`
- [Task details](https://github.com/greatstackdev/project-management/blob/main/src/pages/TaskDetails.jsx): `src/pages/TaskDetails.jsx`
- [Task list](https://github.com/greatstackdev/project-management/blob/main/src/components/ProjectTasks.jsx): `src/components/ProjectTasks.jsx`
- [Create task](https://github.com/greatstackdev/project-management/blob/main/src/components/CreateTaskDialog.jsx): `src/components/CreateTaskDialog.jsx`
- [Project analytics](https://github.com/greatstackdev/project-management/blob/main/src/components/ProjectAnalytics.jsx): `src/components/ProjectAnalytics.jsx`
- [Project calendar](https://github.com/greatstackdev/project-management/blob/main/src/components/ProjectCalendar.jsx): `src/components/ProjectCalendar.jsx`
- [Project settings](https://github.com/greatstackdev/project-management/blob/main/src/components/ProjectSettings.jsx): `src/components/ProjectSettings.jsx`

### Team and overview

- [Dashboard](https://github.com/greatstackdev/project-management/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Team management](https://github.com/greatstackdev/project-management/blob/main/src/pages/Team.jsx): `src/pages/Team.jsx`
- [Invite member](https://github.com/greatstackdev/project-management/blob/main/src/components/InviteMemberDialog.jsx): `src/components/InviteMemberDialog.jsx`
- [Add project member](https://github.com/greatstackdev/project-management/blob/main/src/components/AddProjectMember.jsx): `src/components/AddProjectMember.jsx`
- [Task summaries](https://github.com/greatstackdev/project-management/blob/main/src/components/TasksSummary.jsx): `src/components/TasksSummary.jsx`
- [My tasks](https://github.com/greatstackdev/project-management/blob/main/src/components/MyTasksSidebar.jsx): `src/components/MyTasksSidebar.jsx`

### Other components

- **User**

## Connections

- User → React runtime: opens app
- React runtime → App routes: renders
- React runtime → Redux store: provides state
- App routes → App layout: routes through
- App routes → Dashboard: routes to
- App routes → Projects list: routes to
- App routes → Project details: routes to
- App routes → Task details: routes to
- App routes → Team management: routes to
- Redux store → Workspace state: registers reducer
- Redux store → Theme state: registers reducer
- Workspace state → Seed data: initializes from
- Workspace state → User: persists selection
- Project details → Task list: renders
- Project details → Create task: opens
- Project details → Project analytics: renders
- Project details → Project calendar: renders
- Project details → Project settings: renders
- Task list → Workspace state: dispatches task changes
- Project details → Redux store: reads project state
- Task details → Redux store: reads task state
- Team management → Invite member: opens
- Team management → Redux store: reads workspace
- Task summaries → Redux store: reads workspace
- My tasks → Redux store: reads workspace