# soudamini02/rest-countries architecture

> Architecture diagram of the GitHub repository soudamini02/rest-countries, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/soudamini02/rest-countries
- Repository: https://github.com/soudamini02/rest-countries

## Overview

This repository is a set of small React learning projects, alongside two country-explorer app variants. The clearest user workflow is the explorer: render a country list, enter a search query, and view search/filter controls; the sampled code confirms query state is passed from the app to the search and list components. The other projects demonstrate component rendering, props, state, conditional display, and event handling. The tree and excerpts do not establish country-detail navigation or the explorer’s internal filtering/data flow, so those links are omitted.

Main entry points: [`rest-countries/src/App.jsx`](https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/App.jsx) (Country explorer), [`rst-countries/src/App.jsx`](https://github.com/soudamini02/rest-countries/blob/main/rst-countries/src/App.jsx) (Country explorer), [`hello-react/src/App.jsx`](https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/App.jsx) (Hello React app), [`conditinal-rendering-and-css-modules/src/App.jsx`](https://github.com/soudamini02/rest-countries/blob/main/conditinal-rendering-and-css-modules/src/App.jsx) (Conditional app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_tutorials["React tutorials"]
  node_hello["Hello React app<br/>[App.jsx]"]
  node_products["Product examples<br/>[products.jsx]"]
  node_item["Product component<br/>[Product.jsx]"]
  node_soudamini["Example component<br/>[Soudamini.jsx]"]
  node_hooks["Counter app<br/>[App.jsx]"]
  node_events["Event demo<br/>[App.jsx]"]
  node_custombutton["Custom button<br/>[Custombutton.jsx]"]
  node_conditional["Conditional app<br/>[App.jsx]"]
  node_greetconditional["Greeting component<br/>[Greet.jsx]"]
  node_xyz["Example component<br/>[Xyz.jsx]"]
  node_props["Props and state app<br/>[App.jsx]"]
  node_greetprops["Greeting component<br/>[Greet.jsx]"]
  node_hellochild["Child component<br/>[Hello.jsx]"]
end

subgraph group_explorers["Country explorers"]
  node_restapp["Country explorer<br/>[App.jsx]"]
  node_rstapp["Country explorer<br/>[App.jsx]"]
  node_detail["Country detail<br/>[CountryDetail.jsx]"]
end

subgraph group_countryui["Explorer interface"]
  node_header["Header<br/>[Header.jsx]"]
  node_search["Country search<br/>[SearchBar.jsx]"]
  node_select["Region selector<br/>[SelectMenu.jsx]"]
  node_list["Country list<br/>[CountriesList.jsx]"]
  node_card["Country card<br/>[CountryCard.jsx]"]
  node_countrydata["Country data<br/>[countriesData.js]"]
end

node_learner(("User"))

node_learner -->|"uses"| node_hello
node_learner -->|"uses"| node_hooks
node_learner -->|"uses"| node_events
node_learner -->|"uses"| node_conditional
node_learner -->|"uses"| node_props
node_learner -->|"uses"| node_restapp
node_learner -->|"uses"| node_rstapp
node_hello -->|"maps"| node_products
node_hello -->|"renders"| node_item
node_hello -->|"renders"| node_soudamini
node_events -->|"renders"| node_custombutton
node_conditional -->|"renders conditionally"| node_greetconditional
node_conditional -->|"renders"| node_xyz
node_props -->|"passes props"| node_greetprops
node_props -->|"imports"| node_hellochild
node_restapp -->|"renders"| node_header
node_restapp -->|"passes setter"| node_search
node_search -->|"updates query"| node_restapp
node_restapp -->|"renders"| node_select
node_restapp -->|"passes query"| node_list
node_rstapp -->|"renders"| node_header
node_rstapp -->|"passes setter"| node_search
node_rstapp -->|"renders"| node_select
node_rstapp -->|"passes query"| node_list

click node_hello "https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/App.jsx"
click node_products "https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/products.jsx"
click node_item "https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/Product.jsx"
click node_soudamini "https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/Soudamini.jsx"
click node_hooks "https://github.com/soudamini02/rest-countries/blob/main/intro-to-hooks/src/App.jsx"
click node_events "https://github.com/soudamini02/rest-countries/blob/main/adding-event-listeners/src/App.jsx"
click node_custombutton "https://github.com/soudamini02/rest-countries/blob/main/adding-event-listeners/src/Custombutton.jsx"
click node_conditional "https://github.com/soudamini02/rest-countries/blob/main/conditinal-rendering-and-css-modules/src/App.jsx"
click node_greetconditional "https://github.com/soudamini02/rest-countries/blob/main/conditinal-rendering-and-css-modules/src/Greet.jsx"
click node_xyz "https://github.com/soudamini02/rest-countries/blob/main/conditinal-rendering-and-css-modules/src/Xyz.jsx"
click node_props "https://github.com/soudamini02/rest-countries/blob/main/diff-betn-state-and-prop/src/App.jsx"
click node_greetprops "https://github.com/soudamini02/rest-countries/blob/main/diff-betn-state-and-prop/src/Greet.jsx"
click node_hellochild "https://github.com/soudamini02/rest-countries/blob/main/diff-betn-state-and-prop/src/Hello.jsx"
click node_restapp "https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/App.jsx"
click node_rstapp "https://github.com/soudamini02/rest-countries/blob/main/rst-countries/src/App.jsx"
click node_header "https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/Header.jsx"
click node_search "https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/SearchBar.jsx"
click node_select "https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/SelectMenu.jsx"
click node_list "https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/CountriesList.jsx"
click node_card "https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/CountryCard.jsx"
click node_countrydata "https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/countriesData.js"
click node_detail "https://github.com/soudamini02/rest-countries/blob/main/CountryDetail.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_hello,node_products,node_item,node_soudamini,node_hooks,node_events,node_custombutton,node_conditional,node_greetconditional,node_xyz,node_props,node_greetprops,node_hellochild,node_learner toneBlue
class node_restapp,node_rstapp,node_detail toneAmber
class node_header,node_search,node_select,node_list,node_card,node_countrydata toneMint
```

## Components

### React tutorials

- [Hello React app](https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/App.jsx): `hello-react/src/App.jsx`
- [Product examples](https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/products.jsx): `hello-react/src/products.jsx`
- [Product component](https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/Product.jsx): `hello-react/src/Product.jsx`
- [Example component](https://github.com/soudamini02/rest-countries/blob/main/hello-react/src/Soudamini.jsx): `hello-react/src/Soudamini.jsx`
- [Counter app](https://github.com/soudamini02/rest-countries/blob/main/intro-to-hooks/src/App.jsx): `intro-to-hooks/src/App.jsx`
- [Event demo](https://github.com/soudamini02/rest-countries/blob/main/adding-event-listeners/src/App.jsx): `adding-event-listeners/src/App.jsx`
- [Custom button](https://github.com/soudamini02/rest-countries/blob/main/adding-event-listeners/src/Custombutton.jsx): `adding-event-listeners/src/Custombutton.jsx`
- [Conditional app](https://github.com/soudamini02/rest-countries/blob/main/conditinal-rendering-and-css-modules/src/App.jsx): `conditinal-rendering-and-css-modules/src/App.jsx`
- [Greeting component](https://github.com/soudamini02/rest-countries/blob/main/conditinal-rendering-and-css-modules/src/Greet.jsx): `conditinal-rendering-and-css-modules/src/Greet.jsx`
- [Example component](https://github.com/soudamini02/rest-countries/blob/main/conditinal-rendering-and-css-modules/src/Xyz.jsx): `conditinal-rendering-and-css-modules/src/Xyz.jsx`
- [Props and state app](https://github.com/soudamini02/rest-countries/blob/main/diff-betn-state-and-prop/src/App.jsx): `diff-betn-state-and-prop/src/App.jsx`
- [Greeting component](https://github.com/soudamini02/rest-countries/blob/main/diff-betn-state-and-prop/src/Greet.jsx): `diff-betn-state-and-prop/src/Greet.jsx`
- [Child component](https://github.com/soudamini02/rest-countries/blob/main/diff-betn-state-and-prop/src/Hello.jsx): `diff-betn-state-and-prop/src/Hello.jsx`

### Country explorers

- [Country explorer](https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/App.jsx): `rest-countries/src/App.jsx`
- [Country explorer](https://github.com/soudamini02/rest-countries/blob/main/rst-countries/src/App.jsx): `rst-countries/src/App.jsx`
- [Country detail](https://github.com/soudamini02/rest-countries/blob/main/CountryDetail.jsx): `CountryDetail.jsx`

### Explorer interface

- [Header](https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/Header.jsx): `rest-countries/src/components/Header.jsx`
- [Country search](https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/SearchBar.jsx): `rest-countries/src/components/SearchBar.jsx`
- [Region selector](https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/SelectMenu.jsx): `rest-countries/src/components/SelectMenu.jsx`
- [Country list](https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/CountriesList.jsx): `rest-countries/src/components/CountriesList.jsx`
- [Country card](https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/components/CountryCard.jsx): `rest-countries/src/components/CountryCard.jsx`
- [Country data](https://github.com/soudamini02/rest-countries/blob/main/rest-countries/src/countriesData.js): `rest-countries/src/countriesData.js`

### Other components

- **User**

## Connections

- User → Hello React app: uses
- User → Counter app: uses
- User → Event demo: uses
- User → Conditional app: uses
- User → Props and state app: uses
- User → Country explorer: uses
- User → Country explorer: uses
- Hello React app → Product examples: maps
- Hello React app → Product component: renders
- Hello React app → Example component: renders
- Event demo → Custom button: renders
- Conditional app → Greeting component: renders conditionally
- Conditional app → Example component: renders
- Props and state app → Greeting component: passes props
- Props and state app → Child component: imports
- Country explorer → Header: renders
- Country explorer → Country search: passes setter
- Country search → Country explorer: updates query
- Country explorer → Region selector: renders
- Country explorer → Country list: passes query
- Country explorer → Header: renders
- Country explorer → Country search: passes setter
- Country explorer → Region selector: renders
- Country explorer → Country list: passes query