Build a fantasy football app

A complete tutorial: from API key to a working fantasy NFL app with live scoring.

Time to complete: ~45 minutes  · Difficulty: Intermediate  · Stack: Node.js + Next.js + Tailwind

What you'll build

A weekly fantasy NFL app: pick a lineup of QB/RB/WR/TE/Flex/DST, watch points update live as games progress, and see a leaderboard of friends.

Step 1 — Project setup

npx create-next-app@latest fantasy-app --typescript --tailwind --app
cd fantasy-app
npm install @sportapi/node

Step 2 — Fetch teams and players

// app/api/players/route.ts
import { Sportapi } from '@sportapi/node';

const client = new Sportapi(process.env.SPORTAPI_KEY!);

export async function GET() {
  const offense = await client.nfl.players.list({
    positions: ['QB', 'RB', 'WR', 'TE'],
    sort: '-fantasy_points_avg',
    limit: 200,
  });
  return Response.json(offense);
}

Step 3 — Build the player picker

Render a list with position filters. When the user selects a player, store them in URL query params (so refresh preserves the draft) or a database (so it's shareable).

Step 4 — Calculate fantasy points

Use the fantasy endpoint with your scoring rules:

const points = await client.nfl.fantasy.points({
  scoring: 'ppr',
  players: lineup.map(p => p.id),
});

Step 5 — Subscribe to live updates

const stream = client.stream();
stream.subscribe('nfl.scores.live');
stream.subscribe('nfl.fantasy.live', { scoring: 'ppr' });

stream.on('update', (msg) => {
  if (msg.channel === 'nfl.fantasy.live') {
    updatePlayerPoints(msg.data);
  }
});

Step 6 — Leaderboard

Persist each user's lineup, then on every fantasy update, recompute total points per user and re-sort. Pure server-side computation — no extra API calls.

Next steps

  • Add custom scoring rules
  • Implement draft mode
  • Add push notifications via the webhook API
  • Persist drafts to a database (Postgres, Planetscale, Supabase, etc.)
← Previous
Reconnection