Build Currency Knowledge Hub Frontend — Browse Page, Detail Page, and Historical Price Chart

[portableDD]

Labels

Frontend

Description

The currency knowledge hub is a core feature of ByteChain Academy — it is what sets the platform apart from a generic Web3 course site. Users should be able to explore the history of both cryptocurrencies and fiat currencies, understand market context, and see historical price data. The /app/currencies route currently has no page.tsx and returns a 404. This issue builds the complete currency hub frontend — a browse page, a detail page with historical chart, and search and filter functionality — wired to the backend currency API from Issue 13.

Background & Context

• frontend/app/currencies/ directory has no page.tsx — the route 404s
• The backend currency API (Issue 13) exposes: GET /api/v1/currencies, GET /api/v1/currencies/:id, GET /api/v1/currencies/:id/history, GET /api/v1/currencies/tags
• The landing page and navigation already link to /currencies
• Historical price data is stored as { date, price } snapshots — this should render as a line chart

Requirements

• Create frontend/app/currencies/page.tsx — browse page with:
  • Tab or toggle to switch between Crypto and Fiat currencies
  • Search input filtering by name or symbol (debounced, calls backend with ?search= param)
  • Currency cards showing: logo/icon, name, symbol, type badge, short description excerpt
  • Responsive grid layout
  • Loading skeleton cards while fetching
• Create frontend/app/currencies/[id]/page.tsx — detail page with:
  • Currency name, symbol, launch year, and full description
  • Historical price chart using recharts (already a listed available library) — line chart with date on X axis and price on Y axis
  • Date range selector (1M, 3M, 6M, 1Y, ALL) that calls GET /api/v1/currencies/:id/history?from=&to=
  • Type badge (CRYPTO or FIAT) with appropriate colour
• Use TanStack Query for data fetching with caching

Suggested Execution

Branch: git checkout -b feat/currency-hub-frontend

Files to create:

• frontend/app/currencies/page.tsx
• frontend/app/currencies/[id]/page.tsx
• frontend/components/currencies/currency-card.tsx
• frontend/components/currencies/price-chart.tsx
• frontend/components/currencies/date-range-selector.tsx
• frontend/hooks/use-currencies.ts

Implement:

• useCurrencies hook — useQuery for list (with search and type params) and individual currency
• useCurrencyHistory hook — useQuery with from and to date params, refetches on date range change
• CurrencyCard — responsive card with type colour coding (amber for crypto, blue for fiat)
• PriceChart — recharts LineChart with XAxis, YAxis, Tooltip, Line — format dates on X axis
• DateRangeSelector — button group for 1M, 3M, 6M, 1Y, ALL — calculates and passes date range to history hook
• Debounced search input (300ms) to avoid excessive API calls

Test & Validate:

• /currencies loads and shows crypto and fiat currency cards
• Typing in the search box filters results after 300ms debounce
• Clicking a currency card navigates to the detail page
• Detail page shows the price chart with historical data
• Switching date range re-fetches and re-renders the chart
• Type tab toggle correctly filters between crypto and fiat

Acceptance Criteria

• /currencies page renders currency cards for both crypto and fiat
• Crypto / Fiat tab toggle filters the list
• Search input is debounced and calls backend with ?search= param
• /currencies/[id] page renders currency detail with full description
• Historical price chart renders correctly using recharts
• Date range selector (1M, 3M, 6M, 1Y, ALL) works and re-fetches data
• Loading skeletons shown while fetching
• TanStack Query used for all data fetching

Example Commit Message

feat: build currency hub browse page and detail page with historical price chart

Guidelines

• Assignment required before starting
• PR description must include Closes #[issue_id]
• Join our Telegram: https://t.me/ByteChainAcademy
• Complexity: High (200 pts)