BEAST//RANK

A premium static Monster Energy flavor ranking site with a dark cyberpunk interface, flavor search, category filters, generated can art, stats, highlights, recent flavors, and SEO-friendly flavor pages.

Stack

• Next.js App Router
• React + TypeScript
• Tailwind CSS
• Framer Motion
• dnd-kit drag and drop
• Static export

Project Structure

app/
  admin/                  Static note about read-only hosting
  flavors/[slug]/         SEO-friendly flavor detail pages
  globals.css             Global design system
  layout.tsx              Metadata and shell
  page.tsx                Ranking board
components/
  SafeCanImage.tsx
  ranking/
    BucketRow.tsx
    FlavorCard.tsx
    FlavorDetailModal.tsx
    RankingExperience.tsx
data/
  flavors.ts              Researched seed catalog
lib/
  can-svg.ts              Shared generated can SVG renderer
  constants.ts            Tier/category constants
  public-path.ts          Static asset base-path helper
  static-board.ts         Static board/flavor data loaders
  utils.ts
scripts/
  generate-static-cans.ts Static fallback can generator

Local Setup

npm install
npm run dev

Open http://localhost:3000.

Ranking Model

The public site is static and read-only.

• data/flavors.ts keeps the catalog, image URLs, initial tier bucket, position, and highlight flag.
• lib/static-board.ts converts that source data into the board and flavor detail pages.
• Ranking changes are source edits followed by a rebuild/redeploy.

Flavor Data

The seed currently includes 103 flavors across:

• Original
• Ultra
• Juice/Punch
• Rehab
• Java
• Nitro
• Reserve
• Hydro
• Tea
• Limited/Regional

Sources used for the seed research:

• Monster Energy official U.S. products
• Monster Energy official U.S. homepage
• Monster Energy Wiki flavor list
• Energy Drink Mania Monster archive

Official image hosts can block hotlinking, so tried flavors use local .webp assets in public/cans/, and every other flavor gets generated static can art in public/cans/generated/. The UI falls back to the generated static asset if a custom image fails.

Verification

Validated locally with:

npm run build

The export generates 108 static pages: the board, admin read-only note, not-found page, and all 103 flavor detail pages.