programmerpakistaniorg/soltronicsenergy

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.