# elyse502/project-management architecture

> Architecture diagram of the GitHub repository elyse502/project-management, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/elyse502/project-management
- Repository: https://github.com/elyse502/project-management

## Overview

1. **High-level shape**
   - This is a split full-stack app with a **React/Vite client** and an **Express/Node server**.
   - The server owns business logic, authorization, persistence, email delivery, and background jobs.
   - The client is a single-page application that renders workspace/project/task workflows and talks to the server over HTTP.

2. **Frontend boundary**
   - The `client/` app is organized as a classic SPA: `main.jsx` bootstraps `App.jsx`, which is composed into route-level pages under `src/pages/`.
   - Reusable UI is concentrated in `src/components/`, with distinct components for dashboards, project views, task dialogs, sidebars, analytics, calendar, and member management.
   - Styling is handled with Tailwind-based frontend tooling, and state is split between UI state and domain state through Redux Toolkit slices in `src/features/` plus the central store in `src/app/store.js`.

3. **Client data access**
   - The frontend’s backend integration is centralized in `src/configs/api.js`, which is the main boundary for calling the server API.
   - The client also integrates Clerk on the UI side via environment-configured publishable keys, so authentication state and org context are available to the app before it issues protected API calls.

4. **Frontend feature areas**
   - The page set maps cleanly to the product’s core domains: `Dashboard`, `Projects`, `ProjectDetails`, `TaskDetails`, `Team`, and a shared `Layout`.
   - The component list shows the main user flows: creating projects/tasks, inviting members, switching workspaces, viewing analytics, checking calendars, and reviewing recent activity.
   - `workspaceSlice.js` and `themeSlice.js` suggest the app’s key cross-cutting UI concerns are workspace selection and dark/light theme state.

5. **Backend API surface**
   - The server is an Express application defined in `server/server.js`, with route modules for `workspace`, `project`, `task`, and `comment` resources.
   - Controllers contain the business logic for each domain, while `middlewares/authMiddleware.js` protects routes and enforces access rules.
   - This separation indicates a resource-oriented API where the frontend consumes workspace-scoped endpoints for almost all operational behavior.

6. **Authorization and tenancy**
   - Clerk is the identity provider, but the server is responsible for enforcing access to workspace/project data.
   - The architecture is multi-tenant: organizations/workspaces isolate data, and membership determines what a user can see or mutate.
   - That means the main trust boundary is between Clerk-authenticated identity on the client and server-side authorization checks on workspace-scoped records.

7. **Persistence layer**
   - Prisma is the ORM, and PostgreSQL is the backing database, with Neon called out in the README as the hosted database provider.
   - The authoritative schema is in `server/prisma/schema.prisma`; the README’s model list shows the core entities: user, organization/workspace, member, project, task, comment, and notification.
   - The data model is centered on collaboration: projects belong to workspaces, tasks belong to projects, and comments/notifications attach to task and user activity.

8. **Collaboration and communication**
   - The server includes `configs/nodemailer.js`, so email is a first-class part of the architecture rather than an afterthought.
   - Invites, task assignment notifications, and due-date reminders are all part of the system’s collaboration loop.
   - These notifications connect user actions in the app to asynchronous outbound communication outside the core request/response path.

9. **Background job subsystem**
   - `server/inngest/` shows event-driven background processing via Inngest.
   - According to the README, this handles email notifications, reminder emails, Clerk webhook syncing, and analytics processing.
   - Architecturally, this creates a second execution path besides the API: events are emitted from app activity, then processed asynchronously for side effects and reporting.

10. **Product analytics and reporting**
   - The presence of `ProjectAnalytics`, `StatsGrid`, `RecentActivity`, and `TasksSummary` in the client indicates the UI consumes precomputed or aggregated project metrics.
   - That pairs with the backend’s analytics-processing jobs, implying a pipeline where task/project events are stored in the database and later summarized for dashboard views.

11. **Operational deployment**
   - Both `client/` and `server/` have `vercel.json`, so they are intended to be deployed as separate Vercel targets.
   - The frontend is a static SPA build, while the backend is a serverless-compatible Express API with Prisma-generated database access.
   - Environment variables are used to bind the deployment to Clerk, Neon/PostgreSQL, Inngest, and SMTP services.

12. **What matters most for an architecture diagram**
   - Draw three main zones: **React client**, **Express API**, and **PostgreSQL/Prisma data layer**, then attach **Clerk** for auth and **Inngest + SMTP** for async notifications.
   - Show the client as the presentation and interaction layer, the server as the domain/business layer, and the database as the source of truth for workspaces/projects/tasks/comments.
   - The key flows are: user authenticates via Clerk, client calls protected API endpoints, server validates membership and mutates Prisma models, and background jobs send email/process analytics after events are persisted.

Main entry points: [`client/src/App.jsx`](https://github.com/elyse502/project-management/blob/main/client/src/App.jsx) (App), [`server/controllers`](https://github.com/elyse502/project-management/tree/main/server/controllers) (Controllers), [`server/inngest/index.js`](https://github.com/elyse502/project-management/blob/main/server/inngest/index.js) (Inngest jobs), [`server/routes`](https://github.com/elyse502/project-management/tree/main/server/routes) (Routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client"]
  node_client_main(("main.jsx<br/>SPA entry<br/>[main.jsx]"))
  node_client_app["App<br/>Shell<br/>[App.jsx]"]
  node_client_pages["Pages<br/>Route views"]
  node_client_components["Components<br/>UI kit"]
  node_client_store(("Store<br/>[store.js]"))
  node_client_slices(("Slices"))
  node_client_api(("API client<br/>HTTP boundary<br/>[api.js]"))
  node_client_ui["Workspace UI<br/>Workspace flows"]
end

subgraph group_server["Server"]
  node_server_entry(("server.js<br/>Express app<br/>[server.js]"))
  node_server_routes["Routes"]
  node_server_controllers["Controllers<br/>Domain logic"]
  node_server_auth(("Auth middleware<br/>Authorization<br/>[authMiddleware.js]"))
  node_server_prisma(("Prisma client<br/>ORM access<br/>[prisma.js]"))
  node_server_notifications(("Mailer<br/>Email service<br/>[nodemailer.js]"))
  node_server_jobs["Inngest jobs<br/>Async workers<br/>[index.js]"]
end

subgraph group_data["Data"]
  node_schema["Schema<br/>Data model<br/>[schema.prisma]"]
  node_db[("PostgreSQL<br/>Primary datastore")]
end

subgraph group_integrations["Integrations"]
  node_clerk(("Clerk<br/>Identity provider"))
  node_smtp(("SMTP<br/>Email delivery"))
  node_inngest(("Inngest<br/>Event processor"))
end

node_client_main -->|"boots"| node_client_app
node_client_app -->|"routes to"| node_client_pages
node_client_app -->|"uses"| node_client_components
node_client_app -->|"provides"| node_client_store
node_client_store -->|"includes"| node_client_slices
node_client_pages -->|"renders"| node_client_ui
node_client_components -->|"supports"| node_client_ui
node_client_ui -->|"calls"| node_client_api
node_client_api -->|"requests"| node_server_entry
node_clerk -->|"authenticates"| node_client_ui
node_server_entry -->|"mounts"| node_server_routes
node_server_routes -->|"protects"| node_server_auth
node_server_routes -->|"delegates"| node_server_controllers
node_server_controllers -->|"reads/writes"| node_server_prisma
node_server_prisma -->|"uses"| node_schema
node_schema -->|"stores"| node_db
node_server_controllers -->|"sends"| node_server_notifications
node_server_jobs -->|"runs on"| node_inngest
node_server_jobs -->|"triggers"| node_server_notifications
node_server_jobs -->|"aggregates"| node_server_prisma
node_server_controllers -->|"emits events"| node_server_jobs
node_clerk -->|"identifies user"| node_server_auth
node_smtp -->|"delivers"| node_server_notifications

click node_client_main "https://github.com/elyse502/project-management/blob/main/client/src/main.jsx"
click node_client_app "https://github.com/elyse502/project-management/blob/main/client/src/App.jsx"
click node_client_pages "https://github.com/elyse502/project-management/tree/main/client/src/pages"
click node_client_components "https://github.com/elyse502/project-management/tree/main/client/src/components"
click node_client_store "https://github.com/elyse502/project-management/blob/main/client/src/app/store.js"
click node_client_slices "https://github.com/elyse502/project-management/tree/main/client/src/features"
click node_client_api "https://github.com/elyse502/project-management/blob/main/client/src/configs/api.js"
click node_server_entry "https://github.com/elyse502/project-management/blob/main/server/server.js"
click node_server_routes "https://github.com/elyse502/project-management/tree/main/server/routes"
click node_server_controllers "https://github.com/elyse502/project-management/tree/main/server/controllers"
click node_server_auth "https://github.com/elyse502/project-management/blob/main/server/middlewares/authMiddleware.js"
click node_server_prisma "https://github.com/elyse502/project-management/blob/main/server/configs/prisma.js"
click node_server_notifications "https://github.com/elyse502/project-management/blob/main/server/configs/nodemailer.js"
click node_server_jobs "https://github.com/elyse502/project-management/blob/main/server/inngest/index.js"
click node_schema "https://github.com/elyse502/project-management/blob/main/server/prisma/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_client_main,node_client_app,node_client_pages,node_client_components,node_client_store,node_client_slices,node_client_api,node_client_ui toneBlue
class node_server_entry,node_server_routes,node_server_controllers,node_server_auth,node_server_prisma,node_server_notifications,node_server_jobs toneAmber
class node_schema,node_db toneMint
class node_clerk,node_smtp,node_inngest toneRose
```

## Components

### Client

React/Vite single-page app and UI state

- [main.jsx](https://github.com/elyse502/project-management/blob/main/client/src/main.jsx): SPA entry · Bootstraps the React app · `client/src/main.jsx`
- [App](https://github.com/elyse502/project-management/blob/main/client/src/App.jsx): Shell · Top-level application composition · `client/src/App.jsx`
- [Pages](https://github.com/elyse502/project-management/tree/main/client/src/pages): Route views · Dashboard, projects, task, team, and layout screens · `client/src/pages`
- [Components](https://github.com/elyse502/project-management/tree/main/client/src/components): UI kit · Reusable workspace, project, task, analytics, and navigation components · `client/src/components`
- [Store](https://github.com/elyse502/project-management/blob/main/client/src/app/store.js): Redux store · Central UI and domain state container · `client/src/app/store.js`
- [Slices](https://github.com/elyse502/project-management/tree/main/client/src/features): Redux slices · Workspace and theme state · `client/src/features`
- [API client](https://github.com/elyse502/project-management/blob/main/client/src/configs/api.js): HTTP boundary · Centralized server API access · `client/src/configs/api.js`
- **Workspace UI**: Workspace flows · Workspace switcher, dashboards, project/task dialogs, and member management

### Server

Express API, business logic, and authorization

- [server.js](https://github.com/elyse502/project-management/blob/main/server/server.js): Express app · API server bootstrap and routing · `server/server.js`
- [Routes](https://github.com/elyse502/project-management/tree/main/server/routes): Resource routes · Workspace, project, task, and comment endpoints · `server/routes`
- [Controllers](https://github.com/elyse502/project-management/tree/main/server/controllers): Domain logic · Business logic for resource operations · `server/controllers`
- [Auth middleware](https://github.com/elyse502/project-management/blob/main/server/middlewares/authMiddleware.js): Authorization · Protects workspace-scoped routes and access rules · `server/middlewares/authMiddleware.js`
- [Prisma client](https://github.com/elyse502/project-management/blob/main/server/configs/prisma.js): ORM access · Database access configured for the server · `server/configs/prisma.js`
- [Mailer](https://github.com/elyse502/project-management/blob/main/server/configs/nodemailer.js): Email service · Nodemailer setup for invites and reminders · `server/configs/nodemailer.js`
- [Inngest jobs](https://github.com/elyse502/project-management/blob/main/server/inngest/index.js): Async workers · Event-driven email, webhook sync, and analytics processing · `server/inngest/index.js`

### Data

Prisma schema and persistent storage

- [Schema](https://github.com/elyse502/project-management/blob/main/server/prisma/schema.prisma): Data model · Prisma schema for users, workspaces, members, projects, tasks, comments, and notifications · `server/prisma/schema.prisma`
- **PostgreSQL**: Primary datastore · Persistent collaboration data store

### Integrations

Identity, email, and async job services

- **Clerk**: Identity provider · Authentication and organization context
- **SMTP**: Email delivery · Outbound mail transport
- **Inngest**: Event processor · Background job orchestration and event handling

## Connections

- main.jsx → App: boots · Entry mounts the app
- App → Pages: routes to · App composes route-level screens
- App → Components: uses · Shared UI is assembled from reusable components
- App → Store: provides · App is wrapped by shared Redux state
- Store → Slices: includes · Store combines workspace and theme slices
- Pages → Workspace UI: renders · Pages present the main workspace and project flows
- Components → Workspace UI: supports · Components implement dialogs, sidebars, analytics, and calendars
- Workspace UI → API client: calls · UI issues protected HTTP requests
- API client → server.js: requests · Client talks to the API server
- Clerk → Workspace UI: authenticates · Provides user and org context to the client
- server.js → Routes: mounts · Express app exposes resource routes
- Routes → Auth middleware: protects · Routes enforce workspace access
- Routes → Controllers: delegates · Route handlers forward to domain logic
- Controllers → Prisma client: reads/writes · Controllers persist and fetch data through Prisma
- Prisma client → Schema: uses · Prisma client is generated from schema
- Schema → PostgreSQL: stores · Schema maps collaboration entities to PostgreSQL
- Controllers → Mailer: sends · Business actions trigger email side effects
- Inngest jobs → Inngest: runs on · Background processing is driven by Inngest events
- Inngest jobs → Mailer: triggers · Jobs send reminders, invites, and updates
- Inngest jobs → Prisma client: aggregates · Jobs read persisted data for analytics processing
- Controllers → Inngest jobs: emits events · App activity feeds asynchronous workflows
- Clerk → Auth middleware: identifies user · Server validates Clerk-backed identity before access
- SMTP → Mailer: delivers · Outgoing mail is sent through SMTP