barathkb09/dashboard-crypto

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.