sorostream-app

Next.js 14 streaming dashboard for SoroStream — real-time USDC payment streaming on Stellar Soroban.

Live Demo

https://sorostream-app.vercel.app

Screenshots

Visit the live demo to see the app in action.

Local Setup

# 1. Clone and install
npm install

# 2. Configure environment
cp .env.example .env.local
# Edit .env.local — see .env.example for inline docs on each variable

# 3. Run dev server
npm run dev
# Open http://localhost:3000

Deploying

Platform	Guide
Vercel	Push to main — zero config required
Docker / bare-metal / nginx	docs/DEPLOYMENT.md
Railway, Render, Fly.io	docs/DEPLOYMENT.md#5-other-platforms

Env Vars

Each variable is documented with its purpose, valid values, and whether a rebuild is required directly in .env.example.

Variable	Required	Description
NEXT_PUBLIC_STELLAR_NETWORK	Yes	testnet or mainnet
NEXT_PUBLIC_CONTRACT_ID	Yes	Deployed StreamContract address
NEXT_PUBLIC_RPC_URL	No	Custom Soroban RPC (defaults to testnet)
NEXT_PUBLIC_VITALS_ENDPOINT	No	URL to receive Web Vitals POST payloads

Web Vitals

The app collects Core Web Vitals (LCP, FID, CLS, TTFB, FCP, INP) via the web-vitals package and reports them using navigator.sendBeacon.

Wiring up a reporting endpoint

1. Set NEXT_PUBLIC_VITALS_ENDPOINT in .env.local:

   NEXT_PUBLIC_VITALS_ENDPOINT=https://your-api.example.com/api/vitals
   

2. Your endpoint receives POST requests with Content-Type: application/json:

   {
     "name": "LCP",
     "value": 1234.5,
     "rating": "good",
     "delta": 1234.5,
     "id": "v3-1234567890-1234567890",
     "navigationType": "navigate"
   }

3. In development (no endpoint needed), all vitals are console-logged:

   [Web Vitals] LCP: 1234 ms (good)
   [Web Vitals] CLS: 0.0012 (good)
   

Alert thresholds

Set alerts on your analytics backend when rating === "poor" or when the p75 value exceeds the "Needs Improvement" boundary:

Metric	Good	Needs Improvement	Poor
LCP	≤ 2500 ms	≤ 4000 ms	> 4000 ms
FID	≤ 100 ms	≤ 300 ms	> 300 ms
CLS	≤ 0.1	≤ 0.25	> 0.25
TTFB	≤ 800 ms	≤ 1800 ms	> 1800 ms
FCP	≤ 1800 ms	≤ 3000 ms	> 3000 ms
INP	≤ 200 ms	≤ 500 ms	> 500 ms

The implementation lives in src/lib/vitals.ts and is mounted via src/components/WebVitalsReporter.tsx in the root layout.

Tech Stack

Layer	Technology
Framework	Next.js 14 App Router
Language	TypeScript 5
Styling	Tailwind CSS 3
Web3	@sorostream/sdk, @stellar/freighter-api

Pages

Route	Description
/	Landing page with hero and how-it-works
/dashboard	Stream list with live balances
/stream/new	Create stream form
/stream/[id]	Stream detail with withdraw/cancel

Contributing via Drips Wave

This project participates in the Stellar Wave Program on Drips Wave. Earn rewards for resolving issues during weekly Wave sprints.

See CONTRIBUTING.md for the full workflow.

Note: Do not start coding until assigned to an issue by a maintainer.