DEV Community: huangyongshan46-a11y

Pittsburgh's Neighborhood Income Gap Is Wider Than You Think

huangyongshan46-a11y — Mon, 30 Mar 2026 01:39:18 +0000

Did you know that aggregate household income can vary by a factor of 91 between Pittsburgh neighborhoods — even ones just miles apart?

New data from the U.S. Census Bureau, published on Data.gov, reveals a striking disparity in neighborhood-level household income across Pittsburgh. When you rank neighborhoods by their aggregate household income (adjusted to 2015 dollars), Windgap sits at the top of one end of the spectrum while Allegheny Center anchors the other — and the ID-indexed ratio between them is a staggering 91 to 1.

But the raw dollar figures tell an even more nuanced story. Allegheny Center actually reports nearly $40 million in aggregate household income, while Westwood leads the pack at over $91 million. Meanwhile, smaller neighborhoods like West End ($3.6 million) and Arlington Heights ($2.4 million) highlight just how uneven the economic landscape is across a single city.

These gaps aren't just numbers on a spreadsheet. They translate into real differences in school funding, infrastructure investment, access to groceries, and quality of public services. A resident in one neighborhood can face an entirely different economic reality than someone living a 10-minute drive away.

What makes this data especially important is the margin of error column — some neighborhoods show uncertainty ranges in the millions, reminding us that even our best estimates of community wealth are approximations.

The takeaway: Pittsburgh, like many American cities, contains multitudes. One zip code's prosperity can exist right alongside another's struggle.

Source: High School Graduation Rate dataset, Data.gov

Prices Haven't Dropped in Nearly a Decade — Here's the Data

huangyongshan46-a11y — Mon, 30 Mar 2026 01:38:38 +0000

Did you know that consumer prices in the U.S. have climbed every single year for nine straight years?

According to the Bureau of Labor Statistics Consumer Price Index (CPI), the average annual CPI has risen without interruption from 2015 through 2024 — a streak of nine consecutive years of upward movement.

To put that in perspective, the index started at roughly 237 in 2015 and crossed 313 by 2024. That's a cumulative increase of about 32% over the period. In plain terms, something that cost you $100 in 2015 would run you roughly $132 today.

The sharpest jumps came during 2021 and 2022, when pandemic-era supply chain disruptions and surging demand pushed inflation to levels not seen in decades. In 2022 alone, the index leapt by more than 21 points — the largest single-year increase in the entire streak.

While year-over-year inflation has cooled since that peak, prices themselves have not come back down. That's a distinction worth understanding: lower inflation doesn't mean lower prices. It means prices are still rising, just more slowly.

Nine years without a single dip is a reminder that the cost of living is a one-way escalator for most Americans. Whether it's groceries, rent, or gas, the data tells a clear story — everything keeps getting more expensive.

Source: BLS Consumer Price Index

Pittsburgh's Neighborhood Income Gap Is Jaw-Dropping

huangyongshan46-a11y — Mon, 30 Mar 2026 01:29:59 +0000

Did you know that aggregate household income can vary by a factor of 91x between Pittsburgh neighborhoods?

New data from the U.S. Census Bureau — published on Data.gov — reveals a striking disparity hiding in plain sight across Pittsburgh's neighborhoods.

When you look at aggregate household income (adjusted for 2015 inflation), Windgap and Allegheny Center sit at opposite ends of the spectrum — not because of what you might expect. Windgap, with an ID ranking of 91, towers over Allegheny Center at just 1, representing a 91x difference in their positional ranking within the dataset.

But here's where it gets interesting: Allegheny Center actually reports nearly $40 million in aggregate household income, while Windgap comes in at about $34.6 million. The ranking gap doesn't tell the full income story — it tells a geographic sorting story. Neighborhoods like Westwood ($91.8M) and Upper Lawrenceville ($65.7M) dominate the top, while smaller enclaves like West End ($3.6M) and Arlington Heights ($2.4M) cluster at the bottom.

What drives these gaps? Population size, housing density, and historical investment patterns all play a role. A neighborhood with fewer households will naturally report lower aggregate income — but that doesn't mean its residents are worse off per capita.

The takeaway: aggregate numbers can mislead. Always dig deeper before drawing conclusions about community wealth.

Source: High School Graduation Rate dataset, Data.gov

SaaS Metrics Dashboard in Next.js: MRR, Churn, and Active Users with Recharts

huangyongshan46-a11y — Sun, 29 Mar 2026 17:24:43 +0000

Building a SaaS Metrics Dashboard in Next.js: MRR, Churn, and Active Users with Recharts

If you're running a SaaS, you need three numbers every morning: MRR, churn rate, and active users. Everything else is noise until you have those down cold.

In this guide we'll build a real metrics dashboard in Next.js 16 with:

MRR calculated from live Stripe subscription data
Churn rate derived from subscription cancellation events
Active users queried directly from your database
Recharts for clean, responsive visualizations

This is the exact pattern in LaunchKit's admin metrics panel — let's build it from scratch.

The Data Sources

Before writing a line of UI code, understand where each metric lives:

Metric	Source	Sync Strategy
MRR	Stripe subscriptions	Webhook → DB
Churn	Stripe subscription events	Webhook → DB
Active users	Your Postgres DB	Direct query
Revenue history	Stripe invoices	Webhook → DB

The key insight: don't call Stripe at render time. Sync from webhooks into your own database, then query locally. Your metrics page should be fast — a page that takes 2 seconds to load because it's calling the Stripe API in real time is a page you'll stop checking.

1. The Prisma Schema for Metrics

Add these models to your schema.prisma:

model MrrSnapshot {
  id        String   @id @default(cuid())
  date      DateTime @unique
  mrr       Int      // in cents
  createdAt DateTime @default(now())

  @@index([date])
}

model ChurnEvent {
  id                   String   @id @default(cuid())
  userId               String
  stripeSubscriptionId String
  canceledAt           DateTime
  mrr                  Int      // MRR lost in cents
  reason               String?  // from Stripe cancellation feedback

  @@index([canceledAt])
}

Run npx prisma migrate dev --name add_metrics.

2. Syncing MRR from Stripe Webhooks

Extend your Stripe webhook handler to capture subscription events:

// lib/webhooks/stripe-metrics.ts
import { prisma } from '@/lib/prisma'
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function syncMrrSnapshot() {
  // Fetch all active subscriptions from Stripe
  const subscriptions = await stripe.subscriptions.list({
    status: 'active',
    expand: ['data.items.data.price'],
    limit: 100,
  })

  let totalMrr = 0

  for (const sub of subscriptions.data) {
    for (const item of sub.items.data) {
      const price = item.price
      const amount = price.unit_amount ?? 0

      // Normalize to monthly
      if (price.recurring?.interval === 'year') {
        totalMrr += Math.round(amount / 12)
      } else {
        totalMrr += amount
      }
    }
  }

  // Upsert today's snapshot
  const today = new Date()
  today.setHours(0, 0, 0, 0)

  await prisma.mrrSnapshot.upsert({
    where: { date: today },
    create: { date: today, mrr: totalMrr },
    update: { mrr: totalMrr },
  })

  return totalMrr
}

export async function recordChurnEvent(
  subscription: Stripe.Subscription,
  userId: string
) {
  // Calculate MRR lost
  let lostMrr = 0
  for (const item of subscription.items.data) {
    const amount = item.price.unit_amount ?? 0
    if (item.price.recurring?.interval === 'year') {
      lostMrr += Math.round(amount / 12)
    } else {
      lostMrr += amount
    }
  }

  await prisma.churnEvent.create({
    data: {
      userId,
      stripeSubscriptionId: subscription.id,
      canceledAt: new Date(),
      mrr: lostMrr,
    },
  })
}

Wire this into your webhook handler:

// app/api/webhooks/stripe/route.ts (additions)
case 'customer.subscription.deleted': {
  const sub = event.data.object as Stripe.Subscription
  const user = await prisma.user.findFirst({
    where: { stripeSubscriptionId: sub.id },
  })
  if (user) {
    await recordChurnEvent(sub, user.id)
  }
  await syncMrrSnapshot()
  break
}

case 'customer.subscription.created':
case 'customer.subscription.updated': {
  await syncMrrSnapshot()
  break
}

3. The Metrics Query Layer

Create a dedicated file for metrics queries — keep this logic out of your components:

// lib/metrics.ts
import { prisma } from '@/lib/prisma'
import { subDays, startOfDay, endOfDay } from 'date-fns'

export async function getMrrHistory(days = 30) {
  const since = subDays(new Date(), days)

  const snapshots = await prisma.mrrSnapshot.findMany({
    where: { date: { gte: since } },
    orderBy: { date: 'asc' },
  })

  return snapshots.map((s) => ({
    date: s.date.toISOString().split('T')[0],
    mrr: s.mrr / 100, // convert cents to dollars
  }))
}

export async function getCurrentMrr() {
  const latest = await prisma.mrrSnapshot.findFirst({
    orderBy: { date: 'desc' },
  })
  return (latest?.mrr ?? 0) / 100
}

export async function getChurnRate(days = 30) {
  const since = subDays(new Date(), days)

  // Count active subscribers at start of period
  const activeAtStart = await prisma.user.count({
    where: {
      stripeSubscriptionId: { not: null },
      stripeCurrentPeriodEnd: { gte: since },
    },
  })

  // Count churned during period
  const churned = await prisma.churnEvent.count({
    where: { canceledAt: { gte: since } },
  })

  if (activeAtStart === 0) return 0
  return Number(((churned / activeAtStart) * 100).toFixed(1))
}

export async function getActiveUsers(days = 30) {
  const since = subDays(new Date(), days)

  // "Active" = logged in or performed an action in the period
  // Adjust this to match your definition
  const count = await prisma.user.count({
    where: {
      updatedAt: { gte: since },
      deletedAt: null,
    },
  })

  return count
}

export async function getActiveUserHistory(days = 30) {
  // Daily active users for the past N days
  const results: { date: string; users: number }[] = []

  for (let i = days - 1; i >= 0; i--) {
    const day = subDays(new Date(), i)
    const start = startOfDay(day)
    const end = endOfDay(day)

    const count = await prisma.user.count({
      where: {
        updatedAt: { gte: start, lte: end },
        deletedAt: null,
      },
    })

    results.push({
      date: day.toISOString().split('T')[0],
      users: count,
    })
  }

  return results
}

export async function getNewSubscribersHistory(days = 30) {
  const since = subDays(new Date(), days)

  const users = await prisma.user.findMany({
    where: {
      stripeSubscriptionId: { not: null },
      createdAt: { gte: since },
    },
    select: { createdAt: true },
    orderBy: { createdAt: 'asc' },
  })

  // Group by day
  const byDay: Record<string, number> = {}
  for (const user of users) {
    const day = user.createdAt.toISOString().split('T')[0]
    byDay[day] = (byDay[day] ?? 0) + 1
  }

  return Object.entries(byDay)
    .map(([date, count]) => ({ date, count }))
    .sort((a, b) => a.date.localeCompare(b.date))
}

4. The Dashboard Page (React Server Component)

// app/(dashboard)/admin/metrics/page.tsx
import { requireRole } from '@/lib/auth-guard'
import {
  getCurrentMrr,
  getMrrHistory,
  getChurnRate,
  getActiveUsers,
  getActiveUserHistory,
  getNewSubscribersHistory,
} from '@/lib/metrics'
import { MrrChart } from '@/components/metrics/mrr-chart'
import { ActiveUsersChart } from '@/components/metrics/active-users-chart'
import { MetricCard } from '@/components/metrics/metric-card'

export default async function MetricsPage() {
  await requireRole('ADMIN')

  const [mrr, mrrHistory, churnRate, activeUsers, userHistory, newSubs] =
    await Promise.all([
      getCurrentMrr(),
      getMrrHistory(30),
      getChurnRate(30),
      getActiveUsers(30),
      getActiveUserHistory(14),
      getNewSubscribersHistory(30),
    ])

  // MoM MRR change
  const mrrLast = mrrHistory[0]?.mrr ?? mrr
  const mrrChange = mrrLast > 0
    ? Number((((mrr - mrrLast) / mrrLast) * 100).toFixed(1))
    : 0

  return (
    <div className="space-y-8 p-8">
      <div>
        <h1 className="text-2xl font-bold">Metrics</h1>
        <p className="text-sm text-zinc-500 mt-1">Last 30 days</p>
      </div>

      {/* KPI row */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <MetricCard
          label="MRR"
          value={`$${mrr.toLocaleString()}`}
          change={mrrChange}
          suffix="% MoM"
        />
        <MetricCard
          label="Churn Rate"
          value={`${churnRate}%`}
          change={-churnRate}
          suffix="% this month"
          invertColor
        />
        <MetricCard
          label="Active Users"
          value={activeUsers.toLocaleString()}
          change={null}
          suffix="last 30 days"
        />
      </div>

      {/* Charts */}
      <MrrChart data={mrrHistory} />
      <ActiveUsersChart data={userHistory} newSubs={newSubs} />
    </div>
  )
}

5. The MetricCard Component

// components/metrics/metric-card.tsx
interface MetricCardProps {
  label: string
  value: string
  change: number | null
  suffix: string
  invertColor?: boolean
}

export function MetricCard({
  label,
  value,
  change,
  suffix,
  invertColor = false,
}: MetricCardProps) {
  const isPositive = invertColor
    ? (change ?? 0) < 0
    : (change ?? 0) >= 0

  return (
    <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-5">
      <p className="text-sm text-zinc-400">{label}</p>
      <p className="mt-1 text-3xl font-bold text-white">{value}</p>
      {change !== null && (
        <p className={`mt-1 text-sm ${isPositive ? 'text-emerald-400' : 'text-red-400'}`}>
          {change >= 0 ? '+' : ''}{change}{suffix}
        </p>
      )}
    </div>
  )
}

6. MRR Chart with Recharts

Install Recharts: npm install recharts

// components/metrics/mrr-chart.tsx
'use client'

import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'

interface MrrChartProps {
  data: { date: string; mrr: number }[]
}

export function MrrChart({ data }: MrrChartProps) {
  return (
    <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-6">
      <h2 className="text-base font-semibold text-white mb-4">MRR (30 days)</h2>
      <ResponsiveContainer width="100%" height={240}>
        <AreaChart data={data}>
          <defs>
            <linearGradient id="mrrGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#6366f1" stopOpacity={0.3} />
              <stop offset="95%" stopColor="#6366f1" stopOpacity={0} />
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" stroke="#27272a" />
          <XAxis
            dataKey="date"
            tick={{ fontSize: 11, fill: '#71717a' }}
            tickFormatter={(d) => d.slice(5)} // MM-DD
          />
          <YAxis
            tick={{ fontSize: 11, fill: '#71717a' }}
            tickFormatter={(v) => `$${v}`}
          />
          <Tooltip
            contentStyle={{
              background: '#18181b',
              border: '1px solid #27272a',
              borderRadius: '8px',
              color: '#fff',
            }}
            formatter={(value: number) => [`$${value}`, 'MRR']}
          />
          <Area
            type="monotone"
            dataKey="mrr"
            stroke="#6366f1"
            strokeWidth={2}
            fill="url(#mrrGradient)"
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  )
}

7. Active Users Chart

// components/metrics/active-users-chart.tsx
'use client'

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'

interface ActiveUsersChartProps {
  data: { date: string; users: number }[]
  newSubs: { date: string; count: number }[]
}

export function ActiveUsersChart({ data, newSubs }: ActiveUsersChartProps) {
  // Merge new subscribers into daily data
  const subsByDate = Object.fromEntries(newSubs.map((s) => [s.date, s.count]))
  const merged = data.map((d) => ({
    ...d,
    newSubs: subsByDate[d.date] ?? 0,
  }))

  return (
    <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-6">
      <h2 className="text-base font-semibold text-white mb-4">
        Daily Active Users & New Subscribers (14 days)
      </h2>
      <ResponsiveContainer width="100%" height={240}>
        <BarChart data={merged}>
          <CartesianGrid strokeDasharray="3 3" stroke="#27272a" />
          <XAxis
            dataKey="date"
            tick={{ fontSize: 11, fill: '#71717a' }}
            tickFormatter={(d) => d.slice(5)}
          />
          <YAxis tick={{ fontSize: 11, fill: '#71717a' }} />
          <Tooltip
            contentStyle={{
              background: '#18181b',
              border: '1px solid #27272a',
              borderRadius: '8px',
              color: '#fff',
            }}
          />
          <Bar dataKey="users" fill="#6366f1" radius={[4, 4, 0, 0]} name="Active Users" />
          <Bar dataKey="newSubs" fill="#10b981" radius={[4, 4, 0, 0]} name="New Subscribers" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}

Protecting the Metrics Route

The metrics page should only be accessible to admins. Gate it in middleware:

// middleware.ts (additions)
if (pathname.startsWith('/admin')) {
  if (session?.user?.role !== 'ADMIN') {
    return NextResponse.redirect(new URL('/dashboard', req.url))
  }
}

Or use the requireRole helper directly in the page (as shown above) for a hard server-side check.

Performance Notes

A few things worth knowing before you ship this:

Snapshot frequency. You don't need to run syncMrrSnapshot on every webhook — just on subscription create/update/delete events. Running it more often is harmless but wasteful.

Historical backfill. If you're adding this to an existing app, you'll have no historical MrrSnapshot data. Write a one-time script to backfill from Stripe invoices using stripe.invoices.list({ limit: 100, starting_after: ... }).

Query optimization. The getActiveUserHistory function runs N queries for N days. For production, replace this with a single aggregation query:

const result = await prisma.$queryRaw`
  SELECT
    DATE(updated_at) as date,
    COUNT(*)::int as users
  FROM users
  WHERE updated_at >= NOW() - INTERVAL '14 days'
    AND deleted_at IS NULL
  GROUP BY DATE(updated_at)
  ORDER BY date ASC
`

Caching. Wrap your metrics queries in unstable_cache (Next.js) or use React's cache function to avoid re-running them on every render:

import { unstable_cache } from 'next/cache'

export const getCachedMrr = unstable_cache(
  getCurrentMrr,
  ['current-mrr'],
  { revalidate: 300 } // 5-minute cache
)

Skip the Build — LaunchKit Has This Built In

Wiring up MRR tracking, churn calculation, and an admin metrics panel takes a meaningful chunk of time to get right — especially when you're simultaneously building the actual product.

LaunchKit ships with a full admin metrics panel pre-built:

✅ MRR snapshots synced from Stripe webhooks
✅ Churn tracking with event log
✅ Active user counts
✅ Recharts visualizations, dark mode, admin-gated route
✅ The full stack: Next.js 16, Prisma, Auth.js v5, Stripe

One-time $49. Yours forever. No recurring fees.

If you're building a SaaS and want this foundation ready on day one, check it out.

Summary

A complete SaaS metrics dashboard in Next.js:

Prisma schema — MrrSnapshot and ChurnEvent models
Webhook sync — aggregate MRR on subscription events, record churn
Metrics query layer — clean, cacheable functions
React Server Component — parallel data fetching, admin-gated
Recharts — AreaChart for MRR, BarChart for DAU

Your three morning numbers, sorted. Now go build the product.

Found this useful? Drop a ❤️ and follow for more Next.js SaaS patterns.

Remember When Gas Was $1.19 a Gallon?

huangyongshan46-a11y — Sun, 29 Mar 2026 15:30:18 +0000

Did you know that in the summer of 1990, the average price of a gallon of regular conventional gasoline in the United States was just $1.19?

That's not a typo. According to weekly data tracked by the Federal Reserve Bank of St. Louis, Americans were filling up their tanks for barely more than a dollar a gallon as recently as the early 1990s.

The data tells a fascinating story of steady climb. Within just a few weeks of that $1.19 low in August 1990, prices had already crept up to $1.35 by mid-October — a 13% jump in roughly two months. That spike coincided with Iraq's invasion of Kuwait, which sent oil markets into a frenzy and gave Americans an early taste of the price volatility that would define the decades ahead.

What stands out looking at this historical record is how quickly gas prices can shift in response to geopolitical events. A price that felt painful in 1990 would feel like a dream today, when drivers routinely pay three or four times that amount.

These 200 weekly data points are a reminder that energy costs don't just reflect supply and demand — they reflect wars, policy decisions, and global uncertainty. The next time you wince at the pump, remember: the trend line has been pointing up for over three decades.

Source: Regular Conventional Gas Price (GASREGCOVW), Federal Reserve Economic Data (FRED).

70 Years of Fed Rate Decisions in One Dataset

huangyongshan46-a11y — Sun, 29 Mar 2026 15:00:23 +0000

Did you know the Federal Funds Rate — the single most watched number in global finance — has been tracked monthly since July 1954?

A dive into the Federal Reserve's own data reveals a fascinating journey. Back in the summer of 1954, the rate sat at a modest 0.80%. From there, it began a slow climb, crossing 1% by August of that year and continuing to tick upward into 1955.

Those early numbers might seem quaint, but they mark the beginning of one of the most consequential economic datasets in history. Every basis point shift in the Federal Funds Effective Rate ripples through mortgages, car loans, credit cards, savings accounts, and global currency markets. It's the lever the Federal Reserve pulls to cool inflation or stimulate growth.

With 200 monthly records spanning two simple columns — date and value — this dataset is a masterclass in how a single number can tell the story of American economic policy across decades. From the tight-money era of the early 1980s (when rates soared above 19%) to the near-zero emergency cuts during financial crises, every entry reflects a deliberate policy choice that shaped the economy millions of people live in.

Whether you're an investor, a homebuyer, or just someone trying to understand why your savings account rate keeps changing — this is the dataset to watch.

Source: Federal Funds Effective Rate (FEDFUNDS), Federal Reserve Bank of St. Louis

50 Years of Car Sales: What the Numbers Reveal

huangyongshan46-a11y — Sun, 29 Mar 2026 13:00:21 +0000

Did you know the U.S. has been tracking total vehicle sales since the mid-1970s — and the story those numbers tell is a rollercoaster?

A deep dive into the Total Vehicle Sales dataset from FRED — covering 200 monthly records — reveals just how sensitive the auto industry is to the broader economy.

Back in early 1976, Americans were buying vehicles at a rate of roughly 12.8 to 13.6 million units per year (seasonally adjusted). That baseline gives us a fascinating anchor point. Over the decades that followed, vehicle sales surged during boom times, cratered during recessions, and occasionally surprised everyone.

The auto market doesn't just reflect consumer confidence — it practically is consumer confidence, measured in steel and rubber. When people feel secure in their jobs and finances, big-ticket purchases like cars and trucks spike. When uncertainty creeps in, those showroom visits dry up fast.

What makes this dataset especially valuable is its consistency: two clean columns — date and value — tracked month after month across nearly five decades. It's one of the most reliable economic pulse checks we have.

Whether you're an investor watching for turning points, a policy wonk studying stimulus effects, or just curious about economic cycles, this is one time series worth bookmarking.

Source: FRED — Total Vehicle Sales (TOTALSA)

U.S. Home Prices Have Tripled Since 1987 — Here's the Journey

huangyongshan46-a11y — Sun, 29 Mar 2026 11:30:21 +0000

Did you know that U.S. home prices have roughly tripled since the late 1980s?

The Case-Shiller Home Price Index tells a dramatic story across nearly two decades of data. Starting at just 63.96 in January 1987, the index tracks the pulse of the American housing market — and the ride has been anything but smooth.

Here's what stands out from 200 monthly observations:

The slow climb. Through the late 1980s and 1990s, home prices rose steadily but modestly. The index inched upward month after month, reflecting a stable housing market where gains were measured in fractions of a point.

The boom. The early 2000s changed everything. Fueled by loose lending standards and speculative buying, home prices surged at a pace that made the previous decade look flat by comparison.

The bust and recovery. The 2008 financial crisis sent the index tumbling, wiping out years of gains almost overnight. But the recovery that followed was relentless — eventually pushing prices to new all-time highs.

What makes this data so compelling is how it captures the full emotional arc of American homeownership: optimism, exuberance, panic, and resilience.

For anyone wondering whether housing is a safe long-term investment, the long view suggests yes — but only if you can stomach the volatility along the way.

Data source: Case-Shiller U.S. National Home Price Index (CSUSHPISA) via FRED, Federal Reserve Bank of St. Louis.

California's Poverty Population Could Swallow Vermont 74 Times Over

huangyongshan46-a11y — Sun, 29 Mar 2026 09:20:42 +0000

Did you know that the number of people living below the poverty line in California alone is 74.3 times larger than the entire poverty population of Vermont?

New data from the U.S. Census Bureau's American Community Survey reveals a staggering gap in the raw scale of poverty across American states. California reports over 4.7 million residents living in poverty, while Vermont counts roughly 63,700 — a ratio that puts the sheer size disparity of U.S. states into sharp perspective.

But here's the twist: this isn't really a story about which state is "worse" at fighting poverty. California's poverty rate sits at about 12.3%, while Vermont's is around 10.3%. The rates are much closer than the raw numbers suggest. The massive gap in headcount is driven largely by population — California is home to nearly 38.5 million people, compared to Vermont's 621,000.

Still, the absolute numbers matter. When nearly 4.7 million people in a single state lack sufficient income, the demand on social services, housing, healthcare, and food assistance is enormous — regardless of what the percentage looks like on paper.

Texas (4.1 million), Florida (2.8 million), and New York (2.7 million) round out the top four in raw poverty population, reinforcing a pattern: the states with the most people also carry the heaviest poverty burdens in absolute terms.

The takeaway? Percentages tell one story. Raw numbers tell another — and policymakers need both.

Source: U.S. Census Bureau, American Community Survey

Retail Jobs Hit Rock Bottom in April 2020 — The Numbers Are Staggering

huangyongshan46-a11y — Sun, 29 Mar 2026 03:00:22 +0000

Did you know that U.S. retail trade employment plunged to just 13,246,900 jobs in April 2020 — the lowest level on record?

To put that in perspective, the retail sector had been hovering around 15.5 to 15.8 million jobs for most of the late 2010s. Then, in a single month, roughly 2.3 million retail positions vanished as pandemic lockdowns shuttered stores across the country.

The annual averages tell the story of a slow build and a sudden collapse:

2017–2018: Retail employment peaked near 15.8 million, riding steady consumer spending.
2019: A modest dip to 15.55 million hinted at shifting shopping habits and growing e-commerce pressure.
2020: The annual average cratered to 14.8 million — but that figure masks the true shock of the April low point.
2021–2024: A gradual recovery brought numbers back above 15.2 million, though the sector has never fully returned to its pre-pandemic highs.

What makes this especially striking is that even after four years of recovery, retail employment in 2024 (averaging ~15.49 million) still trails the 2017 peak. The industry is fundamentally reshaping — fewer cashiers, more warehouse workers, and a permanent shift toward online fulfillment.

That April 2020 number wasn't just a dip. It was a structural turning point for one of America's largest employment sectors.

Source: BLS Current Employment Statistics — Retail Trade

The Wild Ride of Mortgage Rates: 50+ Years in One Chart

huangyongshan46-a11y — Sun, 29 Mar 2026 00:15:10 +0000

Did you know that when the U.S. government first started tracking the 30-year fixed mortgage rate in 1971, it was just 7.33%?

That might sound high by recent memory, but it was only the beginning of a dramatic journey. Data from the Federal Reserve Economic Data (FRED) series on the 30-Year Fixed Mortgage Rate tells a fascinating story about the cost of homeownership in America.

In the spring of 1971, rates hovered around 7.3% — affordable enough to fuel the suburban housing boom of that era. But over the following decades, mortgage rates would swing wildly, driven by inflation, Federal Reserve policy, and global economic shocks.

What makes this dataset so compelling is how it captures the week-by-week pulse of the housing market. Even in just the first few months of tracking, you can see rates creeping upward — from 7.29% at the end of April 1971 to 7.52% by early June. Small moves, but ones that translate into thousands of dollars over the life of a 30-year loan.

For anyone buying a home, refinancing, or just trying to understand the economy, this is one of the most important numbers in American finance. A single percentage point shift can price millions of families in or out of homeownership.

The next time someone tells you rates are "historically high" or "historically low," check the data yourself. History has a way of putting things in perspective.

Source: FRED — 30-Year Fixed Mortgage Rate (MORTGAGE30US)

Next.js 16 Multi-Tenancy: Organizations, Team Invites, and Per-Org Billing

huangyongshan46-a11y — Sun, 29 Mar 2026 00:14:02 +0000

Next.js 16 Multi-Tenancy: Organizations, Team Invites, and Per-Org Billing

Multi-tenancy is the backbone of any serious SaaS product. When users need to collaborate under a shared workspace — invite teammates, manage billing together, and work on shared data — you need a clean organizational layer beneath your auth system. This tutorial walks through building exactly that with Next.js 16, Prisma, and Stripe.

By the end, you'll have:

A Prisma schema supporting orgs, memberships, and roles
Middleware that injects org context into every request
A team invite flow via email
Per-org Stripe subscriptions

1. The Prisma Schema

First, the data model. Organizations sit between users and resources. A user can belong to many orgs, each org has members with roles, and billing attaches to the org — not the individual user.

// prisma/schema.prisma

model Organization {
  id                String       @id @default(cuid())
  name              String
  slug              String       @unique
  stripeCustomerId  String?      @unique
  stripeSubId       String?
  plan              String       @default("free")
  createdAt         DateTime     @default(now())
  members           Member[]
  invites           Invite[]
}

model Member {
  id        String       @id @default(cuid())
  orgId     String
  userId    String
  role      Role         @default(MEMBER)
  createdAt DateTime     @default(now())
  org       Organization @relation(fields: [orgId], references: [id], onDelete: Cascade)
  user      User         @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([orgId, userId])
}

model Invite {
  id        String       @id @default(cuid())
  orgId     String
  email     String
  role      Role         @default(MEMBER)
  token     String       @unique @default(cuid())
  expiresAt DateTime
  accepted  Boolean      @default(false)
  org       Organization @relation(fields: [orgId], references: [id], onDelete: Cascade)
}

enum Role {
  OWNER
  ADMIN
  MEMBER
}

Run npx prisma migrate dev --name add-multi-tenancy to apply.

2. Org Context Middleware

Every request needs to know which org it belongs to. The cleanest approach: store activeOrgId in the session, then verify membership in middleware before the request hits any route handler.

// middleware.ts
import { NextRequest, NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export async function middleware(req: NextRequest) {
  const token = await getToken({ req });

  if (!token) {
    return NextResponse.redirect(new URL("/login", req.url));
  }

  const orgSlug = req.nextUrl.pathname.split("/")[2]; // e.g. /app/[orgSlug]/...
  if (!orgSlug) return NextResponse.next();

  // Verify membership — attach org info to headers for server components
  const res = await fetch(
    `${req.nextUrl.origin}/api/org/${orgSlug}/verify-member`,
    {
      headers: { cookie: req.headers.get("cookie") ?? "" },
    }
  );

  if (!res.ok) {
    return NextResponse.redirect(new URL("/app", req.url));
  }

  const { orgId, role } = await res.json();
  const response = NextResponse.next();
  response.headers.set("x-org-id", orgId);
  response.headers.set("x-org-role", role);
  return response;
}

export const config = {
  matcher: ["/app/:orgSlug/:path*"],
};

And the verify endpoint:

// app/api/org/[slug]/verify-member/route.ts
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { NextResponse } from "next/server";

export async function GET(
  req: Request,
  { params }: { params: { slug: string } }
) {
  const session = await getServerSession(authOptions);
  if (!session?.user?.id) return new NextResponse("Unauthorized", { status: 401 });

  const member = await prisma.member.findFirst({
    where: {
      userId: session.user.id,
      org: { slug: params.slug },
    },
    include: { org: true },
  });

  if (!member) return new NextResponse("Forbidden", { status: 403 });

  return NextResponse.json({ orgId: member.orgId, role: member.role });
}

3. Team Invite Flow

Invites work via a signed token emailed to the recipient. When they click the link, they're added to the org.

// app/api/org/[slug]/invite/route.ts
import { prisma } from "@/lib/prisma";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { sendEmail } from "@/lib/email";
import { NextResponse } from "next/server";

export async function POST(
  req: Request,
  { params }: { params: { slug: string } }
) {
  const session = await getServerSession(authOptions);
  if (!session?.user?.id) return new NextResponse("Unauthorized", { status: 401 });

  const { email, role } = await req.json();

  // Verify inviter is OWNER or ADMIN
  const inviter = await prisma.member.findFirst({
    where: { userId: session.user.id, org: { slug: params.slug } },
  });
  if (!inviter || inviter.role === "MEMBER") {
    return new NextResponse("Forbidden", { status: 403 });
  }

  const org = await prisma.organization.findUnique({
    where: { slug: params.slug },
  });
  if (!org) return new NextResponse("Not found", { status: 404 });

  const invite = await prisma.invite.create({
    data: {
      orgId: org.id,
      email,
      role,
      expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
    },
  });

  const inviteUrl = `${process.env.NEXT_PUBLIC_URL}/invite/${invite.token}`;

  await sendEmail({
    to: email,
    subject: `You've been invited to join ${org.name}`,
    html: `<p>Click <a href="${inviteUrl}">here</a> to join the team. Expires in 7 days.</p>`,
  });

  return NextResponse.json({ success: true });
}

The accept route:

// app/api/invite/[token]/accept/route.ts
import { prisma } from "@/lib/prisma";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { NextResponse } from "next/server";

export async function POST(
  req: Request,
  { params }: { params: { token: string } }
) {
  const session = await getServerSession(authOptions);
  if (!session?.user?.id) return new NextResponse("Unauthorized", { status: 401 });

  const invite = await prisma.invite.findUnique({
    where: { token: params.token },
  });

  if (!invite || invite.accepted || invite.expiresAt < new Date()) {
    return new NextResponse("Invalid or expired invite", { status: 400 });
  }

  await prisma.$transaction([
    prisma.member.create({
      data: {
        orgId: invite.orgId,
        userId: session.user.id,
        role: invite.role,
      },
    }),
    prisma.invite.update({
      where: { id: invite.id },
      data: { accepted: true },
    }),
  ]);

  return NextResponse.json({ orgId: invite.orgId });
}

4. Per-Org Stripe Subscriptions

Billing attaches to the organization, not the user. When an org upgrades, create a Stripe customer for the org if one doesn't exist, then start a checkout session.

// app/api/org/[slug]/billing/checkout/route.ts
import Stripe from "stripe";
import { prisma } from "@/lib/prisma";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { NextResponse } from "next/server";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2025-01-27.acacia",
});

export async function POST(
  req: Request,
  { params }: { params: { slug: string } }
) {
  const session = await getServerSession(authOptions);
  if (!session?.user?.id) return new NextResponse("Unauthorized", { status: 401 });

  const org = await prisma.organization.findUnique({
    where: { slug: params.slug },
  });
  if (!org) return new NextResponse("Not found", { status: 404 });

  // Create Stripe customer if first checkout
  let customerId = org.stripeCustomerId;
  if (!customerId) {
    const customer = await stripe.customers.create({
      name: org.name,
      metadata: { orgId: org.id },
    });
    customerId = customer.id;
    await prisma.organization.update({
      where: { id: org.id },
      data: { stripeCustomerId: customerId },
    });
  }

  const checkoutSession = await stripe.checkout.sessions.create({
    customer: customerId,
    mode: "subscription",
    line_items: [
      {
        price: process.env.STRIPE_PRO_PRICE_ID!,
        quantity: 1,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_URL}/app/${params.slug}/settings?upgraded=1`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/app/${params.slug}/settings`,
    metadata: { orgId: org.id },
  });

  return NextResponse.json({ url: checkoutSession.url });
}

Wire up a webhook to handle customer.subscription.updated and customer.subscription.deleted to keep plan and stripeSubId in sync on the org:

// In your Stripe webhook handler
case "customer.subscription.updated":
case "customer.subscription.created": {
  const sub = event.data.object as Stripe.Subscription;
  const org = await prisma.organization.findFirst({
    where: { stripeCustomerId: sub.customer as string },
  });
  if (org) {
    await prisma.organization.update({
      where: { id: org.id },
      data: {
        stripeSubId: sub.id,
        plan: sub.status === "active" ? "pro" : "free",
      },
    });
  }
  break;
}

Tying It Together

With this in place, every route under /app/[orgSlug] is protected by membership verification. Invites are token-based with expiry. Billing is cleanly scoped to the org so any member can trigger an upgrade, and the subscription status flows back via webhook.

A few things to add as you scale:

Seat limits — cap membership count based on the org's plan
Org switcher UI — let users flip between orgs they belong to
Audit log — track role changes and invites for compliance

Skip the Boilerplate

If you'd rather not wire all of this up from scratch, LaunchKit ships with the full multi-tenancy stack pre-built: org creation, member management, role-based access, email invites, and per-org Stripe subscriptions — all in a production-ready Next.js 16 codebase.

The GitHub repo has the full source so you can see exactly how it's structured before buying.

Building something with Next.js? Drop your questions in the comments — happy to help.