How hannakot62/b1 works
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: SearchPage.jsx Search page · index.js Redux store · AppRouter.jsx Page router · App.jsx App provider
Components 23
Application routing
- App provider
src/App.jsx - Page router
src/routes/AppRouter.jsx - App layout
src/components/Layout/Layout.jsx
Coin browsing
- Coins page
src/pages/CoinsPage/CoinsPage.jsx - Coins table
src/components/CoinsTable/CoinsTable.jsx - Top coin
src/components/TopCoin/TopCoin.jsx - Favorites page
src/pages/FavouritesPage/FavouritesPage.jsx - Statistics page
src/pages/StatisticsPage/StatisticsPage.jsx
Search
- Search page
src/pages/SearchPage/SearchPage.jsx - Coin results
src/components/CoinSearchList/CoinSearchList.jsx - Exchange results
src/components/ExchangeSearchList/ExchangeSearchList.jsx - Market results
src/components/MarketSearchList/MarketSearchList.jsx - Coin result item
src/components/CoinSearch/CoinSearch.jsx - Exchange result item
src/components/ExchangeSearch/ExchangeSearch.jsx - Market result item
src/components/MarketSearch/MarketSearch.jsx
Shared state
- Redux store
src/store/index.js - Coin state
src/store/slices/coinsSlice.js - Statistics state
src/store/slices/statsSlice.js - Favorites state
src/store/slices/favsSlice.js - Loading state
src/store/slices/isLoadingSlice.js - Error state
src/store/slices/errorSlice.js
Other components
- Browser user
- Coinranking API
Connections 24
- 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