← Lab
Lab project
TikTok-News
DeployedCrypto · Web3 news2025 — Present
Crypto / Web3 news hub with live market data and Gemini-powered insights.
A Next.js 15 / React 19 news aggregator over the crypto + Web3 beat, fused with live market feeds and AI summarisation. Geospatial visualisations via deck.gl, 200+ personal commits, deployed on Vercel.
Architecture
How it's built
A React 19 SPA on Vite paired with ~20 serverless API routes for the things that must run server-side: Gemini structured-output summarisation, Stripe checkout and webhook reconciliation, OG image generation, and the referral pipeline. Everything else — auth, RLS-isolated user data, reading history, topic preferences — runs through Supabase directly from the client, which keeps the route bundle small and the cold starts cheap.
Data flow
- 01User lands on the SPA — Supabase JWT is hydrated client-side and only the landing chunk is downloaded.
- 02News feed mounts — /api/summary calls Gemini with a JSON schema and caches the structured result in Supabase keyed by article URL.
- 03User opens the globe — deck.gl renders exchange-volume hex columns; Lightweight Charts opens a WebSocket for live OHLC.
- 04User clicks Upgrade — /api/create-checkout-session creates a Stripe session and the browser is redirected to Stripe Checkout.
- 05Stripe fires a webhook to /api/stripe-webhook — the signature is verified and the subscriptions row in Supabase is updated atomically.
- 06Next request — RLS in Supabase reads the Pro flag and unlocks gated topics with no extra round-trip to the API.
Design decisions
- Lazy-load every page route — 48 pages, 45 components, but only the landing chunk ships on first paint.
- Gemini is called with a JSON schema so summaries arrive parsed (title, key_points, sentiment) and never as freeform prose to clean up.
- Stripe is the source of truth for entitlement; the webhook is the only writer to the subscriptions table — the client never decides whether a user is Pro.
- deck.gl renders crypto exchange volume as hex columns on a 3D globe using h3-js cell encoding, so the geospatial view stays tractable at any zoom.
- 412 tests (vitest + Playwright) gate the Stripe + referral flows because there is real money on the wire.
External integrations
Supabase (auth + RLS)Gemini APIStripedeck.gl + h3-jsLightweight ChartsMailerliteMicrosoft Clarity
Gallery