abyiber.com
Back to Work

Judging Software

Go to RepoDemo

TL;DR:   I built a standalone judge panel that simplifies the scoring process for student projects while seamlessly integrating with the existing CMS. The platform features a digital judging form, allowing judges to score projects with an intuitive UI and real-time saving. Clerk authentication provides secure, passwordless login and role-based access, ensuring an easy and controlled judging experience. Using Next.js, React, Airtable, Contentful, and MongoDB, the panel pulls project data without modifying the CMS. A real-time dashboard helps admins track scores and progress, making judging faster, fairer, and more transparent.

Judging Software thumbnail image

Problem

My client needed a simple and efficient way for judges to evaluate student projects submitted through the existing CMS. The traditional process involved manual scoring and scattered feedback, making it difficult to standardize judging criteria, track scores, and ensure fairness.

The key challenges included:

  • Simplifying the judging process: Judges needed an intuitive, digital form to score projects based on predefined criteria.

  • Seamless authentication: Judges should be able to log in easily with minimal setup, without requiring complex account management.

  • Data integration: The system must pull project details from the CMS’s data sources (Airtable, Contentful, MongoDB) without interfering with the CMS itself.

  • Scalability and role-based access: Different judges needed different levels of access, ensuring that only authorized users could evaluate projects.

Solution

The solution is a standalone judge panel built with Next.js and React, designed to provide a streamlined experience for judges while integrating with the CMS's existing data sources.

Core Features

Digital Judging Form

  • Judges can score projects using an interactive form with adjustable rating criteria.

  • Supports rubric-based scoring, comments, and optional feedback.

  • Allows real-time saving to ensure progress isn’t lost.

Clerk for Authentication & User Management

  • Judges log in via Clerk, a user authentication and access management tool.

  • Supports password less login, Google SSO, and social logins for convenience.

  • Enables role-based access control (RBAC) to differentiate between admins, judges, and event organizers.

Data Integration with CMS Sources

  • Uses APIs to pull project data from Airtable, Contentful, and MongoDB without modifying the existing CMS.

  • Judges see only relevant projects assigned to them, ensuring a personalized and structured evaluation process.

  • Real-time updates ensure that new submissions or project modifications reflect instantly.

Real-time Dashboard & Analytics

  • A dashboard provides an overview of scores, judge progress, and submission status.

  • Admins can track judging progress, export results, and manage scoring criteria dynamically.

Tech Stack

  • Next.js & React: Fast, server-side rendering for smooth performance.

  • TypeScript: Ensures type safety and maintainability.

  • Clerk: Manages authentication, authorization, and user roles.

  • Airtable API: Pulls structured project data.

  • Contentful API: Fetches media and content descriptions.

  • MongoDB: Stores judge scores and feedback.

  • TailwindCSS: Provides a clean and modern UI.

Conclusion

This judge panel simplifies the scoring process while seamlessly integrating with the existing CMS data. Using Clerk for authentication, it ensures secure, role-based access, making it easy for judges to log in and evaluate projects. The intuitive digital form, real-time dashboard, and mobile-friendly design provide a streamlined and efficient judging experience, making the process faster, fairer, and more transparent.