DIIMUN Chapter 2025 - Model United Nations Portal & Registration Engine

Project Overview

DIIMUN Chapter 2025 (Doctors Integrated International Model United Nations) is a premier academic elocution and debate conference hosted by Doctors Nexus Amity (DNA) in collaboration with Government Homoeopathic Medical College Trivandrum (GHMCT) as an exclusive flagship event for ESPERANZA 4.0.

To manage high-volume delegate onboarding across medical colleges in India, I designed and developed a custom, full-stack event platform: dna.aghosh.in.

Unlike generic Google Forms or off-the-shelf ticketing systems that charge steep transactional commissions and lose up to 60% of interested participants during multi-step checkout, this platform pairs an immersive diplomatic visual world with a custom Supabase-backed registration pipeline, complete with real-time partial data saving, dynamic role allocation, and automated UPI payment verification.

DIIMUN 2025 - Official Conference WebApp Hero

The official landing experience for DIIMUN Chapter 2025 at GHMC Trivandrum.

Key Challenges & Architectural Objectives

Eliminate Registration Abandonment: Complex academic competitions require extensive participant details (college, year of study, committee preferences, partner pairings). If applicants leave before paying, organizers typically lose the lead entirely. The system needed background lead capture the moment an email is entered.
Multi-Track Role Architecture: The conference accommodated two distinct categories of participants:
- General Delegates: Competing in parliamentary debate committees (World Health Organization or Great Assembly).
- International Press Corps (IPC): Specialized media participants submitting either photography portfolios or investigative journalism essays.
Frictionless UPI Payments with Zero Commission Fees: Payment gateway aggregators charge 2–3% plus GST on every transaction and impose rigid settlement delays. We needed a direct peer-to-merchant UPI workflow with instant QR rendering, one-click ID copying, and receipt screenshot verification.
Partner Event Discount Integration: Eligible participants registered for the overarching medical conclave (Esperanza 4.0) received a discounted entry fee (₹347). The system required dynamic fee calculation and dual verification proof handling.
Rock-Solid Cross-Device UX: Most medical students register from mobile smartphones (especially iOS Safari). The UI needed to handle viewport resizing, select dropdown clipping, and touch gestures flawlessly.

Technical Architecture & Core Innovations

1. Zero-Abandonment "Ghost Lead" Autosave Pipeline

One of the platform's primary technical achievements is its proactive delegate recovery mechanism. The client application utilizes a custom debounced state hook (useDebounce) set to a 1,500ms inactivity threshold:

Background Upsert: The instant an applicant fills out their name, WhatsApp number, and email address, the client quietly communicates with the Supabase REST API via @supabase/supabase-js.
Conflict Resolution: An upsert operation is executed targeting the unique email column, marking the record with status: 'Partial'.
Zero Disruption: The user experiences zero UI freezing or spinner delays while their progress is continuously backed up.
Organizer Recovery: If a student abandons the process at the payment step, event coordinators can immediately view their contact details and assigned committee preference in the database to assist them over WhatsApp.

Personal and Academic Information with Live Autosave

Step 3 of registration: Applicant academic details are debounced and saved to Supabase in real-time.

2. Multi-Track Committee & Role Selection

Rather than overwhelming users with a monolithic form, the intake architecture splits into a clean, two-stage role decision tree:

Delegates Track: Focuses on policy defense and oratorical resolution, assigning candidates to either the World Health Organization (WHO) or the Great Assembly of Stalwarts.
International Press Corps (IPC) Track: Allows non-debating creatives to register as either Photojournalists (live event press) or Essayists (editorial reporting).

The choice dynamically mutates downstream validation requirements, fee structures, and instructions.

Role Decision: Branching between Delegate and International Press Corps.

Committees Overview: WHO and Great Assembly

Interactive committee showcases detailing agendas, stalwarts, and mandates.

3. Direct UPI Payment & Cloud Proof Verification

To eliminate gateway costs while preserving automated audit trails, I engineered a direct UPI verification workflow:

Dynamic Amount Calculation: The application calculates exact pricing based on committee track and Esperanza participation status (e.g. ₹347 for Esperanza delegates).
One-Tap Payment Triggers: Delegates can click to copy the organizer UPI ID (aghoshbprasad100@okaxis) with visual clipboard feedback or scan an auto-generated QR code directly inside their mobile banking app (Google Pay, PhonePe, Paytm).
Supabase Storage Pipeline: After completing the transfer, delegates upload their payment screenshot. The file is sanitized, renamed with a unique timestamped delegate hash, and uploaded to a secure Supabase Storage bucket (payment-screenshots).
Relational Attachment: The resulting public or signed URL is written back to the delegate's registration record, flipping the status from Partial to Submitted for secretariat verification.

Dynamic UPI QR Code and Esperanza Conclave Discount

Step 4: Dynamic QR code generation with Conclave discount applied.

Step 5: Direct receipt upload with client-side image preview and validation.

4. iOS Safari Neutralization & React Portals

Mobile browsers—specifically WebKit/Safari on iOS—frequently break complex multi-step forms by triggering unwanted viewport auto-zoom on input focus and clipping absolute dropdowns inside overflow-hidden container cards.

Viewport Zoom Suppression: Implemented custom CSS font metrics and touch event guards targeting iOS devices (isIOS user-agent detection) to keep forms rock-solid during typing.
React Portals for Floating Selects: Built a dedicated Portal.jsx component that teleports dropdown menus directly to document.body, calculating exact viewport bounding boxes (getBoundingClientRect) to prevent z-index clipping.

Design System & Visual Identity

The visual design communicates diplomacy, academic prestige, and authority:

Color Palette: Deep midnight navy (#0B132B), warm Cognac accents, rich burnished gold highlights, and clean frosted-glass surfaces.
Typography: Elegant editorial serif headings (Playfair Display) paired with crisp, high-legibility geometric sans-serif body text (Inter).
Micro-Interactions: Smooth entrance reveals powered by Framer Motion and AOS (Animate on Scroll), combined with subtle glowing borders and animated status badges.

Conference value proposition and skill development highlights.

Pre-conference orientation, rules of procedure, and position paper guidance.

Impact & Results

Zero Data Loss: 100% of partial registrations were successfully preserved in Supabase, allowing the organizing team to assist delegates who ran into connectivity issues.
Zero Transaction Commission Fees: By adopting an integrated UPI receipt verification architecture instead of third-party ticket aggregators, the organization retained 100% of delegate funds.
Flawless Conference Execution: Successfully powered delegate intake for the DIIMUN 2025 plenary session held on November 4th, 2025 at GHMC Trivandrum.
Live Deployment: The platform continues to serve as an active showcase at https://dna.aghosh.in/.