Crypto App. The whole market, read at a glance.
A full crypto app: live markets, a portfolio that tracks cost and return, swaps, and staking. Heavy on data, designed to read clean.
A market, made to read
The app does the obvious things. It tracks a portfolio, prices the market live, swaps one asset for another, and puts idle coins to work. What sits behind that is a lot of data: prices, holdings, cost basis, returns, allocations, fees, yields, all moving at once. The design work was keeping every screen legible while it carried that weight. What follows walks the app, screen by screen.
One screen for the whole position
The dashboard answers the first question a holder has: where do I stand. Total balance and its move over a day sit at the top, big enough to read across the room. Under it, the same money is cut four ways, then laid out as allocation, recent activity, and the day's movers. The whole position on one screen, no drilling.
The hard screen: a market that scans
The markets table has the most to carry. A global stats bar, then trending and gainers and losers, then category filters, then a sortable table with price, four timeframes, market cap, volume, and a live sparkline on every row. It stays readable because of the type. Numbers are set in monospace figures, so columns align to the digit and the eye runs straight down a price without snagging. Color is rationed: green and red sit on the moves, nowhere else.
Holdings with the numbers that matter
Portfolio goes past balance into cost. Each holding shows amount, average cost, current price, value, and return, so a position reads as profit or loss at a glance. The allocation ring uses the same color key as the dashboard, so a slice means the same thing wherever it shows up. Each coin keeps its own page, one tap away, with its full price history.
A trade you can read before you take it
The swap puts the decision in front of the trade. Pick a pair, type an amount, and the rate, price impact, network fee, and minimum received all show before the button. A chart of the asset you are buying sits to the side, with the live exchange rate both ways. None of the cost waits until after you commit.
Staking, with the fine print up front
Earn turns a wall of yield products into something you can compare. Each card leads with its APY, then states lock period, minimum, total value locked, and a plain risk level. The numbers that decide a stake are the ones shown first. Open positions and lifetime rewards sit above the list, so what you hold and what you could hold read together.
The ledger, made plain
Activity is a running history of every move: buys, sells, swaps, sends, receives, rewards, stakes. Each row says what happened, when, and the amount in both the coin and dollars. A breakdown by type sits alongside and counts each kind, so even a long history keeps a shape.
One theme system, light or dark
Every screen carries a full light mode, built from the same tokens as the dark one. Surfaces, borders, chart fills, and the green and red of a move all remap together. The layout holds; only the palette changes.
Desktop down to a phone
The same screens fold onto a phone, with the sidebar swapped for a bottom bar. Tables stack into rows, the swap keeps its full cost breakdown, the charts redraw at the new width. It reads as a native app, but it is the one build, resized.
What runs behind it
It all runs in the browser, with no backend. The coins, prices, holdings, transactions, and yields come from one fixed seed, so the data stays rich and identical on every load, and the pages rendered on the server match the charts drawn in the browser. Those charts, the area lines, sparklines, allocation rings, and candles, are drawn by hand in SVG, with no charting library. The coin logos are real. The whole product is one design system used straight, which is why eight screens, two themes, and a phone layout stay consistent.
Built with
- Next.js16
- React19
- TypeScript
A heavy market, made readable.
Live prices, full positions, swaps, and yield. The work was in making all of it easy to read.