Back to Archive
Case Study ยท 2024FeaturedLIVE v1.0

CML Kothamangalam

CML Kothamangalam

A high-performance event management ecosystem for large-scale cultural festivals.

Visit Portal
CML Kothamangalam
1,500+ IDs Generated

A comprehensive administrative platform designed to handle thousands of registrations, automated room allotments, and real-time result tracking for major cultural events.

Problem Visual
The Problem

Manual Event Logistics.

Managing large-scale festivals involves chaotic data entry, manual room assignments for hundreds of delegates, and the bottleneck of generating physical ID cards. Traditional methods lead to data inconsistency, slow registration queues, and logistical errors in accommodation and scoring, especially when dealing with over 15,000 lines of complex relational data.

Solution Visual
The Solution

Automated Orchestration.
Real-time Efficiency.

Developed a centralized Next.js and Supabase architecture that automates the heavy lifting of event logistics. The system features a custom ID Studio with Face-API.js for intelligent cropping, a heuristic-based room allocation engine to optimize venue capacity, and a real-time scoring system that calculates points across categories for instant PDF and Excel exports, ensuring zero-latency data synchronization.

Feature Visual
Implementation

Intelligent ID Studio.

Face-API.js
Canvas API
SVG-to-Image
Batch Processing

System Core // Dynamic ID Generation Engine

const generateID = async (participant) => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const detections = await faceapi.detectSingleFace(img);
  
  if (detections) {
    const { x, y, width, height } = detections.box;
    ctx.drawImage(img, x, y, width, height, PHOTO.x, PHOTO.y, PHOTO.w, PHOTO.h);
  }

  const dataUrl = await toPng(idRef.current, {
    quality: 0.95,
    pixelRatio: 2,
    filter: (node) => node.tagName !== 'BUTTON'
  });
  
  return dataUrl;
};
typescript
Next Project

Next Case Study

Keyark