Rep. Desi Hip Hop's real top 5. 90 artists, live ballots, and honesty about the count.

Client

Rep

Year

2026

Scope of Work

Vanilla JS
Cloudflare Workers
D1
R2
HTMLRewriter SSR Meta
Turnstile
PWA
SEO
Editorial Design

Rep is a ranking platform for Desi Hip Hop: 90 web-verified artists across ten cities, a top-five builder, a tier list, a daily 1v1, verified beef timelines and a slang dictionary. It shipped to production on 14 June 2026. The premise is editorial first: it launches with a seed ranking curated by respect tier, so the board is never empty or wrong, and converts to live community rankings the moment real ballots arrive.

The brief

A ranking site with zero votes is either empty or lying, so every surface states its own provenance: seed ranking, no ballots yet, or live, N ballots counted. The whole product is one Cloudflare Worker serving a static vanilla-JS site, fronting D1 for ballots and R2 for share cards, with HTMLRewriter injecting real Open Graph tags and JSON-LD so a shared ballot unfurls on WhatsApp and X, which run no JavaScript.

Anonymous voting on a free tier invites abuse, so it is layered rather than solved: a per-IP hourly cap, Cloudflare Turnstile on the two write endpoints that matter, fail-open if the check itself is down, and a moderation token so the first slur on the wall is one request away from gone. The look is a gully zine: kraft paper, carbon ink, saffron, Anton set tight. The detail is in the screens below.

One thing I'd do differently: smoke-test the API after every deploy, not the 404 page. A branded 404 once took every API route down for two deploys, and nobody noticed because the check was looking at the wrong thing.

A ranking platform for Desi Hip Hop that admits when it has no votes.

Ninety web-verified artists across ten cities. It ships with an editorial seed ranking by respect tier, so the board is never empty or wrong on day one, and converts to live community rankings the moment real ballots arrive. Every surface says which it is showing: seed ranking, no ballots yet, or live, N ballots counted.

The Pen Game top five, and where the number comes from.

Top-five ballots are weighted six minus rank, tier ballots S equals five down to D equals one, and the leaderboard aggregates from the votes table with its source labelled. A ballot and its vote rows are written in one atomic D1 batch, so a partial write can never leave an orphaned list.

Nine regions, because the scene is a map before it is a chart.

Mumbai, Delhi, Punjab, Bengaluru, Pune, the Northeast, Chennai, Ahmedabad, Srinagar. Each region has its own roster with the artists who came up there, so city pride has a page to argue from.

Verified friction: a beef timeline that only carries receipts.

Three beefs, dated, each with public sources. The rule for the section is that a beef goes in only when the receipts are public. Everything else stays out, however well known it is.

Nine doors deeper: labels, producers, cyphers, slang, timeline, compare, mixtape, top 90, beefs.

The vault is the depth behind the ranking: the institutions, the unsung hands, the scene snapshots, the dictionary, a 1991 to 2026 timeline. Ninety artist profiles carry scraped editorial bios, each one indexed with its own MusicGroup JSON-LD and a sitemap entry, so the deepest content is the most findable.

Two artists, one tap. A new 1v1 every day.

A deterministic matchup per IST day: same-city or same-era, tier-matched pairs generated from the live roster, with a curated marquee pair every third day. After voting you see each side's count, a split bar and the running total. No login. A per-IP hourly cap plus Cloudflare Turnstile on the write endpoints keep the ballots honest on a free tier.

Say it louder: the defend wall, and Who's Missing.

Quotes defending an artist's place, and a suggestion form for the ninety-first name, gated by Turnstile. Turnstile fails open if its verification service is down, so a broken bot check can never block a real ballot, and enforcement flips with one variable, no deploy.

Drop 5: pick five, defend your number one, lock it in.

Filter the ninety by city, era, subgenre and language, tap five cards into your slots, and lock. Picks are validated against the artists table; duplicates and unknown slugs are rejected. The ballot gets a permalink whose share card is rendered client-side to a PNG and stored once in R2.

Tier 5: argue with science, S to D.

Drag any of the ninety into S, A, B, C or D. It autosaves locally, exports as a designer-tier PNG, and the tier list counts as a ballot in the live rankings alongside the top fives.

Top 90, the full order, cut by era or subgenre.

India's full DHH order on one page, sortable by pen game or by streams, filtered by era and subgenre. Every row opens the artist's profile. Seed until the ballots ship, live after.

Compare 2: two contenders, stat by stat, argue from receipts.

Pick two artists and read them side by side. The whole product runs on a single Cloudflare Worker serving a static vanilla-JS site, fronting D1 for ballots and R2 for share cards, with HTMLRewriter injecting real Open Graph tags and JSON-LD server-side so a shared link unfurls correctly on WhatsApp and X, which run no JavaScript.

Performance
Lighthouse
Mobile
0/100
Great
Desktop
0/100
Excellent
Core Web VitalsMobileDesktop
LCPLargest Contentful Paint
2.1 s0.9 s
FCPFirst Contentful Paint
1.6 s0.6 s
TBTTotal Blocking Time
120 ms10 ms
CLSCumulative Layout Shift
0.020.00

Trusted by many

Trusted by many

150+ Happy clients

Like what you see?
Book a free discovery call.

150+ Happy clients

Like what you see?
Book a free discovery call.

Create a free website with Framer, the website builder loved by startups, designers and agencies.