# mubin-0xc7dfc8c3c4/mancity-dashboard architecture

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

- Interactive diagram: https://gitdiagram.com/mubin-0xc7dfc8c3c4/mancity-dashboard
- Repository: https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard

## Overview

1. **Overall shape**
   - This is a single Next.js App Router application that combines the frontend, API layer, and database access in one codebase.
   - The main architecture is a CRUD-style football operations dashboard backed by Prisma and MySQL.

2. **User-facing entrypoints**
   - `app/page.tsx` is the primary dashboard page.
   - `app/layout.tsx` provides the shared shell for the app, and `app/globals.css` applies global styling.
   - The page-level UI is assembled from domain components under `components/mcfc`.

3. **Domain UI subsystems**
   - `components/mcfc/dashboard.tsx`, `players.tsx`, `matches.tsx`, `staff.tsx`, `training.tsx`, and `trophies.tsx` are the main business modules.
   - These represent the top-level functional areas of the product: team overview, player management, match management, staff management, training sessions, and trophy records.
   - They likely consume data from the API routes and render the operational dashboard views.

4. **API layer**
   - The `app/api/*` tree is the backend surface of the application.
   - There are resource-specific route handlers for `players`, `matches`, `staff`, `training`, and `trophies`, each with:
     - a collection route: `route.ts`
     - an item route: `[id]/route.ts`
   - This structure implies standard REST-style operations for listing, creating, reading, updating, and deleting records.

5. **Analytics/summary endpoint**
   - `app/api/stats/route.ts` is a separate read endpoint for dashboard metrics.
   - It likely aggregates counts or operational summaries across multiple entities rather than exposing a standalone CRUD resource.

6. **Data access boundary**
   - `lib/db.ts` is the central database access point, most likely the Prisma client singleton.
   - This is the key boundary between route handlers and the database; all persistence flows through this layer rather than direct SQL in components.

7. **Persistence model**
   - `prisma/schema.prisma` defines the data model and database mappings.
   - The README specifies MySQL as the backing store, so Prisma is the ORM abstraction over MySQL tables.
   - `prisma/seed.ts` provides initial data bootstrapping for development or local setup.

8. **Request/data flow**
   - Typical flow is: dashboard component -> fetch/API call -> Next.js route handler -> Prisma via `lib/db.ts` -> MySQL -> JSON response -> UI render.
   - The API routes are the main integration boundary; the UI is separated from direct database access.

9. **Shared UI system**
   - `components/ui/*` is a reusable design-system layer built from Shadcn UI primitives.
   - These components provide the app’s common visual building blocks: tables, dialogs, forms, tabs, cards, toasts, dropdowns, etc.
   - The business screens in `components/mcfc` are composed from these lower-level UI primitives.

10. **Client-side helpers**
   - `hooks/use-toast.ts` and `components/ui/toaster.tsx` support user notifications.
   - `hooks/use-mobile.ts` suggests responsive behavior detection for mobile-adaptive UI.

11. **Styling and frontend tooling**
   - Tailwind CSS is the primary styling system, configured via `tailwind.config.ts` and `postcss.config.mjs`.
   - `components.json` indicates a Shadcn/UI setup, which explains the large set of generated primitive components.

12. **Environment and infrastructure**
   - The app expects a `DATABASE_URL` pointing to MySQL, as documented in the README.
   - There is no separate backend service or external API dependency shown in the tree; the Next.js app itself serves both frontend and backend concerns.

13. **Examples and non-core code**
   - `examples/websocket/frontend.tsx` and `examples/websocket/server.ts` appear to be a standalone demonstration rather than part of the main football dashboard path.
   - They are useful as an auxiliary sample but should be treated as separate from the production data flow.

14. **What to show in an architecture diagram**
   - A good diagram would center on:
     - browser/UI
     - Next.js pages/components
     - Next.js API routes
     - Prisma database layer
     - MySQL database
   - Around that, show the five main domain modules: players, matches, staff, training, and trophies, plus a cross-cutting stats/overview endpoint.

Main entry points: [`components/mcfc/dashboard.tsx`](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/dashboard.tsx) (Overview), [`components/ui`](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/tree/main/components/ui) (UI kit), [`lib/db.ts`](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/lib/db.ts) (Prisma client), [`app/page.tsx`](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/page.tsx) (Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_app["Next.js app"]
  node_app_page["Dashboard<br/>page<br/>[page.tsx]"]
  node_app_layout["App shell<br/>layout<br/>[layout.tsx]"]
  node_app_styles["Global CSS<br/>styles<br/>[globals.css]"]
end

subgraph group_grp_domain["Domain UI"]
  node_mcfc_dashboard["Overview<br/>domain screen<br/>[dashboard.tsx]"]
  node_mcfc_players["Players<br/>domain screen<br/>[players.tsx]"]
  node_mcfc_matches["Matches<br/>domain screen<br/>[matches.tsx]"]
  node_mcfc_staff["Staff<br/>domain screen<br/>[staff.tsx]"]
  node_mcfc_training["Training<br/>domain screen<br/>[training.tsx]"]
  node_mcfc_trophies["Trophies<br/>domain screen<br/>[trophies.tsx]"]
end

subgraph group_grp_api["API layer"]
  node_api_players["Players API<br/>route handler<br/>[route.ts]"]
  node_api_matches["Matches API<br/>route handler<br/>[route.ts]"]
  node_api_staff["Staff API<br/>route handler<br/>[route.ts]"]
  node_api_training["Training API<br/>route handler<br/>[route.ts]"]
  node_api_trophies["Trophies API<br/>route handler<br/>[route.ts]"]
  node_api_stats["Stats API<br/>summary endpoint<br/>[route.ts]"]
end

subgraph group_grp_ui["Shared UI"]
  node_ui_primitives["UI kit<br/>shadcn primitives"]
  node_hooks_toast["Toasts<br/>client helper<br/>[use-toast.ts]"]
  node_hooks_mobile["Mobile hook<br/>client helper<br/>[use-mobile.ts]"]
end

subgraph group_grp_data["Data layer"]
  node_db_client[("Prisma client<br/>db access<br/>[db.ts]")]
  node_prisma_schema["Schema<br/>prisma model<br/>[schema.prisma]"]
  node_prisma_seed["Seed data<br/>bootstrap<br/>[seed.ts]"]
end

subgraph group_grp_examples["Examples"]
  node_example_ws["Websocket demo<br/>example<br/>[frontend.tsx]"]
end

node_app_page -->|"uses shell"| node_app_layout
node_app_page -->|"styled by"| node_app_styles
node_app_page -->|"assembles"| node_mcfc_dashboard
node_mcfc_dashboard -->|"links"| node_mcfc_players
node_mcfc_dashboard -->|"links"| node_mcfc_matches
node_mcfc_dashboard -->|"links"| node_mcfc_staff
node_mcfc_dashboard -->|"links"| node_mcfc_training
node_mcfc_dashboard -->|"links"| node_mcfc_trophies
node_mcfc_players -->|"fetches"| node_api_players
node_mcfc_matches -->|"fetches"| node_api_matches
node_mcfc_staff -->|"fetches"| node_api_staff
node_mcfc_training -->|"fetches"| node_api_training
node_mcfc_trophies -->|"fetches"| node_api_trophies
node_mcfc_dashboard -->|"reads metrics"| node_api_stats
node_api_players -->|"queries"| node_db_client
node_api_matches -->|"queries"| node_db_client
node_api_staff -->|"queries"| node_db_client
node_api_training -->|"queries"| node_db_client
node_api_trophies -->|"queries"| node_db_client
node_api_stats -->|"aggregates"| node_db_client
node_db_client -->|"maps to"| node_prisma_schema
node_prisma_seed -->|"seeds"| node_prisma_schema
node_ui_primitives -->|"supports"| node_hooks_toast
node_ui_primitives -->|"supports"| node_hooks_mobile
node_mcfc_dashboard -->|"composes"| node_ui_primitives
node_mcfc_players -->|"composes"| node_ui_primitives
node_mcfc_matches -->|"composes"| node_ui_primitives
node_mcfc_staff -->|"composes"| node_ui_primitives
node_mcfc_training -->|"composes"| node_ui_primitives
node_mcfc_trophies -->|"composes"| node_ui_primitives
node_example_ws -.->|"independent"| node_ui_primitives

click node_app_page "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/page.tsx"
click node_app_layout "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/layout.tsx"
click node_app_styles "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/globals.css"
click node_mcfc_dashboard "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/dashboard.tsx"
click node_mcfc_players "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/players.tsx"
click node_mcfc_matches "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/matches.tsx"
click node_mcfc_staff "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/staff.tsx"
click node_mcfc_training "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/training.tsx"
click node_mcfc_trophies "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/trophies.tsx"
click node_api_players "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/players/route.ts"
click node_api_matches "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/matches/route.ts"
click node_api_staff "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/staff/route.ts"
click node_api_training "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/training/route.ts"
click node_api_trophies "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/trophies/route.ts"
click node_api_stats "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/stats/route.ts"
click node_db_client "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/lib/db.ts"
click node_prisma_schema "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/prisma/schema.prisma"
click node_prisma_seed "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/prisma/seed.ts"
click node_ui_primitives "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/tree/main/components/ui"
click node_hooks_toast "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/hooks/use-toast.ts"
click node_hooks_mobile "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/hooks/use-mobile.ts"
click node_example_ws "https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/examples/websocket/frontend.tsx"

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_page,node_app_layout,node_app_styles toneBlue
class node_mcfc_dashboard,node_mcfc_players,node_mcfc_matches,node_mcfc_staff,node_mcfc_training,node_mcfc_trophies toneAmber
class node_api_players,node_api_matches,node_api_staff,node_api_training,node_api_trophies,node_api_stats toneMint
class node_ui_primitives,node_hooks_toast,node_hooks_mobile toneRose
class node_db_client,node_prisma_schema,node_prisma_seed toneIndigo
class node_example_ws toneTeal
```

## Components

### Next.js app

App Router entrypoints and shared shell

- [Dashboard](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/page.tsx): page · Primary dashboard entry page · `app/page.tsx`
- [App shell](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/layout.tsx): layout · Shared application layout · `app/layout.tsx`
- [Global CSS](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/globals.css): styles · Global styling entry · `app/globals.css`

### Domain UI

Football operations screens assembled into the dashboard

- [Overview](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/dashboard.tsx): domain screen · Top-level team dashboard view · `components/mcfc/dashboard.tsx`
- [Players](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/players.tsx): domain screen · Player management screen · `components/mcfc/players.tsx`
- [Matches](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/matches.tsx): domain screen · Match management screen · `components/mcfc/matches.tsx`
- [Staff](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/staff.tsx): domain screen · Staff management screen · `components/mcfc/staff.tsx`
- [Training](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/training.tsx): domain screen · Training session screen · `components/mcfc/training.tsx`
- [Trophies](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/components/mcfc/trophies.tsx): domain screen · Trophy records screen · `components/mcfc/trophies.tsx`

### API layer

REST-style route handlers and dashboard metrics

- [Players API](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/players/route.ts): route handler · REST resource for players · `app/api/players/route.ts`
- [Matches API](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/matches/route.ts): route handler · REST resource for matches · `app/api/matches/route.ts`
- [Staff API](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/staff/route.ts): route handler · REST resource for staff · `app/api/staff/route.ts`
- [Training API](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/training/route.ts): route handler · REST resource for training · `app/api/training/route.ts`
- [Trophies API](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/trophies/route.ts): route handler · REST resource for trophies · `app/api/trophies/route.ts`
- [Stats API](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/app/api/stats/route.ts): summary endpoint · Aggregated dashboard metrics · `app/api/stats/route.ts`

### Shared UI

Reusable design-system primitives and client helpers

- [UI kit](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/tree/main/components/ui): shadcn primitives · Reusable interface components · `components/ui`
- [Toasts](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/hooks/use-toast.ts): client helper · Notification hook and toaster · `hooks/use-toast.ts`
- [Mobile hook](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/hooks/use-mobile.ts): client helper · Responsive behavior helper · `hooks/use-mobile.ts`

### Data layer

Prisma schema, seed data, and DB client

- [Prisma client](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/lib/db.ts): db access · Central database access boundary · `lib/db.ts`
- [Schema](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/prisma/schema.prisma): prisma model · Data model and mappings · `prisma/schema.prisma`
- [Seed data](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/prisma/seed.ts): bootstrap · Initial development data · `prisma/seed.ts`

### Examples

Standalone demo code not on the main product path

- [Websocket demo](https://github.com/mubin-0xc7dfc8c3c4/mancity-dashboard/blob/main/examples/websocket/frontend.tsx): example · Standalone websocket example code · `examples/websocket/frontend.tsx`

## Connections

- Dashboard → App shell: uses shell · Dashboard is rendered inside the shared app layout
- Dashboard → Global CSS: styled by · Page and layout inherit global styles
- Dashboard → Overview: assembles · Main page composes the overview screen
- Overview → Players: links · Overview surfaces player management
- Overview → Matches: links · Overview surfaces match management
- Overview → Staff: links · Overview surfaces staff management
- Overview → Training: links · Overview surfaces training operations
- Overview → Trophies: links · Overview surfaces trophy records
- Players → Players API: fetches · Player UI reads and mutates player data through the API
- Matches → Matches API: fetches · Match UI reads and mutates match data through the API
- Staff → Staff API: fetches · Staff UI reads and mutates staff data through the API
- Training → Training API: fetches · Training UI reads and mutates training data through the API
- Trophies → Trophies API: fetches · Trophy UI reads and mutates trophy data through the API
- Overview → Stats API: reads metrics · Dashboard summary pulls aggregated stats
- Players API → Prisma client: queries · Route handler persists via Prisma
- Matches API → Prisma client: queries · Route handler persists via Prisma
- Staff API → Prisma client: queries · Route handler persists via Prisma
- Training API → Prisma client: queries · Route handler persists via Prisma
- Trophies API → Prisma client: queries · Route handler persists via Prisma
- Stats API → Prisma client: aggregates · Stats endpoint computes summaries from stored records
- Prisma client → Schema: maps to · Client is generated from the Prisma schema
- Seed data → Schema: seeds · Seed data matches the model shape
- UI kit → Toasts: supports · Toaster wiring sits on top of UI primitives
- UI kit → Mobile hook: supports · Responsive helpers inform shared UI behavior
- Overview → UI kit: composes · Domain screens are built from the shared UI kit
- Players → UI kit: composes · Domain screens are built from the shared UI kit
- Matches → UI kit: composes · Domain screens are built from the shared UI kit
- Staff → UI kit: composes · Domain screens are built from the shared UI kit
- Training → UI kit: composes · Domain screens are built from the shared UI kit
- Trophies → UI kit: composes · Domain screens are built from the shared UI kit
- Websocket demo → UI kit: independent · Standalone example code is separate from the main dashboard flow