We built a "Sovereign" Wealth Tracker with Next.js 15 (No Ads, No Data Selling)

#nextjs #showdev #privacy #webdev

Most fintech apps follow the same playbook: offer a free service, aggregate user data, and sell it to hedge funds or advertisers.

As a developer (and an investor), I hated this. I wanted the automation of Mint/Copilot but the privacy of a local spreadsheet.

So I spent the last 6 months building Pocket Portfolio—a "Sovereign" wealth console where the user (not the platform) owns the data.

Here is the tech stack and architecture behind building a privacy-first financial app in 2026.

The "Sovereign" Architecture 🛡️

The core challenge was: How do we provide advanced analytics (Beta, Risk, Drift) without storing sensitive banking credentials or trade history on our own analysis servers?

We solved this with a "Thick Client" approach using Next.js 15.

The Stack

Framework: Next.js 15 (App Router)
Database: Firestore (with strict RLS policies)
Auth: Firebase Auth (Anonymous + Email)
Banking API: Plaid (US) & Open Banking (UK)
Visualization: Recharts (Client-side rendering)

The "Client-Side Brain" 🧠

Instead of sending your portfolio to a Python backend to calculate your risk score, we push the logic to the browser.

We built a TypeScript math engine (portfolioMath.ts) that runs entirely on the client. It fetches anonymous metadata (Sector, Beta, Industry) for your tickers from our API, but combines it with your holdings locally in your browser memory.

The result? We can tell you that "Your portfolio Beta is 1.4 (High Risk)" without our server ever knowing you own 50 shares of NVDA.

The Feature: "Risk Radar" ⚡

We recently deployed our flagship feature: The Analytics Engine.

It visualizes your Sector Breakdown (e.g., "You are 60% exposed to Tech") and your Portfolio Beta (Volatility relative to the S&P 500).

The dashboard showing the Risk Radar and Sector Allocation.

To prove the concept, we extracted the logic into a free, un-gated tool. You can try the Risk Engine yourself (no login required) here:

👉 Try the Free Risk Calculator

Challenges with Next.js 15 & Recharts

One of the biggest hurdles was making the heavy data visualization performant on mobile.

We used recharts for the visualizations. The trick to making them responsive wasn't just CSS; it was using percentage-based innerRadius and outerRadius props dynamically based on the window width.

// A snippet of our responsive Pie Chart logic
<Pie
  data={sectorData}
  innerRadius="50%" // Scales with container
  outerRadius="70%" 
  paddingAngle={4}
  dataKey="value"
>
  {sectorData.map((entry, index) => (
    <Cell key={`cell-${index}`} fill={COLORS[index]} />
  ))}
</Pie>

Why "Sovereignty" Matters

In 2026, "Privacy" isn't just about hiding your data; it's about owning the insight.

If you're building a side project today, I encourage you to think about "Sovereign Architecture." Can you build it so that if your company disappears tomorrow, the user still has their data? Can you build it so you can't be evil, even if you wanted to?