# abhishek-sharma2028/policy_ease_website architecture

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

- Interactive diagram: https://gitdiagram.com/abhishek-sharma2028/policy_ease_website
- Repository: https://github.com/abhishek-sharma2028/policy_ease_website

## Overview

#### Purpose and Runtime

This is a Vite-served React 19 single-page “Policy Translator Platform.” It presents a fixed, curated catalogue of Indian policies and welfare schemes in simplified language, organized by audience category. The app is entirely client-side: no backend, authentication, search service, or AI engine currently exists.

Primary browser entry points are `index.html`, `src/main.jsx`, and `src/App.jsx`. Vite configuration is in `vite.config.js`.

#### Application Composition

`src/App.jsx` is the page-level orchestrator, assembling the landing-page sections and managing the user journey from discovery to policy details. Shared presentation primitives live in:

- `src/components/Header.jsx`
- `src/components/Card.jsx`
- `src/components/Button.jsx`

Global styling and design tokens establish the visual system, including the stated glassmorphism-oriented theme:

- `src/index.css`
- `src/styles/variables.css`

#### Curated Policy Data Boundary

The application’s authoritative content is static frontend data rather than API-delivered records. `src/data/policies.js` defines the verified policy catalogue, likely including display copy, categories, eligibility information, and links to supporting assets. `src/data/categories.js` defines the target user groups used to segment discovery.

This is the principal content boundary: changing, adding, or validating policies requires updating these source-controlled datasets and corresponding static media.

- `src/data/policies.js`
- `src/data/categories.js`

#### Discovery and Category Flow

Users begin at the hero and navigate into category-based exploration rather than free-text search. `Categories` renders the audience/category choices; selection drives the policy-list view, which filters or scopes the curated policy records.

- `src/sections/Hero.jsx`
- `src/sections/Categories.jsx`
- `src/sections/PolicyList.jsx`

The `HowItWorks` and about-oriented sections support explanation and trust but are not data-processing layers:

- `src/sections/HowItWorks.jsx`
- `src/sections/AboutDetail.jsx`

#### Policy Detail and Eligibility Flow

A selected policy is rendered through `PolicyDetail`, which is the main policy-information endpoint in the UI. It presents the simplified explanation and can expose supporting PDF/audio resources from the static asset boundary.

`EligibilityChecker` is the user-assessment stage: it collects or evaluates user-facing eligibility criteria against the selected policy’s static metadata. Any eligibility result is browser-local and deterministic; no external government verification or service integration is present.

- `src/sections/PolicyDetail.jsx`
- `src/sections/EligibilityChecker.jsx`
- `src/data/policies.js`

#### Static Documents and Audio Assets

Policy source/support material is bundled as public files served directly by Vite. The canonical web-consumed assets are under `public/`, including MP3 explainers and selected PDFs. The root-level `audio files/` and `pdfs/` directories appear to retain broader or source copies.

- `public/audio/`
- `public/pdfs/`
- `public/hero-bg.mp4`

Asset paths referenced by policy data must remain aligned with these public filenames; there is no media API, storage service, or content delivery integration visible.

#### Infrastructure and Extension Boundaries

Execution is Node/npm-based with Vite development/build tooling and React rendering. ESLint is present for code quality, but there are no deployed infrastructure definitions, server routes, databases, or third-party APIs in the repository.

The planned AI recommendation, multilingual support, and personalization would require introducing a new service/data boundary rather than extending the current static-data-only flow.

Main entry points: [`src/App.jsx`](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/App.jsx) (App orchestrator), [`src/sections/PolicyList.jsx`](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/PolicyList.jsx) (Policy list), [`src/sections/PolicyDetail.jsx`](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/PolicyDetail.jsx) (Policy detail), [`src/data/policies.js`](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/data/policies.js) (Policy catalogue)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser Runtime"]
  node_vite{{"Vite build server<br/>tooling<br/>[vite.config.js]"}}
  node_html["HTML entry<br/>entry point<br/>[index.html]"]
  node_main["React bootstrap<br/>client entry<br/>[main.jsx]"]
  node_app["App orchestrator<br/>page controller<br/>[App.jsx]"]
end

subgraph group_ui["User Experience"]
  node_header["Header<br/>shared component<br/>[Header.jsx]"]
  node_hero["Hero<br/>landing section<br/>[Hero.jsx]"]
  node_categories["Categories<br/>discovery section<br/>[Categories.jsx]"]
  node_policy_list["Policy list<br/>discovery section<br/>[PolicyList.jsx]"]
  node_policy_detail["Policy detail<br/>detail section<br/>[PolicyDetail.jsx]"]
  node_eligibility["Eligibility checker<br/>client-side assessment"]
  node_how_it_works["How it works<br/>informational section<br/>[HowItWorks.jsx]"]
  node_about["About detail<br/>trust section<br/>[AboutDetail.jsx]"]
  node_components["Card and button primitives<br/>shared components<br/>[Card.jsx]"]
  node_styles["Global design system<br/>styles<br/>[index.css]"]
end

subgraph group_content["Curated Content"]
  node_policy_data[("Policy catalogue<br/>static data<br/>[policies.js]")]
  node_category_data[("Audience categories<br/>static data<br/>[categories.js]")]
  node_public_assets["Public PDFs and audio<br/>bundled media"]
  node_hero_media["Hero video<br/>bundled media<br/>[hero-bg.mp4]"]
end

node_vite -->|"serves"| node_html
node_html -->|"loads"| node_main
node_main -->|"renders"| node_app
node_app -->|"composes"| node_header
node_app -->|"composes"| node_hero
node_app -->|"composes"| node_categories
node_app -->|"composes"| node_policy_list
node_app -->|"shows selected policy"| node_policy_detail
node_app -->|"opens assessment"| node_eligibility
node_app -->|"composes"| node_how_it_works
node_app -->|"composes"| node_about
node_categories -->|"reads choices"| node_category_data
node_categories -->|"selected category"| node_policy_list
node_policy_list -->|"filters"| node_policy_data
node_policy_list -->|"selected policy"| node_policy_detail
node_policy_detail -->|"reads details"| node_policy_data
node_policy_detail -->|"passes policy metadata"| node_eligibility
node_eligibility -->|"evaluates criteria"| node_policy_data
node_policy_data -->|"references media paths"| node_public_assets
node_hero -->|"uses background"| node_hero_media
node_app -->|"uses presentation primitives"| node_components
node_main -->|"loads global styles"| node_styles

click node_vite "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/vite.config.js"
click node_html "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/index.html"
click node_main "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/main.jsx"
click node_app "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/App.jsx"
click node_header "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/components/Header.jsx"
click node_hero "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/Hero.jsx"
click node_categories "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/Categories.jsx"
click node_policy_list "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/PolicyList.jsx"
click node_policy_detail "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/PolicyDetail.jsx"
click node_eligibility "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/EligibilityChecker.jsx"
click node_how_it_works "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/HowItWorks.jsx"
click node_about "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/AboutDetail.jsx"
click node_components "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/components/Card.jsx"
click node_policy_data "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/data/policies.js"
click node_category_data "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/data/categories.js"
click node_hero_media "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/public/hero-bg.mp4"
click node_styles "https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/index.css"

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_vite,node_html,node_main,node_app toneBlue
class node_header,node_hero,node_categories,node_policy_list,node_policy_detail,node_eligibility,node_how_it_works,node_about,node_components,node_styles toneAmber
class node_policy_data,node_category_data,node_public_assets,node_hero_media toneMint
```

## Components

### Browser Runtime

Vite serves the React single-page application.

- [Vite build server](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/vite.config.js): tooling · `vite.config.js`
- [HTML entry](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/index.html): entry point · `index.html`
- [React bootstrap](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/main.jsx): client entry · `src/main.jsx`
- [App orchestrator](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/App.jsx): page controller · Composes sections and manages the discovery-to-detail journey. · `src/App.jsx`

### User Experience

Landing, discovery, detail, and eligibility views.

- [Header](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/components/Header.jsx): shared component · `src/components/Header.jsx`
- [Hero](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/Hero.jsx): landing section · `src/sections/Hero.jsx`
- [Categories](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/Categories.jsx): discovery section · Audience selection scopes policy exploration. · `src/sections/Categories.jsx`
- [Policy list](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/PolicyList.jsx): discovery section · Filters curated policies by selected category. · `src/sections/PolicyList.jsx`
- [Policy detail](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/PolicyDetail.jsx): detail section · Presents simplified policy information and resources. · `src/sections/PolicyDetail.jsx`
- [Eligibility checker](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/EligibilityChecker.jsx): client-side assessment · Deterministically evaluates user input against selected policy metadata. · `src/sections/EligibilityChecker.jsx`
- [How it works](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/HowItWorks.jsx): informational section · `src/sections/HowItWorks.jsx`
- [About detail](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/sections/AboutDetail.jsx): trust section · `src/sections/AboutDetail.jsx`
- [Card and button primitives](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/components/Card.jsx): shared components · `src/components/Card.jsx`
- [Global design system](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/index.css): styles · Global CSS and visual tokens support the glassmorphism theme. · `src/index.css`

### Curated Content

Source-controlled policy data and bundled supporting media.

- [Policy catalogue](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/data/policies.js): static data · Authoritative policy copy, eligibility metadata, and asset references. · `src/data/policies.js`
- [Audience categories](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/src/data/categories.js): static data · `src/data/categories.js`
- **Public PDFs and audio**: bundled media · Vite-served policy explainers and supporting documents.
- [Hero video](https://github.com/abhishek-sharma2028/policy_ease_website/blob/main/public/hero-bg.mp4): bundled media · `public/hero-bg.mp4`

## Connections

- Vite build server → HTML entry: serves
- HTML entry → React bootstrap: loads
- React bootstrap → App orchestrator: renders
- App orchestrator → Header: composes
- App orchestrator → Hero: composes
- App orchestrator → Categories: composes
- App orchestrator → Policy list: composes
- App orchestrator → Policy detail: shows selected policy
- App orchestrator → Eligibility checker: opens assessment
- App orchestrator → How it works: composes
- App orchestrator → About detail: composes
- Categories → Audience categories: reads choices
- Categories → Policy list: selected category
- Policy list → Policy catalogue: filters
- Policy list → Policy detail: selected policy
- Policy detail → Policy catalogue: reads details
- Policy detail → Eligibility checker: passes policy metadata
- Eligibility checker → Policy catalogue: evaluates criteria
- Policy catalogue → Public PDFs and audio: references media paths
- Hero → Hero video: uses background
- App orchestrator → Card and button primitives: uses presentation primitives
- React bootstrap → Global design system: loads global styles