vesper
Built with React Native + Expo
Kept stated and derived money apart.
Live product · no user testing yet
Live with real prices. No user testing yet.
Open VesperIndependent product · Product design & development
Two kinds of money.
One honest page.
A checking account is worth what the bank says it is worth. Half a Bitcoin is worth whatever the last trade said, and that number is stale by the time it finishes rendering.
I designed and built Vesper to keep those facts apart: a personal wealth view in React Native + Expo that shows what you hold, what you paid, and where every price came from.
- Two kinds of money
- Stated balances and market-valued holdings remain distinct.
- Three price states
- Live, cached or indicative. Every quote carries its source.
- React Native + Expo
- One set of components, arranged for a desktop or a phone.
A balance is a fact.
A price has an age.
Most dashboards flatten both into one list. A failed price request can then make a perfectly valid balance disappear. In Vesper, the difference survives from the data model to the screen.
Stated balance
What somebody told you it is.
Checking, savings, a retirement account or a credit balance holds its stated value until you change it. It contributes nothing to the day’s market movement.
Marked to market
What the latest quote says.
A crypto position is quantity multiplied by a price, with a timestamp and a source. Losing the feed changes its status; it does not erase the position.
A liability is not a holding.
A credit balance subtracts from net worth but stays out of the allocation denominator. Only market-valued positions move the daily figure.
Then it reads the book back.
Analytics names the strongest and weakest positions and flags concentration. The narration uses the same figures as the charts: a small move stays quiet, a loss is never rounded into cheerful copy, and stated balances are not described as a flat market.
Every number says
where it came from.
CoinGecko’s public feed can be rate limited. Vesper keeps the last usable quote, labels it cached, and falls back to indicative values only when it has no confirmed quote to use.
The difficult bug was a label that disagreed with its own explanation. A browser can reject a rate-limit response before the app can read its status. The fix was to label any previously live quote that could no longer be confirmed as cached.
Live
A current quote from the price feed.
Chase CheckingStated balance
$4,500.00BitcoinMarked to market
$34,221.60Net worth $38,721.60
Interactive illustration, not a live account. Change the price source: the stated balance stays fixed, and an unavailable quote never becomes zero.
Under the chart
A substitute chart is labelled “Indicative shape” when market history is unavailable.
Beside the alert
Price alerts only run while the app is open. There is no server watching after the tab closes.
Before the swap
The screen explains that nothing is traded. The action updates the local book and its accounting.
React Native + Expo.
One codebase. Two shapes.
Views, Text, Pressable and ScrollView throughout, exported to the web with Expo. One layout breakpoint turns the desktop’s two-column workspace into a phone view.
The same holdings, charts and sheets reflow. On a phone, navigation moves to the bottom and the main action rises out of the tab bar, within reach of a thumb.
A selection with
a consequence.
The token beside the list is a real 3D object. Selecting a holding changes its glyph, metal and readout together. The raised mark comes from the same SVG path as its flat icon, so the identity stays consistent at every scale.
What you have.
What you made.
The first version could tell you what a position was worth, but not what you had made on it. Adding cost basis turned a balance viewer into a portfolio.
Positions without a known cost stay out of the return calculation. Treating missing cost as zero would manufacture a gain the app cannot justify.
A swap carries the accounting with it.
Exchanging one local holding for another records a disposal and an acquisition. The preview shows the rate, fee, realised gain and amount received before the action. A realised gain then stops moving with the market.
Six tabs.
One grammar.
The overview, analytics, crypto, watchlist, exchange and wallet reuse the same surfaces, type hierarchy and source labels. Everyday actions stay close to the thing they change.
Your book.
Your way out.
A dashboard displaying someone’s net worth owes them a plain explanation of where the numbers live. The wallet puts disclosures, motion preferences, activity, and CSV import and export in the product itself.
- No bank connection
- Accounts begin as editable sample data.
- No keys or orders
- Holdings are records, not a connected crypto wallet.
- No account server
- The book stays in this browser; public prices come from CoinGecko.
A door,
not a toll booth.
Opening directly onto someone else’s dense portfolio left too much unexplained. The entry now introduces the product before the numbers.
A short, skippable welcome explains what Vesper does, invites a name, and offers a sample book or an empty one. The mark’s entrance waits for a deliberate tap instead of dismissing itself on a timer.
Live, and clear about
what comes next.
Vesper is a working independent product. Valuation, price history, swaps, imports and narration are plain functions tested separately from React, because plausible but wrong arithmetic is harder to notice than a crash.
The next step is watching someone read their own numbers: whether the stated-versus-market distinction makes sense, and whether they notice the source label when it matters. No user research, adoption or time savings have been measured yet.
Open VesperExplore Kinset, a training journal for the moment between sets.
Between sets, every tap has to earn its place.
Product design & development
