How anik-121/assignment-06 works
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: Home.jsx Home Page · Tools.jsx Catalog and Cart · ToolsCard.jsx Tool Cards · main.jsx React Entry
Components 12
Application Runtime
- React Entry
src/main.jsx - App Shell
src/App.jsx - Home Page
src/pages/Home.jsx
Catalog and Cart
- Catalog and Cart
src/components/Tools.jsx - Tool Cards
src/components/ToolsCard.jsx - Tool Catalog JSON
public/tools.json
Storefront Content
- Sticky Navbar
src/components/Navbar.jsx - Hero Banner
src/components/Banner.jsx - Onboarding Steps
src/components/Steps.jsx - Pricing Plans
src/components/Pricing.jsx - Footer
src/components/Footer.jsx
Other components
- Browser
Connections 13
- Browser → React Entry: loads app
- React Entry → App Shell: renders
src/main.jsx - App Shell → Home Page: renders
src/App.jsx - Home Page → Sticky Navbar: renders; passes count
src/pages/Home.jsx - Home Page → Hero Banner: renders
src/pages/Home.jsx - Home Page → Catalog and Cart: renders; passes cart
src/pages/Home.jsx - Home Page → Onboarding Steps: renders
src/pages/Home.jsx - Home Page → Pricing Plans: renders
src/pages/Home.jsx - Home Page → Footer: renders
src/pages/Home.jsx - Catalog and Cart → Tool Cards: renders catalog
src/components/Tools.jsx - Tool Cards → Tool Catalog JSON: fetches JSON
src/components/ToolsCard.jsx - Tool Cards → Home Page: calls add handler
src/components/ToolsCard.jsx - Catalog and Cart → Home Page: updates cart state
src/components/Tools.jsx