https://github.com/aimank2/assessment
https://github.com/aimank2/assessment
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/aimank2/assessment
- Owner: aimank2
- Created: 2026-04-11T10:43:08.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-11T19:12:52.000Z (2 months ago)
- Last Synced: 2026-04-11T20:25:46.669Z (2 months ago)
- Language: TypeScript
- Homepage: https://assessment-melanion-capital.vercel.app
- Size: 157 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BTC Price History Assessment
A small Next.js app that renders a BTC/USDT price card with timeframe switching, real historical Binance data, and live WebSocket updates.
## What it does
- Loads real BTC/USDT historical candles from Binance REST
- Supports 7D, 1M, 3M, 6M, and 1Y chart ranges
- Applies live trade updates from Binance WebSocket
- Updates only the latest visible candle instead of rebuilding the whole series
- Renders the chart with Recharts and UI components styled with shadcn/ui
## Data flow
The BTC data hook lives in [hooks/use-btc-price.ts](./hooks/use-btc-price.ts).
- Historical data is fetched from Binance `api/v3/klines`
- Each timeframe maps to a concrete interval and lookback window
- Klines are transformed into sorted candle data
- The chart consumes close prices as `{ time, price }`
- Live trades from the Binance trade stream are bucketed by timeframe
- If a trade belongs to the current bucket, the last candle is updated
- If a trade starts a new bucket, a new candle is appended
- Older out-of-order trades are ignored
This keeps the historical series intact and avoids the old bug where fake seed data or live points distorted the full chart.
## Project structure
```text
app/
page.tsx Entry page
components/
price-chart.tsx Recharts area chart
trade-idea-card.tsx Main BTC price card UI
hooks/
use-btc-price.ts Historical fetch + live BTC updates
lib/
utils.ts Shared utilities
```
## Scripts
```bash
npm run dev
npm run lint
npm run typecheck
npm run build
npm run start
```
## Run locally
1. Install dependencies:
```bash
npm install
```
2. Start the development server:
```bash
npm run dev
```
3. Open the app in your browser:
```text
http://localhost:3000
```
If port `3000` is already in use, Next.js will choose another available port.
## Notes
- The app currently fetches Binance data directly from the client
- Historical chart ranges are real market data, not generated curves
- The chart X-axis uses time-based numeric scaling so spacing matches actual timestamps