# sahrior/10-day-10-react-projects architecture

> Architecture diagram of the GitHub repository sahrior/10-day-10-react-projects, 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/sahrior/10-day-10-react-projects
- Repository: https://github.com/sahrior/10-day-10-react-projects

## Overview

1. This repository is a collection of standalone React mini-apps, not a single integrated product. Each project lives in its own folder with its own Vite setup, dependencies, and source tree, so there is no shared runtime or cross-project code path.

2. The common architecture across nearly all projects is the same: `index.html` loads the app shell, `src/main.jsx` mounts React, and `src/App.jsx` is the top-level composition point. Styling is usually local to the project through `src/index.css`, `src/App.css`, or CSS modules.

3. The main technical stack is React + Vite + plain JavaScript, with some projects using CSS modules and a few using a more componentized folder layout. The repo is front-end only in most cases; backend concerns are mostly absent except for the Firebase-backed contact app.

4. Several projects are simple landing-page or marketing UIs with very shallow architecture. Examples include `Brand_Page`, `Responsive_Navbar`, `Foody_zone`, `Car_Service`, and `BMI_Calculator`. Their structure is usually a small set of presentational components like navbar, hero, header, or section blocks.

5. A second pattern is navigation-centric single-page apps where the main boundary is “shared layout + page components.” `Car_Service` has a `Navbar` plus page components for `Home`, `OurServices`, `Careers`, and `ContactUs`. `My shop` and `app` also follow this pattern with a navbar, page views, and reusable cards/search results.

6. The most stateful app in the set is `Dice_Game`. Its architecture is split into gameplay subsystems: score/total tracking, number selection, dice rolling, rules display, and start/gameplay states. The component tree suggests a central game state in `App.jsx` passed down to smaller UI units.

7. `Expense_Tracker` is another state-heavy project, organized around financial summaries and input/listing flows. It separates earning and expense concerns into dedicated components, with totals and list components acting as derived views over the entered data.

8. `My shop` is the clearest example of a data-driven UI. Static product data lives in `src/data/products.js`, then flows into `Productcard` and `Homecard` components, while pages like `Home`, `Cart`, and `Contact` represent the main user navigation boundaries.

9. `Contact_Us_Page/Contact_us` is more componentized than the simpler projects. It splits the UI into `Navigation`, `ContactHeader`, `ContactForm`, and `Button`, with CSS modules keeping styles scoped to each component boundary.

10. `Contact_App_Firebase` is the only project with an obvious external service boundary. Its `src/config/firebase.js` indicates a Firebase integration layer, and `App.jsx` likely sits above that config to connect UI interactions with cloud-backed contact data.

11. Some projects are intentionally minimal and serve as practice exercises rather than full applications. `Student_Managment`, `Todo_List`, `Project5/app`, and `Project7/BMI_Calculator` appear to have smaller component footprints and likely keep most logic inside `App.jsx` with a few supporting components.

12. From an architecture-diagram perspective, the most important boundary is per-project isolation: each folder is a self-contained front-end app with its own build pipeline, assets, and UI composition. Inside each app, the key flow is typically `main.jsx -> App.jsx -> feature components -> local data/assets`, with only the Firebase project crossing into an external backend service.

Main entry points: [`Project3/Dice_Game/src/components/GamePlay.jsx`](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/GamePlay.jsx) (Gameplay), [`Project13/My shop/src/App.jsx`](https://github.com/sahrior/10-day-10-react-projects/blob/HEAD/Project13/My%20shop/src/App.jsx) (My Shop), [`Project2/Contact_Us_Page/Contact_us/src/App.jsx`](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/App.jsx) (Contact Us), [`Project8/Expense_Tracker/src/App.jsx`](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/App.jsx) (Expense Tracker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_landing["Landing UIs"]
  node_brand_app["Brand Page<br/>React app<br/>[App.jsx]"]
  node_brand_nav["Navbar<br/>UI component<br/>[Navbar.jsx]"]
  node_brand_hero["Hero<br/>UI component<br/>[Hero.jsx]"]
  node_responsive_navbar["Responsive Nav<br/>React app<br/>[App.jsx]"]
  node_foody_zone["Foody Zone<br/>React app<br/>[App.jsx]"]
  node_bmi_calculator["BMI Calc<br/>React app<br/>[App.jsx]"]
end

subgraph group_navapps["Nav / Page Apps"]
  node_car_service_app["Car Service<br/>React app<br/>[App.jsx]"]
  node_car_navbar["Navbar<br/>UI component<br/>[Navbar.jsx]"]
  node_car_pages["Pages<br/>page set<br/>[Home.jsx]"]
  node_myshop_app["My Shop<br/>React app<br/>[App.jsx]"]
  node_myshop_navbar["Navbar<br/>UI component<br/>[Navbar.jsx]"]
  node_myshop_products["Products<br/>data module<br/>[products.js]"]
  node_myshop_cards["Cards<br/>UI components<br/>[Productcard.jsx]"]
  node_myshop_pages["Pages<br/>page set<br/>[Home.jsx]"]
  node_contact_us_app["Contact Us<br/>React app<br/>[App.jsx]"]
  node_contact_nav["Navigation<br/>UI component<br/>[Navigation.jsx]"]
  node_contact_header["Header<br/>UI component<br/>[ContactHeader.jsx]"]
  node_contact_form["Form<br/>UI component<br/>[ContactForm.jsx]"]
  node_contact_button["Button<br/>UI component<br/>[Button.jsx]"]
end

subgraph group_stateful["Stateful Apps"]
  node_dice_app["Dice Game<br/>React app<br/>[App.jsx]"]
  node_dice_play["Gameplay<br/>feature component<br/>[GamePlay.jsx]"]
  node_dice_select["Number Select<br/>feature component<br/>[NumberSelector.jsx]"]
  node_dice_roll["Roll Dice<br/>feature component<br/>[RoleDice.jsx]"]
  node_dice_score["Score<br/>feature component<br/>[TotalScore.jsx]"]
  node_dice_rules["Rules<br/>feature component<br/>[Rules.jsx]"]
  node_expense_app["Expense Tracker<br/>React app<br/>[App.jsx]"]
  node_expense_input["Inputs<br/>feature component<br/>[EarningsInput.jsx]"]
  node_expense_lists["Lists<br/>feature component<br/>[EarningList.jsx]"]
  node_expense_summary["Summary<br/>feature component<br/>[TotalEarn.jsx]"]
end

subgraph group_exercise["Exercises"]
  node_todo_app["Todo List<br/>React app<br/>[App.jsx]"]
  node_student_app["Student Mgmt<br/>React app<br/>[App.jsx]"]
  node_project5_app["Project 5 App<br/>React app<br/>[App.jsx]"]
  node_project5_search["Search Results<br/>UI component<br/>[SearchResult.jsx]"]
end

subgraph group_service["External Service"]
  node_firebase_app["Contact Firebase<br/>React app<br/>[App.jsx]"]
end

node_brand_app -->|"composes"| node_brand_nav
node_brand_app -->|"composes"| node_brand_hero
node_responsive_navbar -.->|"similar pattern"| node_brand_nav
node_car_service_app -->|"composes"| node_car_navbar
node_car_service_app -->|"switches views"| node_car_pages
node_myshop_app -->|"composes"| node_myshop_navbar
node_myshop_app -->|"loads data"| node_myshop_products
node_myshop_app -->|"renders"| node_myshop_cards
node_myshop_app -->|"routes"| node_myshop_pages
node_contact_us_app -->|"composes"| node_contact_nav
node_contact_us_app -->|"composes"| node_contact_header
node_contact_us_app -->|"composes"| node_contact_form
node_contact_form -->|"uses"| node_contact_button
node_dice_app -->|"coordinates"| node_dice_play
node_dice_play -->|"uses"| node_dice_select
node_dice_play -->|"uses"| node_dice_roll
node_dice_play -->|"updates"| node_dice_score
node_dice_play -->|"shows"| node_dice_rules
node_expense_app -->|"collects"| node_expense_input
node_expense_app -->|"shows"| node_expense_lists
node_expense_app -->|"derives"| node_expense_summary
node_project5_app -->|"renders"| node_project5_search
node_firebase_app -->|"connects"| node_firebase_app

click node_brand_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project1/Brand_Page/src/App.jsx"
click node_brand_nav "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project1/Brand_Page/src/Components/Navbar.jsx"
click node_brand_hero "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project1/Brand_Page/src/Components/Hero.jsx"
click node_responsive_navbar "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project11/Responsive_Navbar/src/App.jsx"
click node_foody_zone "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project4/Foody_zone/src/App.jsx"
click node_bmi_calculator "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project7/BMI_Calculator/src/App.jsx"
click node_car_service_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project10/Car_Service/src/App.jsx"
click node_car_navbar "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project10/Car_Service/src/components/Navbar.jsx"
click node_car_pages "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project10/Car_Service/src/pages/Home.jsx"
click node_myshop_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project13/My shop/src/App.jsx"
click node_myshop_navbar "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project13/My shop/src/components/Navbar.jsx"
click node_myshop_products "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project13/My shop/src/data/products.js"
click node_myshop_cards "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project13/My shop/src/components/Productcard.jsx"
click node_myshop_pages "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project13/My shop/src/pages/Home.jsx"
click node_contact_us_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/App.jsx"
click node_contact_nav "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/components/Navigation/Navigation.jsx"
click node_contact_header "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/components/ContactHeader/ContactHeader.jsx"
click node_contact_form "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/components/ContactForm/ContactForm.jsx"
click node_contact_button "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/components/Button/Button.jsx"
click node_dice_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/App.jsx"
click node_dice_play "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/GamePlay.jsx"
click node_dice_select "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/NumberSelector.jsx"
click node_dice_roll "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/RoleDice.jsx"
click node_dice_score "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/TotalScore.jsx"
click node_dice_rules "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/Rules.jsx"
click node_expense_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/App.jsx"
click node_expense_input "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/Components/EarningsInput.jsx"
click node_expense_lists "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/Components/EarningList.jsx"
click node_expense_summary "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/Components/TotalEarn.jsx"
click node_todo_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project9/Todo_List/src/App.jsx"
click node_student_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project12/Student_Managment/src/App.jsx"
click node_project5_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project5/app/src/App.jsx"
click node_project5_search "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project5/app/src/components/SearchResults/SearchResult.jsx"
click node_firebase_app "https://github.com/sahrior/10-day-10-react-projects/blob/main/Project6/Contact_App_Firebase/src/App.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_brand_app,node_brand_nav,node_brand_hero,node_responsive_navbar,node_foody_zone,node_bmi_calculator toneBlue
class node_car_service_app,node_car_navbar,node_car_pages,node_myshop_app,node_myshop_navbar,node_myshop_products,node_myshop_cards,node_myshop_pages,node_contact_us_app,node_contact_nav,node_contact_header,node_contact_form,node_contact_button toneAmber
class node_dice_app,node_dice_play,node_dice_select,node_dice_roll,node_dice_score,node_dice_rules,node_expense_app,node_expense_input,node_expense_lists,node_expense_summary toneMint
class node_todo_app,node_student_app,node_project5_app,node_project5_search toneRose
class node_firebase_app toneIndigo
```

## Components

### Landing UIs

Small presentational apps with shallow component trees.

- [Brand Page](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project1/Brand_Page/src/App.jsx): React app · Landing page composition for the brand site. · `Project1/Brand_Page/src/App.jsx`
- [Navbar](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project1/Brand_Page/src/Components/Navbar.jsx): UI component · Top navigation for the brand landing page. · `Project1/Brand_Page/src/Components/Navbar.jsx`
- [Hero](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project1/Brand_Page/src/Components/Hero.jsx): UI component · Main hero section content. · `Project1/Brand_Page/src/Components/Hero.jsx`
- [Responsive Nav](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project11/Responsive_Navbar/src/App.jsx): React app · Navbar-focused responsive UI. · `Project11/Responsive_Navbar/src/App.jsx`
- [Foody Zone](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project4/Foody_zone/src/App.jsx): React app · Minimal marketing-style front end. · `Project4/Foody_zone/src/App.jsx`
- [BMI Calc](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project7/BMI_Calculator/src/App.jsx): React app · Small calculator-oriented app. · `Project7/BMI_Calculator/src/App.jsx`

### Nav / Page Apps

Apps organized around shared layout and route-like page sections.

- [Car Service](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project10/Car_Service/src/App.jsx): React app · Layout-driven service site. · `Project10/Car_Service/src/App.jsx`
- [Navbar](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project10/Car_Service/src/components/Navbar.jsx): UI component · Shared site navigation. · `Project10/Car_Service/src/components/Navbar.jsx`
- [Pages](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project10/Car_Service/src/pages/Home.jsx): page set · Home, services, careers, and contact sections. · `Project10/Car_Service/src/pages/Home.jsx`
- [My Shop](https://github.com/sahrior/10-day-10-react-projects/blob/HEAD/Project13/My%20shop/src/App.jsx): React app · Data-driven shopping UI. · `Project13/My shop/src/App.jsx`
- [Navbar](https://github.com/sahrior/10-day-10-react-projects/blob/HEAD/Project13/My%20shop/src/components/Navbar.jsx): UI component · Primary site navigation. · `Project13/My shop/src/components/Navbar.jsx`
- [Products](https://github.com/sahrior/10-day-10-react-projects/blob/HEAD/Project13/My%20shop/src/data/products.js): data module · Static product catalog used by the UI. · `Project13/My shop/src/data/products.js`
- [Cards](https://github.com/sahrior/10-day-10-react-projects/blob/HEAD/Project13/My%20shop/src/components/Productcard.jsx): UI components · Product and home card rendering. · `Project13/My shop/src/components/Productcard.jsx`
- [Pages](https://github.com/sahrior/10-day-10-react-projects/blob/HEAD/Project13/My%20shop/src/pages/Home.jsx): page set · Home, cart, and contact boundaries. · `Project13/My shop/src/pages/Home.jsx`
- [Contact Us](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/App.jsx): React app · Componentized contact page. · `Project2/Contact_Us_Page/Contact_us/src/App.jsx`
- [Navigation](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/components/Navigation/Navigation.jsx): UI component · Header navigation boundary. · `Project2/Contact_Us_Page/Contact_us/src/components/Navigation/Navigation.jsx`
- [Header](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/components/ContactHeader/ContactHeader.jsx): UI component · Contact page hero/header. · `Project2/Contact_Us_Page/Contact_us/src/components/ContactHeader/ContactHeader.jsx`
- [Form](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/components/ContactForm/ContactForm.jsx): UI component · Contact input form section. · `Project2/Contact_Us_Page/Contact_us/src/components/ContactForm/ContactForm.jsx`
- [Button](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project2/Contact_Us_Page/Contact_us/src/components/Button/Button.jsx): UI component · Reusable call-to-action button. · `Project2/Contact_Us_Page/Contact_us/src/components/Button/Button.jsx`

### Stateful Apps

Applications centered on interactive state and derived views.

- [Dice Game](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/App.jsx): React app · Interactive game with central shared state. · `Project3/Dice_Game/src/App.jsx`
- [Gameplay](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/GamePlay.jsx): feature component · Main game state and play loop. · `Project3/Dice_Game/src/components/GamePlay.jsx`
- [Number Select](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/NumberSelector.jsx): feature component · User number selection and validation. · `Project3/Dice_Game/src/components/NumberSelector.jsx`
- [Roll Dice](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/RoleDice.jsx): feature component · Dice roll interaction and result display. · `Project3/Dice_Game/src/components/RoleDice.jsx`
- [Score](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/TotalScore.jsx): feature component · Total score tracking and display. · `Project3/Dice_Game/src/components/TotalScore.jsx`
- [Rules](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project3/Dice_Game/src/components/Rules.jsx): feature component · Rules and guidance panel. · `Project3/Dice_Game/src/components/Rules.jsx`
- [Expense Tracker](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/App.jsx): React app · Financial tracking and summary UI. · `Project8/Expense_Tracker/src/App.jsx`
- [Inputs](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/Components/EarningsInput.jsx): feature component · Earnings and expense entry flow. · `Project8/Expense_Tracker/src/Components/EarningsInput.jsx`
- [Lists](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/Components/EarningList.jsx): feature component · Earning and expense list views. · `Project8/Expense_Tracker/src/Components/EarningList.jsx`
- [Summary](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project8/Expense_Tracker/src/Components/TotalEarn.jsx): feature component · Totals for earnings, spending, and savings. · `Project8/Expense_Tracker/src/Components/TotalEarn.jsx`

### Exercises

Minimal practice apps with most logic concentrated in App.

- [Todo List](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project9/Todo_List/src/App.jsx): React app · Minimal practice app with local state. · `Project9/Todo_List/src/App.jsx`
- [Student Mgmt](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project12/Student_Managment/src/App.jsx): React app · Small exercise app with compact UI logic. · `Project12/Student_Managment/src/App.jsx`
- [Project 5 App](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project5/app/src/App.jsx): React app · Small app with a search-results component. · `Project5/app/src/App.jsx`
- [Search Results](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project5/app/src/components/SearchResults/SearchResult.jsx): UI component · Results rendering for the app search flow. · `Project5/app/src/components/SearchResults/SearchResult.jsx`

### External Service

App with a backend boundary through Firebase.

- [Contact Firebase](https://github.com/sahrior/10-day-10-react-projects/blob/main/Project6/Contact_App_Firebase/src/App.jsx): React app · Contact app with cloud-backed data access. · `Project6/Contact_App_Firebase/src/App.jsx`

## Connections

- Brand Page → Navbar: composes · App shell renders the shared navigation.
- Brand Page → Hero: composes · App shell places the hero section.
- Responsive Nav → Navbar: similar pattern · Another navigation-centered React shell.
- Car Service → Navbar: composes · Shared layout begins with the navbar.
- Car Service → Pages: switches views · Main content is split into page sections.
- My Shop → Navbar: composes · Top-level shopping navigation.
- My Shop → Products: loads data · Product catalog feeds the UI.
- My Shop → Cards: renders · Product data is turned into card views.
- My Shop → Pages: routes · Home, cart, and contact are the main boundaries.
- Contact Us → Navigation: composes · Page wrapper includes navigation.
- Contact Us → Header: composes · Header introduces the contact page.
- Contact Us → Form: composes · Form is the central interaction area.
- Form → Button: uses · Form actions use a reusable button.
- Dice Game → Gameplay: coordinates · Central app state drives gameplay.
- Gameplay → Number Select: uses · Players choose a number before rolling.
- Gameplay → Roll Dice: uses · Gameplay triggers dice rolls.
- Gameplay → Score: updates · Score is derived from game progress.
- Gameplay → Rules: shows · Rules are surfaced alongside play.
- Expense Tracker → Inputs: collects · Input flow captures earnings and expenses.
- Expense Tracker → Lists: shows · Entered transactions are listed back to the user.
- Expense Tracker → Summary: derives · Totals and savings are computed views.
- Project 5 App → Search Results: renders · The app delegates results presentation.
- Contact Firebase → Contact Firebase: connects · App layer sits above the Firebase-backed boundary.