Case Study · Frontend
Codeforces Analyzer
A web app that turns a competitive programmer's raw Codeforces history into an honest picture of their journey — rating trajectory, tag strengths and weaknesses, and submission patterns.
The problem
Competitive programmers obsess over rating, but rating alone doesn't tell you why you're stuck — which problem tags you avoid, how your trajectory has actually moved, or what your solve patterns look like. Codeforces' own profile page surfaces very little of this.
The goal was a focused analytics view: feed it a handle and get back a clear visualization of rating history, problem-tag distribution, and submission analytics — the insight you'd otherwise have to compute by hand.
How it works
Client-only architecture on the public API
The app is a React + TypeScript single-page application that talks directly to the public Codeforces API. There's no backend: a handle drives a set of API calls for rating history and submissions, the responses are transformed and aggregated in the browser, and the results are rendered as charts.
Aggregation & visualization
Submission data is grouped by tag, verdict, and time to surface strengths, gaps, and trends. TypeScript types model the API responses so the transformation logic stays honest as the data shape flows through the app.
Key decisions & tradeoffs
No backend — pure client-side SPA
Why: The Codeforces API is public and read-only, so a backend would add nothing but cost and ops. A static SPA deploys free on Netlify and is trivial to maintain.
Tradeoff: All aggregation happens client-side and the app is bound by the API's rate limits and CORS behavior, so heavy users with huge submission histories pay a load-time cost.
TypeScript end-to-end
Why: Modeling the API responses as types caught shape mismatches early and made the data-transformation layer — the heart of the app — far safer to refactor.
Tradeoff: More upfront typing work for an otherwise small app.
Outcome
- Turns a Codeforces handle into a readable story of rating trajectory, tag coverage, and solve patterns.
- Deployed live and free as a static SPA with no backend to operate.
- Sharpened data-transformation and visualization skills against a real, messy public API.
What I'd improve next
- Cache API responses to soften rate limits and speed up repeat visits.
- Add side-by-side comparison of two handles for head-to-head analysis.