# mhgkhan/jobsinkpk architecture

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

## Overview

JobsInkPK is a public jobs listing site. Visitors browse current listings on the home page, then open a job detail page; the pages fetch listing and detail data from an external backend. The home page also submits visitor/device information for dashboard counts. Contact information and a message form are provided separately. Source excerpts support these main routes and shared layout; the backend internals and any form submission handling are not present in the sampled code.

Main entry points: [`src/app/page.js`](https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/page.js) (Job listings), [`src/app/contactus/layout.js`](https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/contactus/layout.js) (Contact page), [`src/components/Header.jsx`](https://github.com/mhgkhan/jobsinkpk/blob/main/src/components/Header.jsx) (Site navigation), [`src/app/layout.js`](https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/layout.js) (Shared layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browse["Job browsing"]
  node_home["Job listings<br/>[page.js]"]
  node_details["Job details<br/>[page.js]"]
  node_dashboard["Site counters"]
  node_sitemap["Job sitemap<br/>[sitemap.js]"]
end

subgraph group_site["Site experience"]
  node_layout["Shared layout<br/>[layout.js]"]
  node_header["Site navigation<br/>[Header.jsx]"]
  node_footer["Site footer<br/>[Footer.jsx]"]
end

subgraph group_contact["Contact"]
  node_contact["Contact page<br/>[layout.js]"]
end

node_visitor(("Site visitor"))
node_backend[("Jobs backend")]
node_email(("Email service"))
node_whatsapp(("WhatsApp"))

node_visitor -->|"requests listings"| node_home
node_home -->|"fetches job list"| node_backend
node_home -->|"posts visitor data"| node_backend
node_home -->|"passes counts"| node_dashboard
node_visitor -->|"opens job"| node_details
node_details -->|"fetches job"| node_backend
node_sitemap -->|"calls fetchJobs"| node_home
node_layout -->|"renders navigation"| node_header
node_layout -->|"renders footer"| node_footer
node_visitor -->|"opens contact"| node_contact
node_contact -.->|"links to email"| node_email
node_contact -.->|"links to WhatsApp"| node_whatsapp
node_header -->|"links home"| node_home
node_header -->|"links contact"| node_contact

click node_home "https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/page.js"
click node_details "https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/job/%5B...slug%5D/page.js"
click node_dashboard "https://github.com/mhgkhan/jobsinkpk/blob/main/src/components/SimpleDashboard.jsx"
click node_sitemap "https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/sitemap.js"
click node_layout "https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/layout.js"
click node_header "https://github.com/mhgkhan/jobsinkpk/blob/main/src/components/Header.jsx"
click node_footer "https://github.com/mhgkhan/jobsinkpk/blob/main/src/components/Footer.jsx"
click node_contact "https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/contactus/layout.js"

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_home,node_details,node_dashboard,node_sitemap toneBlue
class node_layout,node_header,node_footer,node_backend toneAmber
class node_contact toneMint
class node_visitor,node_email,node_whatsapp toneIndigo
```

## Components

### Job browsing

- [Job listings](https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/page.js): `src/app/page.js`
- [Job details](https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/job/%5B...slug%5D/page.js): `src/app/job/[...slug]/page.js`
- [Site counters](https://github.com/mhgkhan/jobsinkpk/blob/main/src/components/SimpleDashboard.jsx): `src/components/SimpleDashboard.jsx`
- [Job sitemap](https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/sitemap.js): `src/app/sitemap.js`

### Site experience

- [Shared layout](https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/layout.js): `src/app/layout.js`
- [Site navigation](https://github.com/mhgkhan/jobsinkpk/blob/main/src/components/Header.jsx): `src/components/Header.jsx`
- [Site footer](https://github.com/mhgkhan/jobsinkpk/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Contact

- [Contact page](https://github.com/mhgkhan/jobsinkpk/blob/main/src/app/contactus/layout.js): `src/app/contactus/layout.js`

### Other components

- **Site visitor**
- **Jobs backend**
- **Email service**
- **WhatsApp**

## Connections

- Site visitor → Job listings: requests listings
- Job listings → Jobs backend: fetches job list
- Job listings → Jobs backend: posts visitor data
- Job listings → Site counters: passes counts
- Site visitor → Job details: opens job
- Job details → Jobs backend: fetches job
- Job sitemap → Job listings: calls fetchJobs
- Shared layout → Site navigation: renders navigation
- Shared layout → Site footer: renders footer
- Site visitor → Contact page: opens contact
- Contact page → Email service: links to email
- Contact page → WhatsApp: links to WhatsApp
- Site navigation → Job listings: links home
- Site navigation → Contact page: links contact