# anik-121/assignment-06 architecture

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

- Interactive diagram: https://gitdiagram.com/anik-121/assignment-06
- Repository: https://github.com/anik-121/assignment-06

## Overview

DigiTools is a React storefront for browsing premium digital tools and managing a client-side cart. The runtime starts in the browser, renders the home page, loads catalog data from JSON, and passes cart state and actions through the catalog UI. The page also presents onboarding steps and pricing. The checkout button is displayed but no checkout behavior is shown. Relationships reflect the sampled source and README; unsampled components are included based on the source index, without inferring their internal behavior.

Main entry points: [`src/pages/Home.jsx`](https://github.com/anik-121/assignment-06/blob/main/src/pages/Home.jsx) (Home Page), [`src/components/Tools.jsx`](https://github.com/anik-121/assignment-06/blob/main/src/components/Tools.jsx) (Catalog and Cart), [`src/components/ToolsCard.jsx`](https://github.com/anik-121/assignment-06/blob/main/src/components/ToolsCard.jsx) (Tool Cards), [`src/main.jsx`](https://github.com/anik-121/assignment-06/blob/main/src/main.jsx) (React Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Application Runtime"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_app["App Shell<br/>[App.jsx]"]
  node_home["Home Page<br/>[Home.jsx]"]
end

subgraph group_storefront["Catalog and Cart"]
  node_tools["Catalog and Cart<br/>[Tools.jsx]"]
  node_cards["Tool Cards<br/>[ToolsCard.jsx]"]
  node_catalog["Tool Catalog JSON<br/>[tools.json]"]
end

subgraph group_content["Storefront Content"]
  node_navbar["Sticky Navbar<br/>[Navbar.jsx]"]
  node_banner["Hero Banner<br/>[Banner.jsx]"]
  node_steps["Onboarding Steps<br/>[Steps.jsx]"]
  node_pricing["Pricing Plans<br/>[Pricing.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

node_browser(("Browser"))

node_browser -->|"loads app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_home
node_home -->|"renders; passes count"| node_navbar
node_home -->|"renders"| node_banner
node_home -->|"renders; passes cart"| node_tools
node_home -->|"renders"| node_steps
node_home -->|"renders"| node_pricing
node_home -->|"renders"| node_footer
node_tools -->|"renders catalog"| node_cards
node_cards -->|"fetches JSON"| node_catalog
node_cards -->|"calls add handler"| node_home
node_tools -->|"updates cart state"| node_home

click node_entry "https://github.com/anik-121/assignment-06/blob/main/src/main.jsx"
click node_app "https://github.com/anik-121/assignment-06/blob/main/src/App.jsx"
click node_home "https://github.com/anik-121/assignment-06/blob/main/src/pages/Home.jsx"
click node_navbar "https://github.com/anik-121/assignment-06/blob/main/src/components/Navbar.jsx"
click node_banner "https://github.com/anik-121/assignment-06/blob/main/src/components/Banner.jsx"
click node_tools "https://github.com/anik-121/assignment-06/blob/main/src/components/Tools.jsx"
click node_cards "https://github.com/anik-121/assignment-06/blob/main/src/components/ToolsCard.jsx"
click node_catalog "https://github.com/anik-121/assignment-06/blob/main/public/tools.json"
click node_steps "https://github.com/anik-121/assignment-06/blob/main/src/components/Steps.jsx"
click node_pricing "https://github.com/anik-121/assignment-06/blob/main/src/components/Pricing.jsx"
click node_footer "https://github.com/anik-121/assignment-06/blob/main/src/components/Footer.jsx"

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_entry,node_app,node_home,node_browser toneBlue
class node_tools,node_cards,node_catalog toneAmber
class node_navbar,node_banner,node_steps,node_pricing,node_footer toneMint
```

## Components

### Application Runtime

- [React Entry](https://github.com/anik-121/assignment-06/blob/main/src/main.jsx): `src/main.jsx`
- [App Shell](https://github.com/anik-121/assignment-06/blob/main/src/App.jsx): `src/App.jsx`
- [Home Page](https://github.com/anik-121/assignment-06/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`

### Catalog and Cart

- [Catalog and Cart](https://github.com/anik-121/assignment-06/blob/main/src/components/Tools.jsx): `src/components/Tools.jsx`
- [Tool Cards](https://github.com/anik-121/assignment-06/blob/main/src/components/ToolsCard.jsx): `src/components/ToolsCard.jsx`
- [Tool Catalog JSON](https://github.com/anik-121/assignment-06/blob/main/public/tools.json): `public/tools.json`

### Storefront Content

- [Sticky Navbar](https://github.com/anik-121/assignment-06/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Hero Banner](https://github.com/anik-121/assignment-06/blob/main/src/components/Banner.jsx): `src/components/Banner.jsx`
- [Onboarding Steps](https://github.com/anik-121/assignment-06/blob/main/src/components/Steps.jsx): `src/components/Steps.jsx`
- [Pricing Plans](https://github.com/anik-121/assignment-06/blob/main/src/components/Pricing.jsx): `src/components/Pricing.jsx`
- [Footer](https://github.com/anik-121/assignment-06/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Other components

- **Browser**

## Connections

- Browser → React Entry: loads app
- React Entry → App Shell: renders (evidence: `src/main.jsx`)
- App Shell → Home Page: renders (evidence: `src/App.jsx`)
- Home Page → Sticky Navbar: renders; passes count (evidence: `src/pages/Home.jsx`)
- Home Page → Hero Banner: renders (evidence: `src/pages/Home.jsx`)
- Home Page → Catalog and Cart: renders; passes cart (evidence: `src/pages/Home.jsx`)
- Home Page → Onboarding Steps: renders (evidence: `src/pages/Home.jsx`)
- Home Page → Pricing Plans: renders (evidence: `src/pages/Home.jsx`)
- Home Page → Footer: renders (evidence: `src/pages/Home.jsx`)
- Catalog and Cart → Tool Cards: renders catalog (evidence: `src/components/Tools.jsx`)
- Tool Cards → Tool Catalog JSON: fetches JSON (evidence: `src/components/ToolsCard.jsx`)
- Tool Cards → Home Page: calls add handler (evidence: `src/components/ToolsCard.jsx`)
- Catalog and Cart → Home Page: updates cart state (evidence: `src/components/Tools.jsx`)