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

Product Design + Development

SlitherGrow

Tools Used

Next.js 15TypeScriptTailwindbetter-authNeonRecharts

01

Overview

SlitherGrow is a crypto portfolio tracker I designed and built to answer the question most dashboards ignore: what could this actually pay for each month? I was the sole founder, designer, and developer.

Instead of showing one big net-worth number, it reframes holdings and yield as a monthly spending allowance with goal milestones. Live prices, performance charts, staking, and a guest mode with seeded data round out the product.

02

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.

03

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.

04

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

05

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

06

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

07

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

08

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

09

What I Learned & What's Next

The two total-value figures, portfolio alone versus portfolio including the allowance, needed clearer separation. If I rebuilt it, I would show one primary figure with the allowance as a derived callout, removing the ambiguity.

The product is a complete solo build and demonstrable today. The next step is putting it in front of a few users to confirm the allowance framing actually changes how they think about their holdings, turning design intent into measured behavior.

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.