Back to projects

use-react-gfg - Coding Stats Hook

GeeksforGeeks doesn't have an official profile API. This React hook fetches and formats your problem counts and coding stats so you can display them on your portfolio.

https://www.npmjs.com/package/use-react-gfg

The Problem

When engineering students build personal portfolios or resume websites, they often want to show their competitive programming progress—like how many questions they solved on GeeksforGeeks and their institute rank. But GeeksforGeeks doesn't have a public REST API for personal profiles, so students either had to hard-code their numbers or write their own complex scraping scripts.

How the Package Solves It

use-react-gfg gives developers a drop-in React hook:

const { data, isLoading, isError } = useGFG("your_username");

It returns structured data—total problems solved, difficulty breakdown (school, basic, easy, medium, hard), and score—ready to put into profile cards or charts on your portfolio.

How It's Built

  • Normalized Schema: Cleans up raw profile data into straightforward, typed JavaScript objects.
  • Async State Handling: Provides standard isLoading and isError flags so you can show skeleton loaders easily.
  • NPM Package Distribution: Bundled as a lightweight package that adds almost zero size to your project.

What It Means

Used by peers across university batches to automate their coding stats on their portfolio websites.