Skip to content

Connect frontend to StreamForge API scoring endpoint #5

Description

@AbdulSnk

Overview

The StreamForge Web frontend needs a clean data-fetching layer that connects to the StreamForge API scoring endpoint and supplies data to all dashboard components.

What needs to be done

  • Create a services/ directory under src/
  • Implement a scoringService.ts file with the following functions:
    • getContributorScore(contributor: string) — fetches score for a single contributor
    • getAllScores() — fetches scores for all contributors
    • getRewardSummary() — fetches total rewards paid and pending
  • Handle API errors gracefully and return typed error responses
  • Use environment variables for the API base URL — never hardcode it
  • Create a custom React hook useScoring() that components can use to access scoring data

Acceptance Criteria

  • src/services/scoringService.ts exists with all three functions
  • useScoring() custom hook exists and is usable by any component
  • API base URL is loaded from environment variables
  • All functions return properly typed TypeScript responses
  • Error states are handled and surfaced to the UI
  • Dashboard and leaderboard components use this service — no direct API calls in components

Notes

Use fetch or axios for HTTP calls. All API responses must be typed with TypeScript interfaces — no any types. Store the API base URL in .env.local as NEXT_PUBLIC_API_URL.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions