DEV Community

Zain K.
Zain K.

Posted on

Notion MCP Challenge Judges Dashboard

#notionchallenge

Notion MCP Challenge Submission 🧠

What I Built

I built the Notion Judge's Glassboard — a premium, cinematic "Evaluation OS" explicitly designed to streamline and elevate the judging experience for the Notion MCP Challenge.

With over 180+ incredible submissions, evaluating every entry across multiple criteria (Originality, Complexity, Practicality) can become overwhelming. The Glassboard ingests live submission data (via DEV.to API & Notion MCP) and transforms it into a highly aesthetic, two-stage React SPA:

  1. The Cinematic Hero: A sleek, fully animated dark-mode landing page complete with floating ambient particles and interactive SVG badges that instantly make the project feel premium.

  2. The Pastel Gallery: A smooth, glassmorphism-inspired category dashboard that sorts submissions dynamically, surfacing read times, reaction counts, and direct links natively mapped to the actual DEV.to articles.

This isn't just a basic tracker; it's a bespoke evaluation hub built to make the final judging process as impressive as the projects being evaluated.

DEMO

Show us the code

The entire React/Vite front-end and Python data-ingestion pipeline is available here:

GitHub logo zainkhan1994 / notion-judge-glassboard

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

How I Used Notion MCP

The true magic behind the Glassboard is its autonomous backend. Rather than hardcoding the 180+ projects or connecting directly to a rate-limited front-end API, I used the Notion MCP (Model Context Protocol) to turn my actual Notion Workspace into a headless CMS and evaluation engine:

The Living Database--> https://khanstruct.notion.site/notion-mcp-challenge?source=copy_link
Our central source of truth is The Notion AI Challenge Database, which holds every DEV.to submission, reaction stat, and read-time metric.

Hourly Autonomous Generation: Every single hour, our AI agent spins up via the local Notion MCP to read the latest rows from that master Notion database. It dynamically queries for any new entries or updated stats, then instantly builds and pushes those individual glassmorphism React cards directly into the Glassboard UI.

Two-Way Evaluation Sync: When a judge reviews a project and marks it with an implementation score (Originality, Practicality, Complexity), that data safely hits a securityHumanInLoop: true verification flag and writes safely back into the exact same Notion Database via MCP—enabling full remote collaboration for multiple judges without ever showing them a boring spreadsheet.

Top comments (0)