Stocks Vs Subscriptions

Live Project | GitHub Repository

Stocks Vs Subscriptions (SVS) is a high-performance financial simulation tool designed to answer a single, powerful question: “What if I had invested that money instead?”

It contrasts the recurring cost of modern consumer habits (Netflix, Spotify, or that new iPhone) against the historical performance of the companies selling them. The result is often shocking—visualising thousands in lost opportunity cost over a decade.

🚀 Project Overview

The web is full of compound interest calculators, but few are visceral. SVS was built to be cinematic—turning dry financial data into a compelling narrative “Wizard” flow.

Goal: To gamify financial literacy by showing the direct correlation between consumer spending and wealth erosion.
Audience: Young professionals and tech enthusiasts who are subscription-rich but asset-poor.
Impact: The application processes real-time market data to show that your £15/month Netflix subscription since 2011 could have been worth over £20,000 today if invested in NFLX stock.

🛠️ Technical Architecture

I adopted a “Performance First” architecture, ensuring the application feels instant despite performing heavy financial number-crunching.

Backend: Hono & Node.js

I chose Hono for the backend framework. Originally designed for edge runtimes, its lightweight nature makes it incredibly fast on a standard Node.js container.

Data Accuracy: The engine handles complex edge cases like stock splits, dividends, and market holidays. It employs a “fill-forward” algorithm to ensure that a portfolio value exists for every single day, even when markets are closed.
Security: Implements SHA256 hashing for data integrity and structured logging via Pino for observability.

Caching Strategy: Redis

To minimise reliance on the Yahoo Finance API (and avoid rate limits), I implemented a robust caching layer.

Redis Primary: Queries for stock history (e.g., AAPL from 2015-2025) are cached for 12 hours.
In-Memory Fallback: The system automatically degrades to an in-memory LRU cache if the Redis connection fails, ensuring high availability during development or outages.

Frontend: React & Framer Motion

The UI is built with React and TailwindCSS, heavily utilising Framer Motion for shared element transitions.

Optimistic UI: The interface predicts data readiness, allowing users to “build” their subscription stack without waiting for network waterfalls.
Responsive Visualisations: I used Recharts with the LTTB (Largest-Triangle-Three-Buckets) downsampling algorithm to render 10+ years of daily stock data smoothly on mobile devices without crashing the browser.

🧩 Features

1. Smart Product Detection

Type “iPhone” and the system detects AAPL and the £999 price point. Type “Netflix” and it suggests NFLX at £10.99/mo. This fuzzy matching reduces user friction significantly.

2. The “Time Travel” Engine

The backend doesn’t just calculate an average return. It simulates purchasing the stock on the exact days you paid your subscription bill, historically adjusting for the specific stock price at that moment in time.

3. Cinematic “Reveal”

The final results aren’t just dumped on the screen. They are revealed in a staged sequence—first your spending, then the potential value, and finally the percentage difference—maximising emotional impact.

☁️ Infrastructure

Containerisation: Multi-stage Docker builds for minimal spreadsheet footprint.
Orchestration: Deployed via Coolify on a Hetzner VPS.
Reverse Proxy: Nginx handles SSL termination and static asset caching.

🧠 Lessons Learned

Financial Data is Messy: Dealing with stock splits (e.g., Apple’s 4-for-1 split in 2020) required rewriting the entire core simulation logic to normalise historical prices.
Perceived vs Actual Performance: Moving heavy calculations to the backend was necessary, but adding a “Crunching Numbers” micro-interaction actually made the user trust the data more than an instant return.
The Monorepo Advantage: Managing shared types between the Hono backend and React frontend ensured end-to-end type safety, preventing an entire class of “undefined” bugs in production.