# hannakot62/b1 architecture

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

- Interactive diagram: https://gitdiagram.com/hannakot62/b1
- Repository: https://github.com/hannakot62/b1

## Overview

CryptoCoins is a React app for browsing top cryptocurrencies, filtering and sorting them, managing favorites, viewing market statistics, and searching coins, exchanges, and markets through Coinranking. The main user flow is browser navigation into routed pages; search dispatches a Coinranking request, stores results in page state, and renders categorized lists. Redux provides shared coin, statistics, favorites, loading, and error state. Page-to-component wiring beyond the sampled search code is not shown, so those links are omitted.

Main entry points: [`src/pages/SearchPage/SearchPage.jsx`](https://github.com/hannakot62/b1/blob/styling/src/pages/SearchPage/SearchPage.jsx) (Search page), [`src/store/index.js`](https://github.com/hannakot62/b1/blob/styling/src/store/index.js) (Redux store), [`src/routes/AppRouter.jsx`](https://github.com/hannakot62/b1/blob/styling/src/routes/AppRouter.jsx) (Page router), [`src/App.jsx`](https://github.com/hannakot62/b1/blob/styling/src/App.jsx) (App provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application routing"]
  node_app["App provider<br/>[App.jsx]"]
  node_router["Page router<br/>[AppRouter.jsx]"]
  node_layout["App layout<br/>[Layout.jsx]"]
end

subgraph group_browse["Coin browsing"]
  node_coins["Coins page<br/>[CoinsPage.jsx]"]
  node_coinstable["Coins table<br/>[CoinsTable.jsx]"]
  node_topcoin["Top coin<br/>[TopCoin.jsx]"]
  node_favourites["Favorites page<br/>[FavouritesPage.jsx]"]
  node_statistics["Statistics page<br/>[StatisticsPage.jsx]"]
end

subgraph group_search["Search"]
  node_searchpage["Search page<br/>[SearchPage.jsx]"]
  node_coinlist["Coin results<br/>[CoinSearchList.jsx]"]
  node_exchangelist["Exchange results"]
  node_marketlist["Market results"]
  node_coinsearch["Coin result item<br/>[CoinSearch.jsx]"]
  node_exchangesearch["Exchange result item<br/>[ExchangeSearch.jsx]"]
  node_marketsearch["Market result item<br/>[MarketSearch.jsx]"]
end

subgraph group_state["Shared state"]
  node_store["Redux store<br/>[index.js]"]
  node_coinsstate["Coin state<br/>[coinsSlice.js]"]
  node_statsstate["Statistics state<br/>[statsSlice.js]"]
  node_favsstate["Favorites state<br/>[favsSlice.js]"]
  node_loadingstate["Loading state<br/>[isLoadingSlice.js]"]
  node_errorstate["Error state<br/>[errorSlice.js]"]
end

node_user(("Browser user"))
node_coinranking["Coinranking API"]

node_user -->|"opens app"| node_app
node_app -->|"provides state"| node_store
node_app -->|"renders routes"| node_router
node_router -->|"wraps pages"| node_layout
node_router -->|"routes to"| node_coins
node_router -->|"routes to"| node_favourites
node_router -->|"routes to"| node_statistics
node_router -->|"routes to"| node_searchpage
node_searchpage -->|"requests suggestions"| node_coinranking
node_coinranking -->|"returns results"| node_searchpage
node_searchpage -->|"renders coins"| node_coinlist
node_searchpage -->|"renders exchanges"| node_exchangelist
node_searchpage -->|"renders markets"| node_marketlist
node_coinlist -->|"renders items"| node_coinsearch
node_exchangelist -->|"renders items"| node_exchangesearch
node_marketlist -->|"renders items"| node_marketsearch
node_searchpage -->|"dispatches loading"| node_loadingstate
node_searchpage -->|"dispatches errors"| node_errorstate
node_coinsearch -->|"reads favorites"| node_store
node_store --> node_coinsstate
node_store --> node_statsstate
node_store --> node_favsstate
node_store --> node_loadingstate
node_store --> node_errorstate

click node_app "https://github.com/hannakot62/b1/blob/styling/src/App.jsx"
click node_router "https://github.com/hannakot62/b1/blob/styling/src/routes/AppRouter.jsx"
click node_layout "https://github.com/hannakot62/b1/blob/styling/src/components/Layout/Layout.jsx"
click node_coins "https://github.com/hannakot62/b1/blob/styling/src/pages/CoinsPage/CoinsPage.jsx"
click node_coinstable "https://github.com/hannakot62/b1/blob/styling/src/components/CoinsTable/CoinsTable.jsx"
click node_topcoin "https://github.com/hannakot62/b1/blob/styling/src/components/TopCoin/TopCoin.jsx"
click node_favourites "https://github.com/hannakot62/b1/blob/styling/src/pages/FavouritesPage/FavouritesPage.jsx"
click node_statistics "https://github.com/hannakot62/b1/blob/styling/src/pages/StatisticsPage/StatisticsPage.jsx"
click node_searchpage "https://github.com/hannakot62/b1/blob/styling/src/pages/SearchPage/SearchPage.jsx"
click node_coinlist "https://github.com/hannakot62/b1/blob/styling/src/components/CoinSearchList/CoinSearchList.jsx"
click node_exchangelist "https://github.com/hannakot62/b1/blob/styling/src/components/ExchangeSearchList/ExchangeSearchList.jsx"
click node_marketlist "https://github.com/hannakot62/b1/blob/styling/src/components/MarketSearchList/MarketSearchList.jsx"
click node_coinsearch "https://github.com/hannakot62/b1/blob/styling/src/components/CoinSearch/CoinSearch.jsx"
click node_exchangesearch "https://github.com/hannakot62/b1/blob/styling/src/components/ExchangeSearch/ExchangeSearch.jsx"
click node_marketsearch "https://github.com/hannakot62/b1/blob/styling/src/components/MarketSearch/MarketSearch.jsx"
click node_store "https://github.com/hannakot62/b1/blob/styling/src/store/index.js"
click node_coinsstate "https://github.com/hannakot62/b1/blob/styling/src/store/slices/coinsSlice.js"
click node_statsstate "https://github.com/hannakot62/b1/blob/styling/src/store/slices/statsSlice.js"
click node_favsstate "https://github.com/hannakot62/b1/blob/styling/src/store/slices/favsSlice.js"
click node_loadingstate "https://github.com/hannakot62/b1/blob/styling/src/store/slices/isLoadingSlice.js"
click node_errorstate "https://github.com/hannakot62/b1/blob/styling/src/store/slices/errorSlice.js"

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_app,node_router,node_layout,node_user toneBlue
class node_coins,node_coinstable,node_topcoin,node_favourites,node_statistics toneAmber
class node_searchpage,node_coinlist,node_exchangelist,node_marketlist,node_coinsearch,node_exchangesearch,node_marketsearch,node_coinranking toneMint
class node_store,node_coinsstate,node_statsstate,node_favsstate,node_loadingstate,node_errorstate toneRose
```

## Components

### Application routing

- [App provider](https://github.com/hannakot62/b1/blob/styling/src/App.jsx): `src/App.jsx`
- [Page router](https://github.com/hannakot62/b1/blob/styling/src/routes/AppRouter.jsx): `src/routes/AppRouter.jsx`
- [App layout](https://github.com/hannakot62/b1/blob/styling/src/components/Layout/Layout.jsx): `src/components/Layout/Layout.jsx`

### Coin browsing

- [Coins page](https://github.com/hannakot62/b1/blob/styling/src/pages/CoinsPage/CoinsPage.jsx): `src/pages/CoinsPage/CoinsPage.jsx`
- [Coins table](https://github.com/hannakot62/b1/blob/styling/src/components/CoinsTable/CoinsTable.jsx): `src/components/CoinsTable/CoinsTable.jsx`
- [Top coin](https://github.com/hannakot62/b1/blob/styling/src/components/TopCoin/TopCoin.jsx): `src/components/TopCoin/TopCoin.jsx`
- [Favorites page](https://github.com/hannakot62/b1/blob/styling/src/pages/FavouritesPage/FavouritesPage.jsx): `src/pages/FavouritesPage/FavouritesPage.jsx`
- [Statistics page](https://github.com/hannakot62/b1/blob/styling/src/pages/StatisticsPage/StatisticsPage.jsx): `src/pages/StatisticsPage/StatisticsPage.jsx`

### Search

- [Search page](https://github.com/hannakot62/b1/blob/styling/src/pages/SearchPage/SearchPage.jsx): `src/pages/SearchPage/SearchPage.jsx`
- [Coin results](https://github.com/hannakot62/b1/blob/styling/src/components/CoinSearchList/CoinSearchList.jsx): `src/components/CoinSearchList/CoinSearchList.jsx`
- [Exchange results](https://github.com/hannakot62/b1/blob/styling/src/components/ExchangeSearchList/ExchangeSearchList.jsx): `src/components/ExchangeSearchList/ExchangeSearchList.jsx`
- [Market results](https://github.com/hannakot62/b1/blob/styling/src/components/MarketSearchList/MarketSearchList.jsx): `src/components/MarketSearchList/MarketSearchList.jsx`
- [Coin result item](https://github.com/hannakot62/b1/blob/styling/src/components/CoinSearch/CoinSearch.jsx): `src/components/CoinSearch/CoinSearch.jsx`
- [Exchange result item](https://github.com/hannakot62/b1/blob/styling/src/components/ExchangeSearch/ExchangeSearch.jsx): `src/components/ExchangeSearch/ExchangeSearch.jsx`
- [Market result item](https://github.com/hannakot62/b1/blob/styling/src/components/MarketSearch/MarketSearch.jsx): `src/components/MarketSearch/MarketSearch.jsx`

### Shared state

- [Redux store](https://github.com/hannakot62/b1/blob/styling/src/store/index.js): `src/store/index.js`
- [Coin state](https://github.com/hannakot62/b1/blob/styling/src/store/slices/coinsSlice.js): `src/store/slices/coinsSlice.js`
- [Statistics state](https://github.com/hannakot62/b1/blob/styling/src/store/slices/statsSlice.js): `src/store/slices/statsSlice.js`
- [Favorites state](https://github.com/hannakot62/b1/blob/styling/src/store/slices/favsSlice.js): `src/store/slices/favsSlice.js`
- [Loading state](https://github.com/hannakot62/b1/blob/styling/src/store/slices/isLoadingSlice.js): `src/store/slices/isLoadingSlice.js`
- [Error state](https://github.com/hannakot62/b1/blob/styling/src/store/slices/errorSlice.js): `src/store/slices/errorSlice.js`

### Other components

- **Browser user**
- **Coinranking API**

## Connections

- Browser user → App provider: opens app
- App provider → Redux store: provides state
- App provider → Page router: renders routes
- Page router → App layout: wraps pages
- Page router → Coins page: routes to
- Page router → Favorites page: routes to
- Page router → Statistics page: routes to
- Page router → Search page: routes to
- Search page → Coinranking API: requests suggestions
- Coinranking API → Search page: returns results
- Search page → Coin results: renders coins
- Search page → Exchange results: renders exchanges
- Search page → Market results: renders markets
- Coin results → Coin result item: renders items
- Exchange results → Exchange result item: renders items
- Market results → Market result item: renders items
- Search page → Loading state: dispatches loading
- Search page → Error state: dispatches errors
- Coin result item → Redux store: reads favorites
- Redux store → Coin state
- Redux store → Statistics state
- Redux store → Favorites state
- Redux store → Loading state
- Redux store → Error state