# satyamgagre/blockchain-crowdfunding-dapp architecture

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

- Interactive diagram: https://gitdiagram.com/satyamgagre/blockchain-crowdfunding-dapp
- Repository: https://github.com/satyamgagre/blockchain-crowdfunding-dapp

## Overview

1. **What this repo is**
   - VeriFund is a **decentralized crowdfunding DApp** built as a **Next.js + React frontend** backed by an **Ethereum smart contract layer**. The blockchain is the system of record for campaigns, donations, and refund logic; the app is primarily a client-side interface over that contract.

2. **Primary architectural boundary**
   - The repository is split into two major halves:
     - **UI/application layer**: `pages/`, `Components/`, `Context/`, `lib/`
     - **Blockchain layer**: `contracts/`, `scripts/`, `test/`, `hardhat.config.js`
   - There is **no traditional server API** in the repo; instead, the UI talks directly to Ethereum through wallet/provider integrations.

3. **Frontend shell and routing**
   - `pages/` defines the app routes and page-level composition:
     - `index.js` for the main landing/home experience
     - `activity.jsx` for transaction/campaign activity
     - `members.jsx` for community or membership-related views
     - `whitepaper.jsx` for documentation/content
   - `_app.js` likely wires global providers and styling across all pages.

4. **Reusable UI component layer**
   - `Components/` contains the reusable visual building blocks:
     - navigation and layout: `NavBar`, `Menu`, `Footer`, `Logo`
     - marketing and hero content: `Hero`, `BlurText`
     - crowdfunding-specific UI: `CampaignList`, `CampaignCard`, `Card`, `PopUp`
   - These are presentation-only pieces that render campaign data and user actions supplied from higher layers.

5. **Client-side state and blockchain context**
   - `Context/CrowdFunding.js` is the likely central state and interaction layer for the app.
   - `Context/CrowdFunding.json` and `Context/constants.js` suggest this layer holds the **contract ABI / configuration / addresses** used by the frontend.
   - This is the main bridge between UI components and on-chain operations: campaign fetches, donation submission, and account/wallet state.

6. **Smart contract subsystem**
   - `contracts/` contains the Solidity contract(s) that implement the crowdfunding rules.
   - The README describes key contract responsibilities:
     - campaign creation with owner validation
     - donation handling
     - fund tracking
     - refund behavior when targets are not met
   - This contract layer is the trust boundary and source of truth for financial state.

7. **Wallet and chain interaction**
   - The project is designed around **MetaMask / Ethereum wallet connection**.
   - User actions such as creating a campaign or donating flow from the UI into the wallet provider, then into the deployed contract.
   - The blockchain response then drives the UI state shown on campaign cards, activity feeds, and modal dialogs.

8. **Off-chain helper/data layer**
   - `lib/campaignService.js` appears to encapsulate campaign-related data access or transformation logic.
   - `lib/firebase.js` indicates an **off-chain Firebase integration** used by the UI as a backend support service.
   - In architecture terms, this is a secondary data layer alongside the chain, likely used for app support data rather than core fund custody.

9. **Deployment, testing, and local development**
   - The blockchain workflow is managed by **Hardhat**:
     - `scripts/deploy.js` deploys contracts
     - `test/Lock.js` is a Hardhat test file
     - `hardhat.config.js` configures compilation and networks
   - This suggests a local development flow where the contract is deployed to a local node before the frontend connects to it.

10. **Application flow: read path**
   - Campaign and activity data likely flow from:
     - blockchain queries through the context/service layer
     - into page components
     - and finally into list/card/modal views
   - The UI is therefore a projection of on-chain state, with any off-chain Firebase data acting as a supplement if needed.

11. **Application flow: write path**
   - User-initiated actions such as “create campaign” or “donate” follow this path:
     - page/component event
     - context/action handler
     - wallet transaction via Ethereum provider
     - smart contract execution
     - updated on-chain state
     - UI refresh/re-render
   - This is the core interaction loop of the DApp.

12. **Styling and build tooling**
   - Styling is handled with **Tailwind CSS** plus global styles in `styles/globals.css`.
   - `next.config.mjs`, `postcss.config.js`, `tailwind.config.js`, and `jsconfig.json` support the frontend build and developer experience.
   - These are important for implementation, but they do not materially change the system architecture.

13. **What to draw in an architecture diagram**
   - Show three main zones:
     - **Browser/UI**: pages and reusable components
     - **State/service bridge**: CrowdFunding context + campaign service + Firebase helper
     - **Blockchain**: deployed Solidity contract accessed through MetaMask/Hardhat-managed deployment
   - The important dependency direction is: **UI → context/services → wallet/provider → smart contract → blockchain state → UI**.

14. **Overall architectural character**
   - This is a **frontend-first decentralized application** with a thin client-side orchestration layer and a blockchain-backed business core.
   - The main trust boundary is the smart contract; the rest of the repository exists to present, connect, and manage that on-chain system.

Main entry points: [`crowdfunding/Context/CrowdFunding.js`](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Context/CrowdFunding.js) (CrowdFunding), [`crowdfunding/Components`](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/Components) (Components), [`crowdfunding/pages`](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/pages) (Pages), [`crowdfunding/contracts`](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/contracts) (Contracts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Browser UI"]
  node_pages["Pages<br/>Next.js routes"]
  node_app_page["App shell<br/>Next.js app<br/>[_app.js]"]
  node_home_page["Home<br/>landing page<br/>[index.js]"]
  node_activity_page["Activity<br/>[activity.jsx]"]
  node_members_page["Members<br/>community page<br/>[members.jsx]"]
  node_whitepaper_page["Whitepaper<br/>content page<br/>[whitepaper.jsx]"]
  node_components["Components"]
  node_nav_ui["Nav & chrome<br/>layout components<br/>[NavBar.jsx]"]
  node_hero_ui["Hero<br/>marketing component<br/>[Hero.jsx]"]
  node_campaign_ui["Campaign views<br/>campaign components<br/>[CampaignList.jsx]"]
end

subgraph group_bridge["App Bridge"]
  node_context["CrowdFunding<br/>React context<br/>[CrowdFunding.js]"]
  node_abi_config["Contract config<br/>ABI/config<br/>[CrowdFunding.json]"]
  node_chain_consts["Constants<br/>address/config<br/>[constants.js]"]
  node_campaign_service["Campaign service<br/>data helper<br/>[campaignService.js]"]
  node_firebase["Firebase<br/>off-chain backend<br/>[firebase.js]"]
end

subgraph group_chain["Blockchain"]
  node_contracts["Contracts<br/>Solidity system"]
  node_deploy["Deploy script<br/>Hardhat script<br/>[deploy.js]"]
  node_hardhat_test["Contract test<br/>Hardhat test<br/>[Lock.js]"]
  node_hardhat_cfg["Hardhat config<br/>tooling config<br/>[hardhat.config.js]"]
end

subgraph group_tooling["Tooling"]
  node_styles["Styles<br/>CSS/Tailwind<br/>[globals.css]"]
end

node_pages -->|"wraps"| node_app_page
node_pages -->|"contains"| node_home_page
node_pages -->|"contains"| node_activity_page
node_pages -->|"contains"| node_members_page
node_pages -->|"contains"| node_whitepaper_page
node_app_page -->|"provides"| node_context
node_home_page -->|"renders"| node_components
node_activity_page -->|"renders"| node_components
node_members_page -->|"renders"| node_components
node_whitepaper_page -->|"renders"| node_components
node_components -->|"includes"| node_nav_ui
node_components -->|"includes"| node_hero_ui
node_components -->|"includes"| node_campaign_ui
node_campaign_ui -->|"reads/writes"| node_context
node_context -->|"loads"| node_abi_config
node_context -->|"reads"| node_chain_consts
node_context -->|"delegates"| node_campaign_service
node_context -.->|"supplements"| node_firebase
node_context -->|"calls"| node_contracts
node_contracts -->|"managed by"| node_deploy
node_contracts -->|"verified by"| node_hardhat_test
node_hardhat_cfg -->|"configures"| node_deploy
node_hardhat_cfg -->|"configures"| node_hardhat_test
node_pages -->|"uses"| node_styles

click node_pages "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/pages"
click node_app_page "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/_app.js"
click node_home_page "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/index.js"
click node_activity_page "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/activity.jsx"
click node_members_page "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/members.jsx"
click node_whitepaper_page "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/whitepaper.jsx"
click node_components "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/Components"
click node_nav_ui "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Components/NavBar.jsx"
click node_hero_ui "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Components/Hero.jsx"
click node_campaign_ui "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Components/CampaignList.jsx"
click node_context "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Context/CrowdFunding.js"
click node_abi_config "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Context/CrowdFunding.json"
click node_chain_consts "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Context/constants.js"
click node_campaign_service "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/lib/campaignService.js"
click node_firebase "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/lib/firebase.js"
click node_contracts "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/contracts"
click node_deploy "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/scripts/deploy.js"
click node_hardhat_test "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/test/Lock.js"
click node_hardhat_cfg "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/hardhat.config.js"
click node_styles "https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/styles/globals.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_pages,node_app_page,node_home_page,node_activity_page,node_members_page,node_whitepaper_page,node_components,node_nav_ui,node_hero_ui,node_campaign_ui toneBlue
class node_context,node_abi_config,node_chain_consts,node_campaign_service,node_firebase toneAmber
class node_contracts,node_deploy,node_hardhat_test,node_hardhat_cfg toneMint
class node_styles toneRose
```

## Components

### Browser UI

Next.js pages and reusable presentation components

- [Pages](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/pages): Next.js routes · Route-level screens and page composition · `crowdfunding/pages`
- [App shell](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/_app.js): Next.js app · Global providers and shared app wrapper · `crowdfunding/pages/_app.js`
- [Home](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/index.js): landing page · Primary crowdfunding landing experience · `crowdfunding/pages/index.js`
- [Activity](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/activity.jsx): activity page · Campaign and transaction activity view · `crowdfunding/pages/activity.jsx`
- [Members](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/members.jsx): community page · Membership or community-oriented view · `crowdfunding/pages/members.jsx`
- [Whitepaper](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/pages/whitepaper.jsx): content page · Documentation and explanatory content · `crowdfunding/pages/whitepaper.jsx`
- [Components](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/Components): UI components · Reusable visual and interaction pieces · `crowdfunding/Components`
- [Nav & chrome](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Components/NavBar.jsx): layout components · Navigation, menu, footer, and logo · `crowdfunding/Components/NavBar.jsx`
- [Hero](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Components/Hero.jsx): marketing component · Landing-page hero and highlight text · `crowdfunding/Components/Hero.jsx`
- [Campaign views](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Components/CampaignList.jsx): campaign components · Cards, lists, and popup interactions for campaigns · `crowdfunding/Components/CampaignList.jsx`

### App Bridge

Client-side state, contract configuration, and off-chain helpers

- [CrowdFunding](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Context/CrowdFunding.js): React context · Main client-side state and blockchain interaction layer · `crowdfunding/Context/CrowdFunding.js`
- [Contract config](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Context/CrowdFunding.json): ABI/config · Contract ABI and deployment constants · `crowdfunding/Context/CrowdFunding.json`
- [Constants](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/Context/constants.js): address/config · Network and contract constants used by the frontend · `crowdfunding/Context/constants.js`
- [Campaign service](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/lib/campaignService.js): data helper · Campaign-oriented client logic and transformations · `crowdfunding/lib/campaignService.js`
- [Firebase](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/lib/firebase.js): off-chain backend · Secondary storage or support service for the app · `crowdfunding/lib/firebase.js`

### Blockchain

Smart contract and Hardhat deployment workflow

- [Contracts](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/tree/main/crowdfunding/contracts): Solidity system · Crowdfunding smart contract layer · `crowdfunding/contracts`
- [Deploy script](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/scripts/deploy.js): Hardhat script · Contract deployment workflow · `crowdfunding/scripts/deploy.js`
- [Contract test](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/test/Lock.js): Hardhat test · Smart contract behavior verification · `crowdfunding/test/Lock.js`
- [Hardhat config](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/hardhat.config.js): tooling config · Compilation and network configuration · `crowdfunding/hardhat.config.js`

### Tooling

Build, styling, and developer configuration

- [Styles](https://github.com/satyamgagre/blockchain-crowdfunding-dapp/blob/main/crowdfunding/styles/globals.css): CSS/Tailwind · Global styling and utility CSS pipeline · `crowdfunding/styles/globals.css`

## Connections

- Pages → App shell: wraps · App shell applies to all routes
- Pages → Home: contains · Route definition
- Pages → Activity: contains · Route definition
- Pages → Members: contains · Route definition
- Pages → Whitepaper: contains · Route definition
- App shell → CrowdFunding: provides · Global state and blockchain access
- Home → Components: renders · Composes shared UI
- Activity → Components: renders · Composes shared UI
- Members → Components: renders · Composes shared UI
- Whitepaper → Components: renders · Composes shared UI
- Components → Nav & chrome: includes · Navigation and layout chrome
- Components → Hero: includes · Marketing and intro sections
- Components → Campaign views: includes · Campaign lists, cards, and popups
- Campaign views → CrowdFunding: reads/writes · UI actions and campaign state flow through context
- CrowdFunding → Contract config: loads · Uses contract ABI and deployment metadata
- CrowdFunding → Constants: reads · Network and address configuration
- CrowdFunding → Campaign service: delegates · Campaign data access and transformation
- CrowdFunding → Firebase: supplements · Optional off-chain app data
- CrowdFunding → Contracts: calls · Queries and transactions target the on-chain contract
- Contracts → Deploy script: managed by · Deployment workflow
- Contracts → Contract test: verified by · Contract behavior tests
- Hardhat config → Deploy script: configures · Hardhat runtime for deployment
- Hardhat config → Contract test: configures · Hardhat runtime for testing
- Pages → Styles: uses · Global styling support