# programmerpakistaniorg/soltronicsenergy architecture

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

- Interactive diagram: https://gitdiagram.com/programmerpakistaniorg/soltronicsenergy
- Repository: https://github.com/programmerpakistaniorg/soltronicsenergy

## Overview

#### Purpose and Runtime
A Next.js App Router site for Soltronic’s solar/product catalogue, corporate content, and customer-facing product discovery. It runs as a TypeScript React application, uses Tailwind/PostCSS styling, and is configured for Vercel deployment. Primary shell and landing entry points are `src/app/layout.tsx`, `src/app/page.tsx`, and `next.config.ts`.

#### Route Layer and Content Surfaces
The `src/app` directory defines server-rendered route entry points for catalogue, brands, news, services, PV/EPC, downloads, promotions, and marketing pages. Dynamic routes provide entity detail views:
- Product list/detail: `src/app/products/page.tsx`, `src/app/products/[slug]/page.tsx`
- Brand list/detail: `src/app/brands/page.tsx`, `src/app/brands/[brand]/page.tsx`
- News list/detail: `src/app/news/page.tsx`, `src/app/news/[slug]/page.tsx`

SEO crawl boundaries are explicitly generated in `src/app/sitemap.ts` and `src/app/robots.ts`.

#### Product Catalogue Pipeline
Products are represented by local application data and backed by static public assets. Catalogue routes pass interactive filtering/display responsibility to client components, while detail pages use a dedicated client renderer:
- `src/data/products.ts`
- `src/app/products/ProductsClient.tsx`
- `src/app/products/[slug]/ProductDetailClient.tsx`

Product specifications are structured using `src/data/specificationSchemas.ts` and rendered through `src/components/ProductSpecificationDisplay.tsx`. Datasheets and product images are served directly from `public/Products Datasheets` and `public/Products-images`, making static files an important delivery boundary.

#### Shared UI Composition
Routes compose reusable site-navigation and marketing/product components rather than each implementing their own shell. The global layout and styles establish the shared visual boundary; navigation/footer are centralized:
- `src/app/layout.tsx`
- `src/app/globals.css`
- `src/components/Navbar.tsx`
- `src/components/Footer.tsx`
- `src/components/HeroSlider.tsx`

Structured-data output is isolated in `src/components/SchemaMarkup.tsx`, allowing route content to provide SEO metadata without coupling to page layout.

#### Authentication and Supabase Boundary
Supabase is the external backend/authentication boundary, with separate browser, server, and middleware client factories:
- `src/utils/supabase/client.ts`
- `src/utils/supabase/server.ts`
- `src/utils/supabase/middleware.ts`

Authentication state is distributed through `src/context/AuthContext.tsx`; OAuth/session completion enters via `src/app/auth/callback/route.ts`. Sign-in and sign-up pages are route-level consumers at `src/app/signin/page.tsx` and `src/app/signup/page.tsx`.

#### Client-Side Favourites
Favourite products are managed as cross-page client state, distinct from catalogue data and authentication. The context owns state/control flow, while drawer, toast, and per-product controls are presentation consumers:
- `src/context/FavouriteContext.tsx`
- `src/components/FavouriteButton.tsx`
- `src/components/FavouriteDrawer.tsx`
- `src/app/favourite/page.tsx`

#### Content Import and Asset Preparation
A set of Node.js and Python scripts supports an offline ingestion/normalization workflow from Excel and product media into the application’s static catalogue assets/data. Key pipeline entry points are `import_products.js`, `process_products.js`, `scripts/seed_products_from_excel.js`, and `fix_backgrounds.py`. Source spreadsheets under `public/` and generated product images/datasheets are deployment-time content, not runtime API dependencies.

Main entry points: [`src/app/products/[slug]/ProductDetailClient.tsx`](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/products/%5Bslug%5D/ProductDetailClient.tsx) (Product detail renderer), [`src/data/products.ts`](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/data/products.ts) (Product data), [`import_products.js`](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/import_products.js) (Catalogue ingestion scripts), [`src/app/products/ProductsClient.tsx`](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/products/ProductsClient.tsx) (Product browser)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Next.js application"]
  node_layout["Global layout<br/>App shell<br/>[layout.tsx]"]
  node_routes["Content routes<br/>Server route entries<br/>[page.tsx]"]
  node_shared_ui["Shared navigation and marketing UI<br/>Reusable components<br/>[Navbar.tsx]"]
  node_seo["SEO output<br/>Metadata and crawl controls<br/>[SchemaMarkup.tsx]"]
end

subgraph group_catalogue["Product catalogue"]
  node_product_routes["Product routes<br/>List and detail routes<br/>[page.tsx]"]
  node_product_data[("Product data<br/>Local catalogue data<br/>[products.ts]")]
  node_products_client["Product browser<br/>Client component<br/>[ProductsClient.tsx]"]
  node_product_detail["Product detail renderer<br/>Client component"]
  node_spec_schemas["Specification schemas<br/>Structured product data"]
  node_spec_display["Specification display<br/>Shared component"]
  node_product_assets["Product static assets<br/>Images and datasheets"]
  node_favourites["Favourites context<br/>Client cross-page state"]
  node_favourite_ui["Favourites UI<br/>Controls, drawer, and page"]
end

subgraph group_identity["Authentication"]
  node_auth_routes["Auth routes<br/>Sign-in, sign-up, callback<br/>[route.ts]"]
  node_auth_context["Auth context<br/>Client auth state<br/>[AuthContext.tsx]"]
  node_supabase_clients{{"Supabase client factories<br/>Browser, server, middleware<br/>[client.ts]"}}
  node_supabase[("Supabase<br/>External auth backend")]
end

subgraph group_content["Content preparation"]
  node_ingestion["Catalogue ingestion scripts<br/>[import_products.js]"]
  node_source_sheets["Source spreadsheets<br/>Offline Excel input"]
end

node_layout -->|"composes"| node_shared_ui
node_layout -->|"provides state"| node_favourites
node_routes -->|"composes"| node_shared_ui
node_routes -->|"provides content"| node_seo
node_product_routes -->|"renders list"| node_products_client
node_product_routes -->|"renders detail"| node_product_detail
node_products_client -->|"reads"| node_product_data
node_product_detail -->|"reads"| node_product_data
node_product_detail -->|"uses"| node_spec_schemas
node_product_detail -->|"renders through"| node_spec_display
node_products_client -->|"references"| node_product_assets
node_product_detail -->|"serves images and datasheets"| node_product_assets
node_favourite_ui -->|"consumes"| node_favourites
node_favourites -->|"tracks products from"| node_product_data
node_auth_routes -->|"updates session"| node_auth_context
node_auth_context -->|"uses"| node_supabase_clients
node_auth_routes -->|"uses"| node_supabase_clients
node_supabase_clients -->|"connects to"| node_supabase
node_ingestion -->|"imports from"| node_source_sheets
node_ingestion -.->|"generates or normalizes"| node_product_data
node_ingestion -.->|"prepares"| node_product_assets

click node_layout "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/layout.tsx"
click node_routes "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/page.tsx"
click node_product_routes "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/products/page.tsx"
click node_product_data "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/data/products.ts"
click node_products_client "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/products/ProductsClient.tsx"
click node_product_detail "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/products/%5Bslug%5D/ProductDetailClient.tsx"
click node_spec_schemas "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/data/specificationSchemas.ts"
click node_spec_display "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/components/ProductSpecificationDisplay.tsx"
click node_product_assets "https://github.com/programmerpakistaniorg/soltronicsenergy/tree/main/public/Products-images"
click node_shared_ui "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/components/Navbar.tsx"
click node_seo "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/components/SchemaMarkup.tsx"
click node_auth_routes "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/auth/callback/route.ts"
click node_auth_context "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/context/AuthContext.tsx"
click node_supabase_clients "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/utils/supabase/client.ts"
click node_favourites "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/context/FavouriteContext.tsx"
click node_favourite_ui "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/components/FavouriteButton.tsx"
click node_ingestion "https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/import_products.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_layout,node_routes,node_shared_ui,node_seo toneBlue
class node_product_routes,node_product_data,node_products_client,node_product_detail,node_spec_schemas,node_spec_display,node_product_assets,node_favourites,node_favourite_ui toneAmber
class node_auth_routes,node_auth_context,node_supabase_clients,node_supabase toneMint
class node_ingestion,node_source_sheets toneRose
```

## Components

### Next.js application

App Router routes, shell, and shared UI.

- [Global layout](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/layout.tsx): App shell · Establishes the shared site visual boundary. · `src/app/layout.tsx`
- [Content routes](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/page.tsx): Server route entries · Catalogue, brands, news, services, PV/EPC, downloads, promotions, and marketing pages. · `src/app/page.tsx`
- [Shared navigation and marketing UI](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/components/Navbar.tsx): Reusable components · Includes Navbar, Footer, and HeroSlider. · `src/components/Navbar.tsx`
- [SEO output](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/components/SchemaMarkup.tsx): Metadata and crawl controls · Structured data plus sitemap and robots boundaries. · `src/components/SchemaMarkup.tsx`

### Product catalogue

Local catalogue data, interactive views, and static product assets.

- [Product routes](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/products/page.tsx): List and detail routes · `src/app/products/page.tsx`
- [Product data](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/data/products.ts): Local catalogue data · `src/data/products.ts`
- [Product browser](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/products/ProductsClient.tsx): Client component · Provides interactive catalogue filtering and display. · `src/app/products/ProductsClient.tsx`
- [Product detail renderer](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/products/%5Bslug%5D/ProductDetailClient.tsx): Client component · `src/app/products/[slug]/ProductDetailClient.tsx`
- [Specification schemas](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/data/specificationSchemas.ts): Structured product data · `src/data/specificationSchemas.ts`
- [Specification display](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/components/ProductSpecificationDisplay.tsx): Shared component · `src/components/ProductSpecificationDisplay.tsx`
- [Product static assets](https://github.com/programmerpakistaniorg/soltronicsenergy/tree/main/public/Products-images): Images and datasheets · Delivered directly as public deployment assets. · `public/Products-images`
- [Favourites context](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/context/FavouriteContext.tsx): Client cross-page state · `src/context/FavouriteContext.tsx`
- [Favourites UI](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/components/FavouriteButton.tsx): Controls, drawer, and page · `src/components/FavouriteButton.tsx`

### Authentication

Supabase-backed session and OAuth boundary.

- [Auth routes](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/app/auth/callback/route.ts): Sign-in, sign-up, callback · OAuth/session completion enters through the callback route. · `src/app/auth/callback/route.ts`
- [Auth context](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/context/AuthContext.tsx): Client auth state · `src/context/AuthContext.tsx`
- [Supabase client factories](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/src/utils/supabase/client.ts): Browser, server, middleware · Separates Supabase access by Next.js runtime boundary. · `src/utils/supabase/client.ts`
- **Supabase**: External auth backend

### Content preparation

Offline spreadsheet and media ingestion workflow.

- [Catalogue ingestion scripts](https://github.com/programmerpakistaniorg/soltronicsenergy/blob/main/import_products.js): Node and Python offline pipeline · Imports and normalizes spreadsheet and product media inputs. · `import_products.js`
- **Source spreadsheets**: Offline Excel input

## Connections

- Global layout → Shared navigation and marketing UI: composes
- Global layout → Favourites context: provides state
- Content routes → Shared navigation and marketing UI: composes
- Content routes → SEO output: provides content
- Product routes → Product browser: renders list
- Product routes → Product detail renderer: renders detail
- Product browser → Product data: reads
- Product detail renderer → Product data: reads
- Product detail renderer → Specification schemas: uses
- Product detail renderer → Specification display: renders through
- Product browser → Product static assets: references
- Product detail renderer → Product static assets: serves images and datasheets
- Favourites UI → Favourites context: consumes
- Favourites context → Product data: tracks products from
- Auth routes → Auth context: updates session
- Auth context → Supabase client factories: uses
- Auth routes → Supabase client factories: uses
- Supabase client factories → Supabase: connects to
- Catalogue ingestion scripts → Source spreadsheets: imports from
- Catalogue ingestion scripts → Product data: generates or normalizes
- Catalogue ingestion scripts → Product static assets: prepares