SlitherGrow screenshot 1
SlitherGrow screenshot 2
SlitherGrow screenshot 3
SlitherGrow screenshot 4
SlitherGrow screenshot 5

2026 ยท Product Design + Development

SlitherGrow

Next.js 15TypeScriptTailwindbetter-authNeonRecharts
2026Product Design + DevelopmentFounder
Open SlitherGrow (live demo)
SlitherGrow hero

01

The Problem

Most trackers show a single net-worth figure and a green-or-red delta. That number is hard to act on. You know your balance, but not what it could comfortably fund, and the dashboard gives you no next step beyond watching it move.

The gap I wanted to close: turn portfolio performance into something tangible a monthly spending allowance, backed by yield, with clear milestones toward a goal.

02

The Insight & My Approach

I treated this as a product problem, not just a dashboard. The key decision was to lead with the monthly allowance as the hero metric, and demote net worth to context. That single reframing changes every downstream layout choice.

Because I was solo and timeboxed, I scoped the first version to one clear loop: pull live prices, visualize performance against a goal, project a monthly allowance, and let users set a target. I deliberately cut secondary ideas (social, alerts, tax views) so the core read instantly.

03

Design Decisions & Tradeoffs

Web dashboard over mobile first. The product is data-dense (prices, P/L, yield, goals), so a wide canvas communicates more at a glance than a phone. I accepted that mobile is a follow-up, not a v1.

Real auth and a real database (better-auth + Neon) instead of a mock. It costs more to build, but it lets the product actually persist a user's portfolio and proves the full stack, not just the UI.

Guest mode with seeded demo data. The biggest risk for a portfolio piece is a blank first screen, so I seed realistic holdings and let anyone explore the product before signing up. Lowers the barrier to understanding the value immediately.

Design Decisions & Tradeoffs

04

Performance & Goal Context

The performance chart uses Recharts with a dashed goal line, so progress toward the target is visible without reading numbers. Range tabs (1D to Max) recompute client-side for a snappy feel.

This is where the insight shows: the goal line is the product, the portfolio line is just context around it.

Performance & Goal Context

05

Making the Allowance Real

The allowance engine combines yield and appreciation into a projected monthly payout, then tracks distance to a user-set goal date. An editor lets users set the target and see the gap to the next milestone.

I kept the math auditable: the data model separates crypto assets, staking seeds, and settings, so every number traces back to a source.

Making the Allowance Real

06

Staking & Yield

Staking positions sit alongside holdings, with yield feeding the allowance projection. Showing staking and spot together matters because the allowance is funded by both, not just price moves.

Staking & Yield

07

Sign In & Guest Mode

Auth runs on better-auth with a Neon-backed schema. New visitors continue as a guest to explore the seeded demo, then sign in to persist their own portfolio. The split keeps the first run frictionless while still demonstrating a real authenticated product.

Sign In & Guest Mode

08

What I Learned & Would Improve

The two total-value numbers (portfolio vs. portfolio including the allowance) confused even me at first. If I rebuilt it, I would unify them into one clear figure with the allowance shown as a derived callout, removing the ambiguity.

I also have not yet done real user testing, so the current 'impact' is design intent, not measured behavior. The next step is to put it in front of a few users and validate whether the allowance framing actually changes how they think about their holdings.

That honesty about what is proven versus assumed is the part I am proudest of: the project shows a complete solo build and, just as importantly, a clear vector of how I would take it further.

Impact

Reframed the core metric from net worth to a livable monthly allowance, making portfolio performance personally actionable.

Shipped a full product solo: live-price ingestion, a Recharts performance view with goal lines, staking yield tracking, and a guest mode with seeded demo data.

Made deliberate, documented tradeoffs (web over mobile, real auth over mock, resilient demo data) and can speak to each one.

Key Features

Monthly allowance

Reframes net worth as a livable monthly amount funded by yield and appreciation.

Live prices

Real-time quotes ingested per request, with static fallbacks so the demo never breaks.

Performance chart

Recharts line view with a goal line and 1D to Max ranges.

Goal milestones

Set a target date and track distance to the next milestone.

Staking tracker

Staking positions feed the allowance projection alongside holdings.

Guest mode

Seeded demo data so the product is explorable before sign-up.