# coder-pranjal202/pharmachain2026_blockchain architecture

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

- Interactive diagram: https://gitdiagram.com/coder-pranjal202/pharmachain2026_blockchain
- Repository: https://github.com/coder-pranjal202/pharmachain2026_blockchain

## Overview

#### Purpose and Entry Points
This is a small browser-based blockchain/pharmaceutical-chain prototype. The repository has no backend, build system, server code, or smart-contract source; the application is delivered as static frontend assets.

Primary entry point:
- `Frontend/index.html` loads the UI and browser scripts.
- `Frontend/app.js` contains application behavior and blockchain interaction flow.
- `Frontend/abi.js` supplies the contract ABI used by the frontend.

#### Browser Application Shell
`Frontend/index.html` defines the page structure, user-facing controls, and script loading order. It is the integration boundary between the UI, styling, wallet/provider libraries loaded by the page, and application logic.

- `Frontend/index.html`
- `Frontend/style.css`
- `Frontend/app.js`

#### Blockchain Contract Integration
The frontend is designed to communicate with a deployed blockchain contract through its ABI rather than through a repository-local contract implementation. `Frontend/abi.js` is therefore the contract interface boundary: application code can construct a contract client, call read methods, and submit signed transactions without embedding contract bytecode or Solidity source.

- `Frontend/abi.js`
- `Frontend/app.js`

The deployed contract address, active chain, and available methods must be inferred from `Frontend/app.js` and the ABI; they are not represented elsewhere in the repository.

#### Wallet and Transaction Control Flow
The expected control path is browser UI → `Frontend/app.js` → injected wallet/provider → blockchain RPC network → deployed contract.

`Frontend/app.js` is responsible for:
- requesting or using a connected wallet account;
- creating a provider/signer and contract client from the ABI;
- converting UI actions into contract reads or state-changing transactions;
- reflecting returned data, transaction status, or errors in the page.

Wallet approval and transaction signing occur outside the application in the user’s wallet. The frontend should treat provider access, account changes, chain changes, rejected signatures, and RPC failures as external boundary conditions.

#### Pharmaceutical-Chain Domain Surface
The repository name indicates a pharmaceutical supply-chain domain, but the domain model itself is not available in the README or source tree beyond the frontend/ABI boundary. Any lifecycle entities—such as products, batches, manufacturers, distributors, pharmacies, or provenance records—are defined by the contract ABI and UI behavior, not by server-side models.

- `Frontend/abi.js`
- `Frontend/app.js`
- `Frontend/index.html`

#### Presentation Layer
The visual layer is isolated from blockchain behavior. `Frontend/style.css` controls layout and presentation, while `Frontend/index.html` provides stable DOM targets that `Frontend/app.js` can populate or update after wallet and contract operations.

- `Frontend/style.css`
- `Frontend/index.html`
- `Frontend/app.js`

#### Runtime and Infrastructure
Material runtime dependencies are the user’s browser, a JavaScript-capable injected Ethereum-compatible wallet/provider, an RPC-accessible blockchain network, and a deployed contract matching `Frontend/abi.js`. Static hosting is sufficient for repository assets; no API service, database, authentication service, CI configuration, or deployment infrastructure is present in the file tree.

Main entry points: [`Frontend/app.js`](https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/app.js) (Application Logic), [`Frontend/index.html`](https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/index.html) (Page Shell), [`Frontend/style.css`](https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/style.css) (Presentation), [`Frontend/abi.js`](https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/abi.js) (Contract ABI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Static Frontend"]
  node_static_host["Static Hosting<br/>asset delivery"]
  node_index["Page Shell<br/>HTML entry point<br/>[index.html]"]
  node_styles["Presentation<br/>CSS stylesheet<br/>[style.css]"]
  node_app["Application Logic<br/>browser JavaScript<br/>[app.js]"]
  node_abi["Contract ABI<br/>contract interface<br/>[abi.js]"]
  node_dom["UI Controls &amp; Status<br/>browser DOM"]
end

subgraph group_external["External Runtime"]
  node_browser["User Browser<br/>browser runtime"]
  node_wallet{{"Injected Wallet<br/>Ethereum provider"}}
  node_rpc["Blockchain RPC Network"]
  node_contract{{"Deployed Pharma Contract<br/>smart contract"}}
end

node_static_host -->|"serves"| node_index
node_index -->|"loads"| node_styles
node_index -->|"loads"| node_app
node_index -->|"defines"| node_dom
node_browser -->|"renders"| node_index
node_dom -->|"user actions"| node_app
node_app -->|"updates results/status"| node_dom
node_app -->|"uses interface"| node_abi
node_app -->|"requests account and signer"| node_wallet
node_wallet -->|"submits provider requests"| node_rpc
node_rpc -->|"reads and transactions"| node_contract
node_wallet -.->|"account, signatures, errors"| node_app
node_contract -.->|"returned state and transaction status"| node_app

click node_index "https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/index.html"
click node_styles "https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/style.css"
click node_app "https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/app.js"
click node_abi "https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/abi.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_static_host,node_index,node_styles,node_app,node_abi,node_dom toneBlue
class node_browser,node_wallet,node_rpc,node_contract toneAmber
```

## Components

### Static Frontend

Browser-delivered application assets.

- **Static Hosting**: asset delivery · Serves the frontend files without an application backend.
- [Page Shell](https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/index.html): HTML entry point · Defines controls, DOM targets, and script loading. · `Frontend/index.html`
- [Presentation](https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/style.css): CSS stylesheet · Controls page layout and appearance. · `Frontend/style.css`
- [Application Logic](https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/app.js): browser JavaScript · Coordinates UI, wallet access, contract calls, and status updates. · `Frontend/app.js`
- [Contract ABI](https://github.com/coder-pranjal202/pharmachain2026_blockchain/blob/main/Frontend/abi.js): contract interface · Defines the deployed contract methods available to the frontend. · `Frontend/abi.js`
- **UI Controls & Status**: browser DOM · Receives user actions and displays reads, transaction state, and errors.

### External Runtime

Wallet and blockchain services outside the repository.

- **User Browser**: browser runtime · Runs the static application.
- **Injected Wallet**: Ethereum provider · Handles account access, approval, and transaction signing.
- **Blockchain RPC Network**: RPC network · Routes provider requests to the active chain.
- **Deployed Pharma Contract**: smart contract · External contract implementing the ABI-defined domain behavior.

## Connections

- Static Hosting → Page Shell: serves
- Page Shell → Presentation: loads
- Page Shell → Application Logic: loads
- Page Shell → UI Controls & Status: defines
- User Browser → Page Shell: renders
- UI Controls & Status → Application Logic: user actions
- Application Logic → UI Controls & Status: updates results/status
- Application Logic → Contract ABI: uses interface
- Application Logic → Injected Wallet: requests account and signer
- Injected Wallet → Blockchain RPC Network: submits provider requests
- Blockchain RPC Network → Deployed Pharma Contract: reads and transactions
- Injected Wallet → Application Logic: account, signatures, errors
- Deployed Pharma Contract → Application Logic: returned state and transaction status