# shyamsharma23/cetizionv2 architecture

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

- Interactive diagram: https://gitdiagram.com/shyamsharma23/cetizionv2
- Repository: https://github.com/shyamsharma23/cetizionv2

## Overview

1. **Overall shape**
   - This is a **single-page React application built with Vite**. The README is just the starter template, but the file tree shows a much larger production-style app with many routed pages, content sections, and admin workflows.

2. **App shell and entry points**
   - `src/main.jsx` and `src/App.jsx` are the top-level bootstrapping and composition points.
   - `index.html` plus Vite config files (`vite.config.js`, `postcss.config.js`, `tailwind.config.js`) define the build/runtime shell and styling pipeline.

3. **Global state and access control**
   - `src/AuthContext/AuthContext.jsx` is the main global state boundary for authentication/session-like behavior.
   - Pages such as login, register, forgot password, admin dashboard, and sales/dashboard layouts likely consume this context to gate protected screens and control navigation.

4. **Layout and navigation structure**
   - `src/components/layout` contains the application chrome:
     - `Header`, `Header2`, `Footer`, and `Layout` for general site framing
     - `SalesDashboardLayout` for a separate authenticated/business workspace
     - `PdfModal`, `SlidePresentation`, and `Disable` for specialized UI states
   - This suggests two main navigation experiences: a public marketing site and an internal/admin area.

5. **Public landing-site subsystem**
   - `src/components/LandingPage/*` is a modular marketing homepage:
     - `HeroSection`, `ServiceOverview`, `ServicesSection`, `FeaturesComponent`
     - `ExpertSection`, `HappyClients`, `TechCarousel`
     - `MissionPage`, `VisionPage`, `ValuesPage`, `MissionVisionValues`
     - `CookieConsent` and `NotificationPopup`
   - The landing page is built from many stacked content blocks rather than a single monolith.

6. **Business workflow pages**
   - `src/components/pages/*` contains the routed application pages:
     - public/company pages like `Aboutus`, `Approach`, `ContactUs`, `Home`, `GlobalFootprint`, `LatestNews`, `PrivacyPolicy`, `Terms`
     - customer interaction pages like `Quotation`, `Customers`, `Complaints`, `ThankYou`
     - auth pages like `Login`, `Register`, `ForgotPassword`
     - certificate/admin pages like `SearchCertificate`, `AddCertificate`, `ManageCertificates`, `AdminDashboard`
   - `MainParent` and `ParentForm` suggest route grouping or shared page composition for form-driven flows.

7. **Document and certificate handling**
   - `DocComponent`, `PdfModal`, `SearchCertificate`, `AddCertificate`, `ManageCertificates`, and `ShowingImage` / `ShowingQRcodeImage` indicate a workflow centered on **displaying, searching, and managing certificates/documents**.
   - The app likely uses PDFs and QR/image assets as primary artifacts in this domain.

8. **Forms and service requests**
   - `src/components/pages/service_request_page/FormComponent.jsx` and `src/components/Email.jsx` point to user-submitted request flows, likely feeding internal handling or email delivery.
   - `Quotation`, `ContactUs`, `Complaints`, and `ParentForm` look like the main ingress points for structured user input.

9. **Domain-specific service layer**
   - `src/components/services/DomianService.js` is the closest thing to a service boundary.
   - Even without backend files in the repo, this suggests domain logic or API interaction is separated from presentational components, especially around certificates, requests, or admin actions.

10. **Content/media-heavy asset model**
   - The repo carries a large `src/assets` and `public` footprint: videos, audio notifications, PDFs, client logos, images, and packaged assets.
   - This is not a thin app shell; it is a **media/document distribution site** where static assets are part of core functionality.

11. **Static hosting and SPA routing**
   - `public/_redirects` indicates deployment on a static host that needs **client-side route fallback** for SPA navigation.
   - The architecture therefore depends on browser-side routing rather than server-rendered pages.

12. **Styling and presentation**
   - Styling is split across `src/App.css`, `src/index.css`, Tailwind config, and PostCSS.
   - That points to a mixed styling model: utility-driven layout plus component/page-specific CSS where needed.

13. **Likely architectural boundaries**
   - Public-facing marketing content
   - Authenticated/admin certificate management
   - Document/media rendering
   - Form submission/contact/request flows
   - Shared layout and global state
   - Static asset delivery
   - These are the main boundaries to show in an architecture diagram.

14. **Practical diagram takeaway**
   - If you draw this repo, the central node is a React SPA with:
     - a **public site layer**
     - an **authenticated business/admin layer**
     - a **shared auth/context layer**
     - a **document/media asset layer**
     - and a **service/API boundary** behind forms, certificates, and admin operations.

Main entry points: [`src/App.jsx`](https://github.com/shyamsharma23/cetizionv2/blob/main/src/App.jsx) (App), [`src/components/pages/Home.jsx`](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/Home.jsx) (Public pages), [`src/components/pages/Quotation.jsx`](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/Quotation.jsx) (Request forms), [`src/components/layout/Layout.jsx`](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/Layout.jsx) (Site layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_shell["App Shell"]
  node_node_main(("Main<br/>Vite entry<br/>[main.jsx]"))
  node_node_app["App<br/>SPA router<br/>[App.jsx]"]
  node_node_styles["Styles<br/>CSS/Tailwind<br/>[index.css]"]
  node_node_build["Vite config<br/>build config<br/>[vite.config.js]"]
  node_node_public_host["SPA host<br/>hosting config"]
end

subgraph group_group_state["Global State"]
  node_node_auth(("Auth context<br/>state provider<br/>[AuthContext.jsx]"))
end

subgraph group_group_public["Public Site"]
  node_node_public_home["Landing page<br/>marketing sections<br/>[HeroSection.jsx]"]
  node_node_public_value["Value pages<br/>marketing content"]
  node_node_public_social["Social proof<br/>marketing content<br/>[HappyClients.jsx]"]
  node_node_pages_public["Public pages<br/>routes<br/>[Home.jsx]"]
end

subgraph group_group_workspace["Workspace"]
  node_node_pages_forms["Request forms<br/>routes<br/>[Quotation.jsx]"]
  node_node_pages_auth["Auth pages<br/>routes<br/>[Login.jsx]"]
  node_node_pages_admin["Admin pages<br/>routes<br/>[AdminDashboard.jsx]"]
  node_node_forms["Form component<br/>input flow<br/>[FormComponent.jsx]"]
end

subgraph group_group_shared["Shared UI"]
  node_node_layout["Site layout<br/>layout shell<br/>[Layout.jsx]"]
  node_node_sales_layout["Sales layout<br/>workspace shell"]
  node_node_header["Header<br/>navigation<br/>[Header.jsx]"]
  node_node_footer["Footer<br/>navigation<br/>[Footer.jsx]"]
  node_node_modal["PDF modal<br/>viewer<br/>[PdfModal.jsx]"]
end

subgraph group_group_domain["Domain Services"]
  node_node_cert["Certificate flow<br/>document workflow"]
  node_node_doc["Docs viewer<br/>document handling<br/>[DocComponent.jsx]"]
  node_node_service["Domain service<br/>api/service layer<br/>[DomianService.js]"]
end

subgraph group_group_assets["Assets"]
  node_node_assets[("Media library<br/>static assets")]
end

node_node_main -->|"boots"| node_node_app
node_node_app -->|"wraps"| node_node_auth
node_node_app -->|"renders"| node_node_layout
node_node_app -->|"renders"| node_node_sales_layout
node_node_app -->|"routes"| node_node_public_home
node_node_app -->|"routes"| node_node_pages_public
node_node_app -->|"routes"| node_node_pages_forms
node_node_app -->|"routes"| node_node_pages_auth
node_node_app -->|"routes"| node_node_pages_admin
node_node_layout -->|"includes"| node_node_header
node_node_layout -->|"includes"| node_node_footer
node_node_pages_public -->|"uses"| node_node_public_value
node_node_pages_public -->|"uses"| node_node_public_social
node_node_pages_forms -->|"contains"| node_node_forms
node_node_pages_forms -->|"submits"| node_node_service
node_node_pages_auth -->|"guards"| node_node_auth
node_node_pages_admin -->|"manages"| node_node_cert
node_node_cert -->|"renders"| node_node_doc
node_node_cert -->|"calls"| node_node_service
node_node_doc -->|"opens"| node_node_modal
node_node_service -->|"reads"| node_node_assets
node_node_public_home -->|"plays"| node_node_assets
node_node_styles -->|"supports"| node_node_app
node_node_build -->|"configures"| node_node_app
node_node_public_host -->|"fallback"| node_node_app

click node_node_main "https://github.com/shyamsharma23/cetizionv2/blob/main/src/main.jsx"
click node_node_app "https://github.com/shyamsharma23/cetizionv2/blob/main/src/App.jsx"
click node_node_styles "https://github.com/shyamsharma23/cetizionv2/blob/main/src/index.css"
click node_node_build "https://github.com/shyamsharma23/cetizionv2/blob/main/vite.config.js"
click node_node_auth "https://github.com/shyamsharma23/cetizionv2/blob/main/src/AuthContext/AuthContext.jsx"
click node_node_layout "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/Layout.jsx"
click node_node_sales_layout "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/SalesDashboardLayout.jsx"
click node_node_header "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/Header.jsx"
click node_node_footer "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/Footer.jsx"
click node_node_modal "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/PdfModal.jsx"
click node_node_public_home "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/LandingPage/HeroSection.jsx"
click node_node_public_value "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/LandingPage/MissionVisionValues.jsx"
click node_node_public_social "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/LandingPage/HappyClients.jsx"
click node_node_pages_public "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/Home.jsx"
click node_node_pages_forms "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/Quotation.jsx"
click node_node_pages_auth "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/Login.jsx"
click node_node_pages_admin "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/AdminDashboard.jsx"
click node_node_forms "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/service_request_page/FormComponent.jsx"
click node_node_cert "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/SearchCertificate.jsx"
click node_node_doc "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/DocComponent.jsx"
click node_node_service "https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/services/DomianService.js"
click node_node_assets "https://github.com/shyamsharma23/cetizionv2/tree/main/src/assets"
click node_node_public_host "https://github.com/shyamsharma23/cetizionv2/tree/main/public/_redirects"

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_node_main,node_node_app,node_node_styles,node_node_build,node_node_public_host,node_node_assets toneBlue
class node_node_auth toneAmber
class node_node_public_home,node_node_public_value,node_node_public_social,node_node_pages_public toneMint
class node_node_pages_forms,node_node_pages_auth,node_node_pages_admin,node_node_forms toneRose
class node_node_layout,node_node_sales_layout,node_node_header,node_node_footer,node_node_modal toneIndigo
class node_node_cert,node_node_doc,node_node_service toneTeal
```

## Components

### App Shell

Vite entry, global styling, routing, and SPA host setup

- [Main](https://github.com/shyamsharma23/cetizionv2/blob/main/src/main.jsx): Vite entry · Application bootstrap and render root · `src/main.jsx`
- [App](https://github.com/shyamsharma23/cetizionv2/blob/main/src/App.jsx): SPA router · Top-level composition and route wiring · `src/App.jsx`
- [Styles](https://github.com/shyamsharma23/cetizionv2/blob/main/src/index.css): CSS/Tailwind · Global and utility styling pipeline · `src/index.css`
- [Vite config](https://github.com/shyamsharma23/cetizionv2/blob/main/vite.config.js): build config · Build and dev-server configuration · `vite.config.js`
- [SPA host](https://github.com/shyamsharma23/cetizionv2/tree/main/public/_redirects): hosting config · Client-side route fallback for static deployment · `public/_redirects`

### Global State

Shared authentication/session boundary

- [Auth context](https://github.com/shyamsharma23/cetizionv2/blob/main/src/AuthContext/AuthContext.jsx): state provider · Authentication and session boundary · `src/AuthContext/AuthContext.jsx`

### Public Site

Marketing and informational landing experience

- [Landing page](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/LandingPage/HeroSection.jsx): marketing sections · Stacked public homepage content blocks · `src/components/LandingPage/HeroSection.jsx`
- [Value pages](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/LandingPage/MissionVisionValues.jsx): marketing content · Mission, vision, values, service and features sections · `src/components/LandingPage/MissionVisionValues.jsx`
- [Social proof](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/LandingPage/HappyClients.jsx): marketing content · Client, expert, tech, and notification components · `src/components/LandingPage/HappyClients.jsx`
- [Public pages](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/Home.jsx): routes · Company, policy, and informational screens · `src/components/pages/Home.jsx`

### Workspace

Authenticated/admin certificate and service workflows

- [Request forms](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/Quotation.jsx): routes · Quotation, contact, complaints, and thank-you flows · `src/components/pages/Quotation.jsx`
- [Auth pages](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/Login.jsx): routes · Login, register, and password recovery screens · `src/components/pages/Login.jsx`
- [Admin pages](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/AdminDashboard.jsx): routes · Certificate search, creation, management, and dashboard · `src/components/pages/AdminDashboard.jsx`
- [Form component](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/service_request_page/FormComponent.jsx): input flow · Service request form entry point · `src/components/pages/service_request_page/FormComponent.jsx`

### Shared UI

Reusable layout, modal, and presentation components

- [Site layout](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/Layout.jsx): layout shell · Public site framing and shared chrome · `src/components/layout/Layout.jsx`
- [Sales layout](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/SalesDashboardLayout.jsx): workspace shell · Authenticated business workspace framing · `src/components/layout/SalesDashboardLayout.jsx`
- [Header](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/Header.jsx): navigation · Primary site navigation · `src/components/layout/Header.jsx`
- [Footer](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/Footer.jsx): navigation · Site footer and closing links · `src/components/layout/Footer.jsx`
- [PDF modal](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/layout/PdfModal.jsx): viewer · Document preview and overlay presentation · `src/components/layout/PdfModal.jsx`

### Domain Services

Service layer and document/media handling

- [Certificate flow](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/pages/SearchCertificate.jsx): document workflow · Search, add, manage, and render certificates/documents · `src/components/pages/SearchCertificate.jsx`
- [Docs viewer](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/DocComponent.jsx): document handling · Document rendering and image/QR display helpers · `src/components/DocComponent.jsx`
- [Domain service](https://github.com/shyamsharma23/cetizionv2/blob/main/src/components/services/DomianService.js): api/service layer · Central domain logic and backend interaction boundary · `src/components/services/DomianService.js`

### Assets

Static media and downloadable documents

- [Media library](https://github.com/shyamsharma23/cetizionv2/tree/main/src/assets): static assets · Videos, PDFs, logos, images, and downloadable files · `src/assets`

## Connections

- Main → App: boots · Entry point mounts the application shell
- App → Auth context: wraps · Top-level app composes auth/session context
- App → Site layout: renders · Public routes use the shared site layout
- App → Sales layout: renders · Protected workspace uses a separate shell
- App → Landing page: routes · App routes into landing page sections
- App → Public pages: routes · App routes into public informational screens
- App → Request forms: routes · App routes into customer request flows
- App → Auth pages: routes · App routes into login and recovery flows
- App → Admin pages: routes · App routes into admin and certificate screens
- Site layout → Header: includes · Shared shell includes top navigation
- Site layout → Footer: includes · Shared shell includes footer
- Public pages → Value pages: uses · Public pages reuse marketing content blocks
- Public pages → Social proof: uses · Public pages reuse social-proof components
- Request forms → Form component: contains · Request-oriented pages use form entry components
- Request forms → Domain service: submits · Form flows connect to domain/service logic
- Auth pages → Auth context: guards · Auth screens and protected areas rely on shared auth state
- Admin pages → Certificate flow: manages · Admin screens center on certificate workflow
- Certificate flow → Docs viewer: renders · Certificate workflow uses document and image viewers
- Certificate flow → Domain service: calls · Certificate actions go through domain service boundary
- Docs viewer → PDF modal: opens · Document previews are shown in modal UI
- Domain service → Media library: reads · Domain and UI consume static PDFs and media assets
- Landing page → Media library: plays · Hero and landing content use bundled media
- Styles → App: supports · Global styling supports the app shell
- Vite config → App: configures · Vite config shapes the development and build runtime
- SPA host → App: fallback · Static hosting falls back to client-side routing