← 项目档案
M4rketView
为快速浏览、自选观察和行情表格清晰度设计的加密货币筛选工具。
这是什么
问题
很多加密货币面板被颜色、动效和信息层级淹没。M4rketView 更关注比较效率。
方案
界面优先处理表格密度、搜索、自选状态和可读指标，而不是堆叠装饰性图表。
界面一览
Market heatmapThe treemap turns relative market size and 24-hour movement into a fast visual scan while preserving exact values.
技术栈
Product
- React 18
- TypeScript
- Vite 6
- Radix UI
- cmdk
Data
- TanStack Query
- Zustand
- Binance WebSocket
- Recharts
Quality
- Vitest
- 145 tests
- strict TypeScript
亮点功能
- Live Binance prices for 20 assets and market coverage for up to 250 coins
- Dashboard, markets, trending, compare, news, and treemap heatmap views
- Local-only watchlists, portfolios, price alerts, and preferences
- DeFi, chain, sentiment, and RSS data from multiple public providers
- Rate-limit-aware caching and provider failover
工程实现
- 过程 01
Treat API failure as normal operating state
- 背景
- Free crypto providers disagree on schemas, rate limits, coverage, and availability.
- 方法
- Normalize providers behind adapters, add explicit fallbacks, and persist a 24-hour TanStack Query cache.
- 结果
- The dashboard remains useful during partial outages, but freshness must be communicated instead of assuming every number is live.
- 过程 02
Keep personal finance data in the browser
- 背景
- Watchlists and sample portfolios do not justify accounts, a database, or custody of user financial data.
- 方法
- Store portfolios, alerts, watchlists, and preferences locally with no backend identity layer.
- 结果
- The app is private and frictionless, but cross-device sync and server-side alert delivery are deliberately absent.
实现细节
架构笔记
- CoinGecko is the primary broad-market source, with CoinPaprika and Binance fallbacks when requests fail or rate-limit.
- TanStack Query persists a 24-hour browser cache so stale-but-useful data can survive transient provider failures.
- Portfolio and watchlist data never leave localStorage; there is no backend, account system, or private API key.
- Data adapters normalize provider differences before values reach tables and charts.
挑战
- Public market APIs have different schemas, quotas, and outage behavior, so graceful degradation is a product requirement.
- Dense financial screens need visible freshness and error states without adding more visual noise.
结果
A deployed v1.3.2 dashboard that remains free and accountless while handling live streams, public API limits, local portfolio state, and a broad set of comparison views.
规划与心得
复盘
- 01Dense layouts need restraint, not extra animation.
- 02Financial interfaces should reveal state changes without shouting.
下一步
- 01Surface per-widget source freshness
- 02Expand deterministic adapter tests
- 03Add import/export for local portfolios