# ponickkhan/orient-gas-app architecture

> Architecture diagram of the GitHub repository ponickkhan/orient-gas-app, 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/ponickkhan/orient-gas-app
- Repository: https://github.com/ponickkhan/orient-gas-app

## Overview

1. **Project type and runtime**
   - This is a **Next.js App Router** project running on the React/TypeScript stack.
   - There is no evidence of a backend API, database, or external service integration in the repository; it appears to be a **front-end application** with local UI logic and document generation.

2. **Route structure**
   - The main entry points are:
     - `src/app/page.tsx` — the root landing page.
     - `src/app/checklist/page.tsx` — a dedicated checklist workflow page.
   - `src/app/layout.tsx` and `src/app/globals.css` provide the global shell and shared styles for all routes.

3. **Primary domain flow**
   - The repository centers on a **checklist/form-driven experience**.
   - The domain-specific pieces are:
     - `GasSafetyForm.tsx`
     - `DemoStyleForm.tsx`
   - These likely represent alternate form layouts or checklist templates used by the checklist page.

4. **Client/server boundary**
   - `src/components/ClientOnly.tsx` indicates there is at least one section that must render only in the browser.
   - This is usually the boundary for browser-dependent behavior such as PDF generation, DOM access, or third-party UI that cannot run during SSR.

5. **Document generation subsystem**
   - `src/utils/pdfGenerator.ts` is a separate utility for producing PDFs from application data or form state.
   - Architecturally, this is an output layer connected to the form/checklist flow: user input is transformed into a downloadable document rather than persisted to a backend.

6. **Reusable UI layer**
   - `src/components/ui/*` contains low-level reusable primitives:
     - `button`, `card`, `badge`, `table`
   - These are shared presentation components used by the domain forms and pages.
   - The presence of `components.json` suggests a **shadcn/ui-style component setup** built on top of Tailwind.

7. **Styling system**
   - Styling is driven by **Tailwind CSS** with global customization in:
     - `tailwind.config.js`
     - `postcss.config.mjs`
     - `src/app/globals.css`
   - `src/lib/utils.ts` likely holds helper functions for class merging/composition, which is typical in Tailwind-based component systems.

8. **Application composition**
   - The likely composition pattern is:
     - routes in `src/app`
     - domain forms in `src/components`
     - shared UI primitives in `src/components/ui`
     - cross-cutting helpers in `src/lib` and `src/utils`
   - This creates a clean separation between route orchestration, domain logic, and presentation primitives.

9. **Asset and static content boundary**
   - `public/` is present for static assets served directly by Next.js.
   - No other asset pipelines or CMS integrations are visible.

10. **Build and tooling**
   - The repo is configured with standard Next.js/TypeScript tooling:
     - `next.config.ts` / `next.config.js`
     - `tsconfig.json`
     - `eslint.config.mjs`
     - `package-lock.json`
   - This is a conventional single-app deployment model, with Vercel mentioned in the README as the expected hosting target.

11. **What the architecture diagram should emphasize**
   - A **route-centric Next.js app** with:
     - one general landing page,
     - one checklist page,
     - shared form/UI components,
     - client-only logic for browser-dependent features,
     - PDF export as the main non-visual output.
   - There are no visible server-side subsystems to diagram beyond Next.js rendering itself.

Main entry points: [`src/components/GasSafetyForm.tsx`](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/GasSafetyForm.tsx) (Gas Form), [`src/app/checklist/page.tsx`](https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/checklist/page.tsx) (Checklist), [`src/components/ui/card.tsx`](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/card.tsx) (Card), [`src/lib/utils.ts`](https://github.com/ponickkhan/orient-gas-app/blob/main/src/lib/utils.ts) (Class Utils)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["App Routes"]
  node_app_layout["Layout<br/>Next.js shell<br/>[layout.tsx]"]
  node_app_home["Home<br/>Route page<br/>[page.tsx]"]
  node_app_checklist["Checklist<br/>Route page<br/>[page.tsx]"]
  node_app_styles["Globals CSS<br/>Global styles<br/>[globals.css]"]
end

subgraph group_domain["Checklist Domain"]
  node_gas_form["Gas Form<br/>Domain form<br/>[GasSafetyForm.tsx]"]
  node_demo_form["Demo Form<br/>Domain form<br/>[DemoStyleForm.tsx]"]
  node_client_only["Client Only<br/>Browser boundary<br/>[ClientOnly.tsx]"]
  node_pdf_gen["PDF Export<br/>Document output<br/>[pdfGenerator.ts]"]
end

subgraph group_ui["UI Primitives"]
  node_ui_button["Button<br/>UI primitive<br/>[button.tsx]"]
  node_ui_card["Card<br/>UI primitive<br/>[card.tsx]"]
  node_ui_badge["Badge<br/>UI primitive<br/>[badge.tsx]"]
  node_ui_table["Table<br/>UI primitive<br/>[table.tsx]"]
end

subgraph group_platform["Platform"]
  node_utils_lib["Class Utils<br/>Helper<br/>[utils.ts]"]
  node_tailwind_cfg["Tailwind<br/>Styling config<br/>[tailwind.config.js]"]
  node_postcss_cfg["PostCSS<br/>Build config<br/>[postcss.config.mjs]"]
  node_components_json["Components JSON<br/>UI config<br/>[components.json]"]
  node_next_cfg["Next Config<br/>Build config<br/>[next.config.ts]"]
  node_public_assets[("Public Assets<br/>Static assets")]
end

node_app_layout -->|"wraps"| node_app_home
node_app_layout -->|"wraps"| node_app_checklist
node_app_layout -->|"imports"| node_app_styles
node_app_home -->|"uses"| node_ui_card
node_app_checklist -->|"renders"| node_gas_form
node_app_checklist -->|"renders"| node_demo_form
node_app_checklist -->|"contains"| node_client_only
node_client_only -->|"enables"| node_pdf_gen
node_gas_form -->|"uses"| node_ui_button
node_gas_form -->|"uses"| node_ui_card
node_gas_form -->|"uses"| node_ui_badge
node_gas_form -->|"uses"| node_ui_table
node_demo_form -->|"uses"| node_ui_button
node_demo_form -->|"uses"| node_ui_card
node_demo_form -->|"uses"| node_ui_badge
node_pdf_gen -->|"uses"| node_utils_lib
node_ui_button -->|"depends on"| node_utils_lib
node_ui_card -->|"depends on"| node_utils_lib
node_ui_badge -->|"depends on"| node_utils_lib
node_ui_table -->|"depends on"| node_utils_lib
node_tailwind_cfg -->|"drives"| node_app_styles
node_postcss_cfg -->|"processes"| node_app_styles
node_components_json -->|"registers"| node_ui_button
node_components_json -->|"registers"| node_ui_card
node_components_json -->|"registers"| node_ui_badge
node_components_json -->|"registers"| node_ui_table
node_next_cfg -->|"configures"| node_app_layout
node_public_assets -.->|"serves"| node_app_home
node_public_assets -.->|"serves"| node_app_checklist

click node_app_layout "https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/layout.tsx"
click node_app_home "https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/page.tsx"
click node_app_checklist "https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/checklist/page.tsx"
click node_app_styles "https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/globals.css"
click node_gas_form "https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/GasSafetyForm.tsx"
click node_demo_form "https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/DemoStyleForm.tsx"
click node_client_only "https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ClientOnly.tsx"
click node_pdf_gen "https://github.com/ponickkhan/orient-gas-app/blob/main/src/utils/pdfGenerator.ts"
click node_ui_button "https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/button.tsx"
click node_ui_card "https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/card.tsx"
click node_ui_badge "https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/badge.tsx"
click node_ui_table "https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/table.tsx"
click node_utils_lib "https://github.com/ponickkhan/orient-gas-app/blob/main/src/lib/utils.ts"
click node_tailwind_cfg "https://github.com/ponickkhan/orient-gas-app/blob/main/tailwind.config.js"
click node_postcss_cfg "https://github.com/ponickkhan/orient-gas-app/blob/main/postcss.config.mjs"
click node_components_json "https://github.com/ponickkhan/orient-gas-app/blob/main/components.json"
click node_next_cfg "https://github.com/ponickkhan/orient-gas-app/blob/main/next.config.ts"
click node_public_assets "https://github.com/ponickkhan/orient-gas-app/tree/main/public"

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_layout,node_app_home,node_app_checklist,node_app_styles toneBlue
class node_gas_form,node_demo_form,node_client_only,node_pdf_gen toneAmber
class node_ui_button,node_ui_card,node_ui_badge,node_ui_table toneMint
class node_utils_lib,node_tailwind_cfg,node_postcss_cfg,node_components_json,node_next_cfg,node_public_assets toneRose
```

## Components

### App Routes

Next.js App Router entry points and shared shell

- [Layout](https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/layout.tsx): Next.js shell · Global app shell and shared providers/styling entry · `src/app/layout.tsx`
- [Home](https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/page.tsx): Route page · Landing page route · `src/app/page.tsx`
- [Checklist](https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/checklist/page.tsx): Route page · Dedicated checklist workflow route · `src/app/checklist/page.tsx`
- [Globals CSS](https://github.com/ponickkhan/orient-gas-app/blob/main/src/app/globals.css): Global styles · Application-wide stylesheet and Tailwind base layer · `src/app/globals.css`

### Checklist Domain

Form-driven workflow and browser-only boundary

- [Gas Form](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/GasSafetyForm.tsx): Domain form · Primary gas safety checklist form/template · `src/components/GasSafetyForm.tsx`
- [Demo Form](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/DemoStyleForm.tsx): Domain form · Alternate demo-style form/template · `src/components/DemoStyleForm.tsx`
- [Client Only](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ClientOnly.tsx): Browser boundary · Wrapper for browser-dependent rendering logic · `src/components/ClientOnly.tsx`
- [PDF Export](https://github.com/ponickkhan/orient-gas-app/blob/main/src/utils/pdfGenerator.ts): Document output · Utility that turns form state into downloadable PDFs · `src/utils/pdfGenerator.ts`

### UI Primitives

Reusable presentation components

- [Button](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/button.tsx): UI primitive · Shared interactive control · `src/components/ui/button.tsx`
- [Card](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/card.tsx): UI primitive · Shared content container · `src/components/ui/card.tsx`
- [Badge](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/badge.tsx): UI primitive · Shared status/label element · `src/components/ui/badge.tsx`
- [Table](https://github.com/ponickkhan/orient-gas-app/blob/main/src/components/ui/table.tsx): UI primitive · Shared tabular presentation component · `src/components/ui/table.tsx`

### Platform

Styling, utilities, and build configuration

- [Class Utils](https://github.com/ponickkhan/orient-gas-app/blob/main/src/lib/utils.ts): Helper · Tailwind class composition helper · `src/lib/utils.ts`
- [Tailwind](https://github.com/ponickkhan/orient-gas-app/blob/main/tailwind.config.js): Styling config · Tailwind theme and content configuration · `tailwind.config.js`
- [PostCSS](https://github.com/ponickkhan/orient-gas-app/blob/main/postcss.config.mjs): Build config · PostCSS pipeline configuration · `postcss.config.mjs`
- [Components JSON](https://github.com/ponickkhan/orient-gas-app/blob/main/components.json): UI config · shadcn-style component registry/configuration · `components.json`
- [Next Config](https://github.com/ponickkhan/orient-gas-app/blob/main/next.config.ts): Build config · Next.js app configuration · `next.config.ts`
- [Public Assets](https://github.com/ponickkhan/orient-gas-app/tree/main/public): Static assets · Directly served static files · `public`

## Connections

- Layout → Home: wraps · Shared layout applies to the landing route
- Layout → Checklist: wraps · Shared layout applies to the checklist route
- Layout → Globals CSS: imports · Global CSS is loaded by the app shell
- Home → Card: uses · Home page renders with shared UI containers
- Checklist → Gas Form: renders · Checklist route hosts the main gas safety form
- Checklist → Demo Form: renders · Checklist route can use an alternate demo template
- Checklist → Client Only: contains · Browser-dependent portions are isolated to client-only rendering
- Client Only → PDF Export: enables · Client boundary supports DOM or browser-based PDF generation
- Gas Form → Button: uses · Form actions rely on shared buttons
- Gas Form → Card: uses · Form sections use shared cards
- Gas Form → Badge: uses · Form state or labels use badges
- Gas Form → Table: uses · Checklist data can be shown in tables
- Demo Form → Button: uses · Template actions rely on shared buttons
- Demo Form → Card: uses · Template sections use shared cards
- Demo Form → Badge: uses · Template state or labels use badges
- PDF Export → Class Utils: uses · PDF output likely reuses shared helper utilities
- Button → Class Utils: depends on · UI primitives use class composition helpers
- Card → Class Utils: depends on · UI primitives use class composition helpers
- Badge → Class Utils: depends on · UI primitives use class composition helpers
- Table → Class Utils: depends on · UI primitives use class composition helpers
- Tailwind → Globals CSS: drives · Tailwind config shapes the global stylesheet
- PostCSS → Globals CSS: processes · PostCSS participates in stylesheet compilation
- Components JSON → Button: registers · Component registry includes shared primitives
- Components JSON → Card: registers · Component registry includes shared primitives
- Components JSON → Badge: registers · Component registry includes shared primitives
- Components JSON → Table: registers · Component registry includes shared primitives
- Next Config → Layout: configures · Next.js build/runtime settings govern the app shell
- Public Assets → Home: serves · Static assets are available to the landing experience
- Public Assets → Checklist: serves · Static assets are available to the checklist experience