← projects
M4rketView
A free, no-key crypto dashboard with live prices, resilient public-data fallbacks, local portfolios, alerts, and comparison tools.
What it is
Problem
Crypto dashboards tend to drown users in motion, color, and unstable hierarchy. M4rketView focuses on comparison and scan speed.
Solution
M4rketView combines Binance WebSocket prices with public market, DeFi, chain, sentiment, and news sources. Watchlists, alerts, and portfolios stay in the browser, while query caching and source fallbacks keep the dashboard useful under rate limits.
What it looks like
Market heatmapThe treemap turns relative market size and 24-hour movement into a fast visual scan while preserving exact values.
Built with
Product
- React 18
- TypeScript
- Vite 6
- Radix UI
- cmdk
Data
- TanStack Query
- Zustand
- Binance WebSocket
- Recharts
Quality
- Vitest
- 145 tests
- strict TypeScript
Highlights
- 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
Engineering
- Process 01
Treat API failure as normal operating state
- Context
- Free crypto providers disagree on schemas, rate limits, coverage, and availability.
- Approach
- Normalize providers behind adapters, add explicit fallbacks, and persist a 24-hour TanStack Query cache.
- Outcome
- The dashboard remains useful during partial outages, but freshness must be communicated instead of assuming every number is live.
- Process 02
Keep personal finance data in the browser
- Context
- Watchlists and sample portfolios do not justify accounts, a database, or custody of user financial data.
- Approach
- Store portfolios, alerts, watchlists, and preferences locally with no backend identity layer.
- Outcome
- The app is private and frictionless, but cross-device sync and server-side alert delivery are deliberately absent.
Under the hood
Architecture notes
- 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.
Challenges
- 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.
Outcome
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.
Roadmap & lessons
Lessons learned
- 01Dense layouts need restraint, not extra animation.
- 02Financial interfaces should reveal state changes without shouting.
Next steps
- 01Surface per-widget source freshness
- 02Expand deterministic adapter tests
- 03Add import/export for local portfolios