# barathkb09/dashboard-crypto architecture

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

- Interactive diagram: https://gitdiagram.com/barathkb09/dashboard-crypto
- Repository: https://github.com/barathkb09/dashboard-crypto

## Overview

#### Purpose and runtime
This is a Next.js/React cryptocurrency market dashboard. It presents a market overview, coin detail views, and a persistent user watchlist. The app is intended for Vercel deployment (`vercel.json`) and uses TypeScript, Tailwind CSS, and a shared component library.

#### Application shell and entry points
The root layout establishes global page structure and styles in `app/layout.tsx` and `app/globals.css`. The market overview is the primary entry route at `app/page.tsx`. Shared site navigation is centralized in `components/navigation.tsx`, linking the overview, individual coin routes, and watchlist.

#### Market overview pipeline
The home route composes filtering and tabular market presentation:
- `app/page.tsx`
- `components/market-filters.tsx`
- `components/market-table.tsx`

Filters control the market dataset shown by the table; table rows likely form the navigation boundary into dynamic coin pages. The market data contract is defined in `types/crypto.ts`, while data acquisition is isolated behind `lib/api.ts`.

#### Coin detail route
Dynamic coin pages are handled by `app/coin/[id]/page.tsx`. The route parameter (`id`) identifies the selected asset and drives detail-data retrieval through the API boundary. Historical or time-series price visualization is encapsulated in `components/price-chart.tsx`, separating chart rendering from route-level loading and presentation.

#### Watchlist state boundary
The watchlist page is `app/watchlist/page.tsx`, with client-side watchlist behavior concentrated in `hooks/useWatchlist.ts`. This hook is the key persistence/state boundary: market and detail views can use it to add or remove assets, while the watchlist route resolves and displays the saved selections. Debounced interaction or query updates are available through `hooks/useDebounce.ts`.

#### Data, types, and external services
`lib/api.ts` is the central external-service adapter for cryptocurrency market and pricing data; callers should not couple directly to provider request formats. `types/crypto.ts` provides shared crypto-domain models across API, table, chart, and page layers. No backend, database, authentication service, or API route layer appears in the repository tree, so user-specific state is likely browser-local rather than server-managed.

#### Presentation system
Tailwind configuration lives in `tailwind.config.ts`; reusable UI primitives are under `components/ui/`. Feature components (`components/market-table.tsx`, `components/price-chart.tsx`, and `components/market-filters.tsx`) compose these primitives rather than owning a separate design system. `lib/utils.ts` provides shared presentation or utility support.

Main entry points: [`app/page.tsx`](https://github.com/barathkb09/dashboard-crypto/blob/main/app/page.tsx) (Market overview), [`app/coin/[id]/page.tsx`](https://github.com/barathkb09/dashboard-crypto/blob/main/app/coin/%5Bid%5D/page.tsx) (Coin detail), [`components/market-table.tsx`](https://github.com/barathkb09/dashboard-crypto/blob/main/components/market-table.tsx) (Market table), [`components/market-filters.tsx`](https://github.com/barathkb09/dashboard-crypto/blob/main/components/market-filters.tsx) (Market filters)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Next.js routes"]
  node_layout["Root layout<br/>Next.js layout<br/>[layout.tsx]"]
  node_overview["Market overview<br/>page route<br/>[page.tsx]"]
  node_coin_page["Coin detail<br/>dynamic page route<br/>[page.tsx]"]
  node_watchlist_page["Watchlist<br/>page route<br/>[page.tsx]"]
end

subgraph group_features["Market features"]
  node_market_filters["Market filters<br/>feature component<br/>[market-filters.tsx]"]
  node_market_table["Market table<br/>feature component<br/>[market-table.tsx]"]
  node_price_chart["Price chart<br/>feature component<br/>[price-chart.tsx]"]
end

subgraph group_data["Data and state"]
  node_watchlist_hook{{"Watchlist state<br/>client state hook<br/>[useWatchlist.ts]"}}
  node_debounce_hook{{"Debounced updates<br/>utility hook<br/>[useDebounce.ts]"}}
  node_crypto_api{{"Crypto API adapter<br/>external data adapter<br/>[api.ts]"}}
  node_crypto_types["Crypto models<br/>domain types<br/>[crypto.ts]"]
end

subgraph group_presentation["Presentation system"]
  node_navigation["Site navigation<br/>shared component<br/>[navigation.tsx]"]
  node_ui_primitives["UI primitives<br/>component library"]
  node_utils["Presentation utilities<br/>shared utilities<br/>[utils.ts]"]
  node_global_styles["Global styles<br/>stylesheet<br/>[globals.css]"]
end

node_layout -->|"loads"| node_global_styles
node_layout -->|"hosts"| node_navigation
node_navigation -->|"navigates to"| node_overview
node_navigation -->|"navigates to"| node_coin_page
node_navigation -->|"navigates to"| node_watchlist_page
node_overview -->|"composes"| node_market_filters
node_overview -->|"composes"| node_market_table
node_market_filters -->|"filters dataset"| node_market_table
node_market_filters -.->|"debounces updates"| node_debounce_hook
node_market_table -->|"selects asset"| node_coin_page
node_overview -->|"loads markets"| node_crypto_api
node_coin_page -->|"loads asset data"| node_crypto_api
node_coin_page -->|"composes"| node_price_chart
node_watchlist_page -->|"reads saved assets"| node_watchlist_hook
node_overview -.->|"updates watchlist"| node_watchlist_hook
node_coin_page -.->|"updates watchlist"| node_watchlist_hook
node_crypto_api -->|"uses models"| node_crypto_types
node_market_table -->|"uses models"| node_crypto_types
node_price_chart -->|"uses models"| node_crypto_types
node_market_filters -->|"composes"| node_ui_primitives
node_market_table -->|"composes"| node_ui_primitives
node_price_chart -->|"composes"| node_ui_primitives
node_ui_primitives -.->|"uses"| node_utils

click node_layout "https://github.com/barathkb09/dashboard-crypto/blob/main/app/layout.tsx"
click node_overview "https://github.com/barathkb09/dashboard-crypto/blob/main/app/page.tsx"
click node_coin_page "https://github.com/barathkb09/dashboard-crypto/blob/main/app/coin/%5Bid%5D/page.tsx"
click node_watchlist_page "https://github.com/barathkb09/dashboard-crypto/blob/main/app/watchlist/page.tsx"
click node_navigation "https://github.com/barathkb09/dashboard-crypto/blob/main/components/navigation.tsx"
click node_market_filters "https://github.com/barathkb09/dashboard-crypto/blob/main/components/market-filters.tsx"
click node_market_table "https://github.com/barathkb09/dashboard-crypto/blob/main/components/market-table.tsx"
click node_price_chart "https://github.com/barathkb09/dashboard-crypto/blob/main/components/price-chart.tsx"
click node_watchlist_hook "https://github.com/barathkb09/dashboard-crypto/blob/main/hooks/useWatchlist.ts"
click node_debounce_hook "https://github.com/barathkb09/dashboard-crypto/blob/main/hooks/useDebounce.ts"
click node_crypto_api "https://github.com/barathkb09/dashboard-crypto/blob/main/lib/api.ts"
click node_crypto_types "https://github.com/barathkb09/dashboard-crypto/blob/main/types/crypto.ts"
click node_utils "https://github.com/barathkb09/dashboard-crypto/blob/main/lib/utils.ts"
click node_global_styles "https://github.com/barathkb09/dashboard-crypto/blob/main/app/globals.css"

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_layout,node_overview,node_coin_page,node_watchlist_page toneBlue
class node_market_filters,node_market_table,node_price_chart toneAmber
class node_watchlist_hook,node_debounce_hook,node_crypto_api,node_crypto_types toneMint
class node_navigation,node_ui_primitives,node_utils,node_global_styles toneRose
```

## Components

### Next.js routes

- [Root layout](https://github.com/barathkb09/dashboard-crypto/blob/main/app/layout.tsx): Next.js layout · Establishes global structure and styles. · `app/layout.tsx`
- [Market overview](https://github.com/barathkb09/dashboard-crypto/blob/main/app/page.tsx): page route · `app/page.tsx`
- [Coin detail](https://github.com/barathkb09/dashboard-crypto/blob/main/app/coin/%5Bid%5D/page.tsx): dynamic page route · Loads the asset selected by id. · `app/coin/[id]/page.tsx`
- [Watchlist](https://github.com/barathkb09/dashboard-crypto/blob/main/app/watchlist/page.tsx): page route · `app/watchlist/page.tsx`

### Market features

- [Market filters](https://github.com/barathkb09/dashboard-crypto/blob/main/components/market-filters.tsx): feature component · `components/market-filters.tsx`
- [Market table](https://github.com/barathkb09/dashboard-crypto/blob/main/components/market-table.tsx): feature component · Displays filtered assets and links into coin routes. · `components/market-table.tsx`
- [Price chart](https://github.com/barathkb09/dashboard-crypto/blob/main/components/price-chart.tsx): feature component · Renders historical price data. · `components/price-chart.tsx`

### Data and state

- [Watchlist state](https://github.com/barathkb09/dashboard-crypto/blob/main/hooks/useWatchlist.ts): client state hook · Owns browser-local saved asset selections. · `hooks/useWatchlist.ts`
- [Debounced updates](https://github.com/barathkb09/dashboard-crypto/blob/main/hooks/useDebounce.ts): utility hook · `hooks/useDebounce.ts`
- [Crypto API adapter](https://github.com/barathkb09/dashboard-crypto/blob/main/lib/api.ts): external data adapter · Isolates market and pricing provider requests. · `lib/api.ts`
- [Crypto models](https://github.com/barathkb09/dashboard-crypto/blob/main/types/crypto.ts): domain types · Shared market and price data contract. · `types/crypto.ts`

### Presentation system

- [Site navigation](https://github.com/barathkb09/dashboard-crypto/blob/main/components/navigation.tsx): shared component · `components/navigation.tsx`
- **UI primitives**: component library
- [Presentation utilities](https://github.com/barathkb09/dashboard-crypto/blob/main/lib/utils.ts): shared utilities · `lib/utils.ts`
- [Global styles](https://github.com/barathkb09/dashboard-crypto/blob/main/app/globals.css): stylesheet · `app/globals.css`

## Connections

- Root layout → Global styles: loads
- Root layout → Site navigation: hosts
- Site navigation → Market overview: navigates to
- Site navigation → Coin detail: navigates to
- Site navigation → Watchlist: navigates to
- Market overview → Market filters: composes
- Market overview → Market table: composes
- Market filters → Market table: filters dataset
- Market filters → Debounced updates: debounces updates
- Market table → Coin detail: selects asset
- Market overview → Crypto API adapter: loads markets
- Coin detail → Crypto API adapter: loads asset data
- Coin detail → Price chart: composes
- Watchlist → Watchlist state: reads saved assets
- Market overview → Watchlist state: updates watchlist
- Coin detail → Watchlist state: updates watchlist
- Crypto API adapter → Crypto models: uses models
- Market table → Crypto models: uses models
- Price chart → Crypto models: uses models
- Market filters → UI primitives: composes
- Market table → UI primitives: composes
- Price chart → UI primitives: composes
- UI primitives → Presentation utilities: uses