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
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.
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
services/directory undersrc/scoringService.tsfile with the following functions:getContributorScore(contributor: string)— fetches score for a single contributorgetAllScores()— fetches scores for all contributorsgetRewardSummary()— fetches total rewards paid and pendinguseScoring()that components can use to access scoring dataAcceptance Criteria
src/services/scoringService.tsexists with all three functionsuseScoring()custom hook exists and is usable by any componentNotes
Use
fetchoraxiosfor HTTP calls. All API responses must be typed with TypeScript interfaces — noanytypes. Store the API base URL in.env.localasNEXT_PUBLIC_API_URL.