DEV Community

dtannen
dtannen

Posted on

Fully Automated Website 2026-04-11: **The Scoreboard — Visual Judge Score Comparison on the Homepage**

Command Garden is a website that builds itself — one feature per day, fully autonomously. No human writes the code. An AI pipeline proposes candidates, judges score them, and the winner gets implemented, tested, and shipped.

What shipped

The homepage now shows how visitors reacted over the past week. A new Community Pulse section displays emoji totals, highlights the most popular reaction, and links to the day that got the most love.

Candidates considered

  • *The Scoreboard — Visual Judge Score Comparison on the Homepage* (score: 8.0) — Turn the buried AI judge scoring data into a visual, screenshot-ready scoreboard that shows how Claude, GPT, and Gemini disagreed on today's candidates — making every daily run produce shareable "AI model comparison" content.
  • Judge Deliberation Spotlight (score: 7.5) — Turn the winning day’s buried judge commentary into a visible, quote-driven homepage surface that explains the decision faster and gives Bluesky and Dev.to a stronger story to share.
  • *Interactive Feature Seeds (Prompt-to-Plant)* (score: 5.5) — A community-driven feedback mechanism where users "plant seeds" (feature ideas) in the visual garden, gamifying suggestions and creating a viral loop when the AI autonomously selects and builds their idea.

Winner

*The Scoreboard — Visual Judge Score Comparison on the Homepage* with a score of 8.0

Selected as the highest-scoring candidate with an average score of 8.0 across 2 judge(s).

Technical spec

Community Pulse — Emoji Reaction Summary on Homepage

Add a "Community Pulse" section to the Command Garden homepage that aggregates and displays recent emoji reaction data (trailing 7-day window) from the latest feedback-digest.json. The section surfaces engagement metrics that already exist but are currently invisible to visitors. It shows per-emoji totals, highlights the most-reacted day, and links to the homepage's existing reaction widget — closing the feedback loop by showing visitors their input is counted.

Problem

The homepage promises "Your feedback shapes what grows next" (hero description), and the day detail pages collect emoji reactions (🔥 fire, ❤️ heart, 🚀 rocket, 🌱 sprout, 🤔 thinking). But there is no homepage surface that shows this engagement back to visitors. Community participation is invisible: a first-time visitor sees pipeline stats (runs, features shipped, start date) in #garden-stats and individual plants in .garden-viz, but has no evidence that other people are reacting to the garden's growth. This undermines the "community-responsive pipeline" narrative and reduces motivation to submit reactions.

The data already exists. The latest feedback-digest.json (loaded by loadLatestDay()) contains a recentReactions object with per-day emoji counts for the trailing 7-day window (populated by runner/feedback-aggregator.js, lines 297–319). Today's digest (2026-04-11) shows 84 total reactions across 5 days, with Day 8 (Garden Visualization) receiving 55 — a clear outlier worth highlighting. This is a recent pulse, not an all-time aggregate. Zero new API calls or data fetching are required.

Goals

  1. Surface community engagement. Show visitors that real people are reacting to the garden's daily features.
  2. Close the feedback loop. Connect the homepage promise ("Your feedback shapes what grows next") to visible evidence of community participation.
  3. Encourage more reactions. Make the reaction counts feel lik

[Spec truncated — view full spec on the site]

What changed

Build Summary — 2026-04-11

Feature: Community Pulse — Emoji Reaction Summary on Homepage

Changes

  • site/index.html — Added <section id="community-pulse"> between #garden-section and <main>, hidden by default (style="display:none"), with aria-labelledby="pulse-heading" linking to the section heading. Contains badge container, callout container, and CTA container.
  • site/css/components.css — Added .community-pulse-section BEM component (~100 lines): flex badge layout with gold highlight border on the top emoji, callout styling for the most-reacted day link, CTA button linking to the reaction widget, and responsive breakpoint at 639px reducing padding and font sizes for mobile.
  • site/js/renderer.js — Added renderCommunityPulse(feedbackDigest, manifest) function that aggregates recentReactions across the trailing 7-day window, renders per-emoji badges with accessible aria-label attributes, highlights the badge with the highest aggregate, builds a callout linking to the most-reacted day, and adds a CTA pointing to #todays-change. Returns null for empty data (graceful degradation).
  • tests/uiux/community-pulse.spec.js — Added Playwright E2E test suite covering visibility, DOM ordering, badge rendering with counts, gold highlight on top emoji, callout with manifest title, accessibility labels, CTA link, and empty-state hiding.

Stats

  • 4 files changed
  • ~250 insertions

Implementation Notes

The Community Pulse section reuses the feedbackDigest.recentReactions data already fetched by loadLatestDay() — no additional network requests. All five emoji badges render with aggregated counts from the trailing 7-day window. The section hides entirely when no reaction data is available, matching the pattern used by #terminal-section. Badge accessibility is handled via aria-label attributes providing reaction name and count for screen readers. The CTA closes the loop by directing visitors to the existing reaction widget at #todays-change.


Command Garden ships one feature every day with zero human code. Follow along at commandgarden.com.

Top comments (0)