# goitacademy/nextjs-course-code architecture

> Architecture diagram of the GitHub repository goitacademy/nextjs-course-code, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/goitacademy/nextjs-course-code
- Repository: https://github.com/goitacademy/nextjs-course-code

## Overview

#### Purpose and Runtime
This is a Next.js App Router administrative UI for viewing and managing companies and their promotions, plus a dashboard of business summaries. It runs as a React/TypeScript web application, with the Next.js server/runtime handling route rendering and navigation. Styling is global CSS plus Tailwind configuration.

Primary application entry points are `src/app/layout.tsx`, `src/app/page.tsx`, and the admin shell at `src/app/(admin)/layout.tsx`.

#### Application Shell and Navigation
The root layout establishes cross-route application concerns; the admin route group supplies the management-area frame. Shared navigation and page chrome are componentized around header, sidebar, and toolbar primitives.

Key paths:
- `src/app/layout.tsx`
- `src/app/(admin)/layout.tsx`
- `src/app/components/header.tsx`
- `src/app/components/sidebar.tsx`

#### Dashboard Composition
`/dashboard` is a composite route using App Router parallel routes. Its layout renders independently supplied slots for categories, countries, promotions, sales, and stats, allowing dashboard panels to be fetched/rendered in isolation and to have localized loading/error behavior where implemented.

Key paths:
- `src/app/(admin)/dashboard/layout.tsx`
- `src/app/(admin)/dashboard/@stats/page.tsx`
- `src/app/(admin)/dashboard/@sales/page.tsx`
- `src/app/(admin)/dashboard/error.tsx`

Dashboard display is built from reusable summary/card components, notably `src/app/components/dashboard-card.tsx` and `src/app/components/summary-table.tsx`.

#### Companies Domain and Detail Flow
The companies route is the central CRUD-oriented domain. The list route presents company rows/table data; dynamic `[id]` routes render a company detail page and its promotion-related context. A route-level not-found boundary supports invalid or missing company identifiers.

Key paths:
- `src/app/(admin)/companies/page.tsx`
- `src/app/(admin)/companies/[id]/page.tsx`
- `src/app/(admin)/companies/[id]/not-found.tsx`
- `src/app/components/company-table.tsx`
- `src/app/components/company-info.tsx`
- `src/app/components/company-promotions.tsx`

#### Modal, Toolbar, and Header Route Slots
The companies layout uses parallel route slots (`@header`, `@toolbar`, `@modal`) to vary surrounding UI by list, detail, creation, and promotion-creation state. Intercepting modal routes—such as `(.)new` and `(.)new-promotion`—overlay forms during in-app navigation while canonical `/new` and `/[id]/new-promotion` routes remain directly addressable.

Key paths:
- `src/app/(admin)/companies/layout.tsx`
- `src/app/(admin)/companies/@modal/(.)new/page.tsx`
- `src/app/(admin)/companies/@modal/[id]/(.)new-promotion/page.tsx`
- `src/app/(admin)/companies/new/page.tsx`
- `src/app/(admin)/companies/[id]/new-promotion/page.tsx`

#### Mutation UI and Data Boundary
Company and promotion creation/editing are represented by dedicated form and modal components. UI components should remain consumers of the repository’s API abstraction rather than coupling directly to a backend transport. `getQueryClient` and `providers` indicate a client-side query/cache provider boundary, while `api.ts` is the likely external data-service integration point.

Key paths:
- `src/app/components/company-form.tsx`
- `src/app/components/promotion-form.tsx`
- `src/app/components/providers.tsx`
- `src/lib/api.ts`
- `src/lib/utils/getQueryClient.ts`

#### Failure and Asset Boundaries
Global and dashboard-specific error boundaries prevent rendering failures from collapsing the whole application. Static visual assets are served from Next’s public directory; uploaded company logos are handled through a dedicated UI component, with persistence/service behavior expected behind the API layer.

Key paths:
- `src/app/global-error.tsx`
- `src/app/(admin)/dashboard/error.tsx`
- `src/app/components/logo-uploader.tsx`
- `public/images`

Main entry points: [`src/app/(admin)/companies/layout.tsx`](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/layout.tsx) (Companies layout), [`src/lib/api.ts`](https://github.com/goitacademy/nextjs-course-code/blob/main/src/lib/api.ts) (API abstraction), [`src/app/layout.tsx`](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/layout.tsx) (Root layout), [`src/app/(admin)/layout.tsx`](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/layout.tsx) (Admin shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App Shell"]
  node_root_layout["Root layout<br/>route layout<br/>[layout.tsx]"]
  node_admin_layout["Admin shell<br/>route layout<br/>[layout.tsx]"]
  node_navigation["Header &amp; sidebar<br/>shared chrome<br/>[header.tsx]"]
  node_global_error["Global error boundary<br/>[global-error.tsx]"]
end

subgraph group_dashboard["Dashboard"]
  node_dashboard_layout["Dashboard layout<br/>parallel route layout<br/>[layout.tsx]"]
  node_dashboard_slots["Dashboard slots<br/>parallel route panels<br/>[page.tsx]"]
  node_dashboard_views["Dashboard summaries<br/>shared views<br/>[dashboard-card.tsx]"]
  node_dashboard_error["Dashboard error boundary<br/>[error.tsx]"]
end

subgraph group_companies["Companies"]
  node_companies_layout["Companies layout<br/>parallel route layout<br/>[layout.tsx]"]
  node_companies_list["Companies list<br/>route page<br/>[page.tsx]"]
  node_company_table["Company table<br/>list view<br/>[company-table.tsx]"]
  node_company_detail["Company detail<br/>dynamic route page<br/>[page.tsx]"]
  node_company_context["Company detail views<br/>detail components<br/>[company-info.tsx]"]
  node_company_not_found["Company not found<br/>not-found boundary<br/>[not-found.tsx]"]
  node_creation_routes["Creation routes<br/>canonical pages<br/>[page.tsx]"]
  node_modal_routes["Intercepting modals<br/>parallel route slot<br/>[page.tsx]"]
  node_forms["Company &amp; promotion forms<br/>mutation UI<br/>[company-form.tsx]"]
end

subgraph group_data["Data &amp; Assets"]
  node_providers["Query providers<br/>client provider<br/>[providers.tsx]"]
  node_query_client["Query client<br/>cache factory<br/>[getQueryClient.ts]"]
  node_api{{"API abstraction<br/>data service<br/>[api.ts]"}}
  node_logo_uploader["Logo uploader<br/>upload UI<br/>[logo-uploader.tsx]"]
  node_assets["Public images<br/>static assets"]
end

node_next{{"Next.js App Router<br/>runtime"}}

node_next -->|"renders"| node_root_layout
node_root_layout -->|"wraps admin routes"| node_admin_layout
node_root_layout -->|"provides"| node_providers
node_root_layout -.->|"guards"| node_global_error
node_admin_layout -->|"renders chrome"| node_navigation
node_admin_layout -->|"hosts"| node_dashboard_layout
node_admin_layout -->|"hosts"| node_companies_layout
node_providers -->|"initializes"| node_query_client
node_dashboard_layout -->|"renders slots"| node_dashboard_slots
node_dashboard_slots -->|"composes"| node_dashboard_views
node_dashboard_layout -.->|"guards"| node_dashboard_error
node_dashboard_slots -->|"loads summaries"| node_api
node_companies_layout -->|"renders"| node_companies_list
node_companies_layout -->|"renders dynamic route"| node_company_detail
node_companies_layout -->|"hosts canonical routes"| node_creation_routes
node_companies_layout -->|"renders modal slot"| node_modal_routes
node_companies_list -->|"displays"| node_company_table
node_company_detail -->|"composes"| node_company_context
node_company_detail -.->|"falls back"| node_company_not_found
node_modal_routes -->|"overlays"| node_forms
node_creation_routes -->|"renders"| node_forms
node_forms -->|"mutates through"| node_api
node_company_table -->|"loads through"| node_api
node_company_context -->|"loads through"| node_api
node_logo_uploader -->|"uploads through"| node_api
node_assets -.->|"serves visual assets"| node_logo_uploader

click node_root_layout "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/layout.tsx"
click node_admin_layout "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/layout.tsx"
click node_navigation "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/header.tsx"
click node_providers "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/providers.tsx"
click node_query_client "https://github.com/goitacademy/nextjs-course-code/blob/main/src/lib/utils/getQueryClient.ts"
click node_api "https://github.com/goitacademy/nextjs-course-code/blob/main/src/lib/api.ts"
click node_dashboard_layout "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/dashboard/layout.tsx"
click node_dashboard_slots "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/dashboard/%40stats/page.tsx"
click node_dashboard_views "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/dashboard-card.tsx"
click node_dashboard_error "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/dashboard/error.tsx"
click node_companies_layout "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/layout.tsx"
click node_companies_list "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/page.tsx"
click node_company_table "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/company-table.tsx"
click node_company_detail "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/%5Bid%5D/page.tsx"
click node_company_context "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/company-info.tsx"
click node_company_not_found "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/%5Bid%5D/not-found.tsx"
click node_creation_routes "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/new/page.tsx"
click node_modal_routes "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/%40modal/(.)new/page.tsx"
click node_forms "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/company-form.tsx"
click node_logo_uploader "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/logo-uploader.tsx"
click node_assets "https://github.com/goitacademy/nextjs-course-code/tree/main/public/images"
click node_global_error "https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/global-error.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_root_layout,node_admin_layout,node_navigation,node_global_error toneBlue
class node_dashboard_layout,node_dashboard_slots,node_dashboard_views,node_dashboard_error toneAmber
class node_companies_layout,node_companies_list,node_company_table,node_company_detail,node_company_context,node_company_not_found,node_creation_routes,node_modal_routes,node_forms toneMint
class node_providers,node_query_client,node_api,node_logo_uploader,node_assets toneRose
class node_next toneNeutral
```

## Components

### App Shell

- [Root layout](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/layout.tsx): route layout · `src/app/layout.tsx`
- [Admin shell](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/layout.tsx): route layout · Management-area frame. · `src/app/(admin)/layout.tsx`
- [Header & sidebar](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/header.tsx): shared chrome · `src/app/components/header.tsx`
- [Global error boundary](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/global-error.tsx): error boundary · `src/app/global-error.tsx`

### Dashboard

- [Dashboard layout](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/dashboard/layout.tsx): parallel route layout · Composes independently rendered dashboard slots. · `src/app/(admin)/dashboard/layout.tsx`
- [Dashboard slots](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/dashboard/%40stats/page.tsx): parallel route panels · Stats, sales, categories, countries, and promotions panels. · `src/app/(admin)/dashboard/@stats/page.tsx`
- [Dashboard summaries](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/dashboard-card.tsx): shared views · `src/app/components/dashboard-card.tsx`
- [Dashboard error boundary](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/dashboard/error.tsx): error boundary · `src/app/(admin)/dashboard/error.tsx`

### Companies

- [Companies layout](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/layout.tsx): parallel route layout · Hosts header, toolbar, and modal slots. · `src/app/(admin)/companies/layout.tsx`
- [Companies list](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/page.tsx): route page · `src/app/(admin)/companies/page.tsx`
- [Company table](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/company-table.tsx): list view · `src/app/components/company-table.tsx`
- [Company detail](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/%5Bid%5D/page.tsx): dynamic route page · `src/app/(admin)/companies/[id]/page.tsx`
- [Company detail views](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/company-info.tsx): detail components · Company information and promotions context. · `src/app/components/company-info.tsx`
- [Company not found](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/%5Bid%5D/not-found.tsx): not-found boundary · `src/app/(admin)/companies/[id]/not-found.tsx`
- [Creation routes](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/new/page.tsx): canonical pages · Directly addressable company and promotion creation pages. · `src/app/(admin)/companies/new/page.tsx`
- [Intercepting modals](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/(admin)/companies/%40modal/(.)new/page.tsx): parallel route slot · Overlays creation forms during in-app navigation. · `src/app/(admin)/companies/@modal/(.)new/page.tsx`
- [Company & promotion forms](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/company-form.tsx): mutation UI · `src/app/components/company-form.tsx`

### Data & Assets

- [Query providers](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/providers.tsx): client provider · Supplies client query and cache context. · `src/app/components/providers.tsx`
- [Query client](https://github.com/goitacademy/nextjs-course-code/blob/main/src/lib/utils/getQueryClient.ts): cache factory · `src/lib/utils/getQueryClient.ts`
- [API abstraction](https://github.com/goitacademy/nextjs-course-code/blob/main/src/lib/api.ts): data service · External data-service boundary. · `src/lib/api.ts`
- [Logo uploader](https://github.com/goitacademy/nextjs-course-code/blob/main/src/app/components/logo-uploader.tsx): upload UI · `src/app/components/logo-uploader.tsx`
- [Public images](https://github.com/goitacademy/nextjs-course-code/tree/main/public/images): static assets · `public/images`

### Other components

- **Next.js App Router**: runtime · Renders routes and manages navigation.

## Connections

- Next.js App Router → Root layout: renders
- Root layout → Admin shell: wraps admin routes
- Root layout → Query providers: provides
- Root layout → Global error boundary: guards
- Admin shell → Header & sidebar: renders chrome
- Admin shell → Dashboard layout: hosts
- Admin shell → Companies layout: hosts
- Query providers → Query client: initializes
- Dashboard layout → Dashboard slots: renders slots
- Dashboard slots → Dashboard summaries: composes
- Dashboard layout → Dashboard error boundary: guards
- Dashboard slots → API abstraction: loads summaries
- Companies layout → Companies list: renders
- Companies layout → Company detail: renders dynamic route
- Companies layout → Creation routes: hosts canonical routes
- Companies layout → Intercepting modals: renders modal slot
- Companies list → Company table: displays
- Company detail → Company detail views: composes
- Company detail → Company not found: falls back
- Intercepting modals → Company & promotion forms: overlays
- Creation routes → Company & promotion forms: renders
- Company & promotion forms → API abstraction: mutates through
- Company table → API abstraction: loads through
- Company detail views → API abstraction: loads through
- Logo uploader → API abstraction: uploads through
- Public images → Logo uploader: serves visual assets