InnovateX 2026 — Clearance Protocol

A mission-terminal registration experience for MET E-Cell's role-based innovation challenge

---

Table of Contents

1. Overview
2. Architecture
3. Development Phases
4. Capstone Highlight
5. Getting Started
6. Usage
7. Testing
8. Engineering Notes
9. Roadmap
10. Contributing
11. License

Overview

InnovateX 2026 is a production-grade, multi-step event registration system designed as a mission clearance terminal — participants don't fill out a form, they earn clearance into a live system. The application handles solo and team registrations with UPI payment verification, automated email confirmations with QR entry passes, and a full-featured admin dashboard for real-time participant management. Built for MET E-Cell's flagship role-based innovation challenge at MET Bhujbal Knowledge City, Nashik.

Key Features

• Cinematic landing sequence with scanner beam and character-by-character title assembly
• Solo ↔ Team morphing toggle with ambient mode-aware color shifts
• Four-step progressive disclosure form with seal/reveal section transitions
• UPI payment integration with QR generation, screenshot upload, and Supabase Storage
• Three-layer validation: frontend regex, Supabase Edge Function, and PostgreSQL constraints
• Automated dual emails via EmailJS — participant confirmation and admin notification
• PIN-protected admin terminal with live stats, search/filter, Excel/CSV export
• WCAG AA accessible with keyboard navigation, ARIA roles, and reduced-motion support

Built with: HTML5, CSS3 (Custom Properties), Vanilla JavaScript, Supabase (Database + Storage + Edge Functions), EmailJS, QRCode.js, Google Fonts (Orbitron, DM Mono, Rajdhani).

Architecture

📁 Repository structure

INNOVATEX/
├── index.html              # Registration form — Clearance Protocol UI
├── admin.html              # Admin Terminal — PIN-protected dashboard
├── app.js                  # Application logic — validation, state, submissions
├── styles.css              # Design system — custom properties, animations, responsive
├── logo.jpeg               # MET E-Cell brand mark
├── package-lock.json        # Dependency lock (CDN-based, no build step)
└── docs/
    ├── innovatex-design-concept.md   # Full UX/UI design concept document
    ├── component-specs.md            # Developer-ready component specifications
    ├── DEPLOYMENT_GUIDE.md           # Edge Function + DB migration guide
    ├── input-validation-guide.md     # Validation architecture documentation
    └── motion-guide.md              # Animation system and motion principles

User fills form
    │
    ▼
┌──────────────────────────────┐
│  FRONTEND (app.js)           │
│  • HTML5 required/pattern    │
│  • Regex on blur + submit    │
│  • Inline error messages     │
│  • XSS sanitization          │
└───────────┬──────────────────┘
            │ fetch() POST
            ▼
┌──────────────────────────────┐
│  EDGE FUNCTION (register)    │
│  • Rate limit (5/min/IP)     │
│  • Re-validate ALL fields    │
│  • Normalize (trim, lower)   │
│  • Strip HTML                │
│  • Check duplicate email     │
│  • 400/409/429/200 responses │
└───────────┬──────────────────┘
            │ Parameterized INSERT
            ▼
┌──────────────────────────────┐
│  DATABASE (PostgreSQL)       │
│  • NOT NULL constraints      │
│  • UNIQUE email + reg_id     │
│  • CHECK format/length       │
│  • VARCHAR limits            │
│  • RLS: restrict access      │
└──────────────────────────────┘

Development Phases

Phase	Goal	Status	Outcome
v0.1 — Foundation	Scaffold form layout, load fonts, define CSS custom properties, build signal trace and ambient canvas	✅ Done	Core visual system and 4-section scroll container operational
v0.2 — Interactions	Solo ↔ Team toggle, section seal/reveal transitions, member card assembly/collapse	✅ Done	Full interaction choreography with lateral morphs and staggered animations
v0.3 — Smart Behaviors	College autocomplete, skill tag cloud, autofill detection, contextual hints, source prompts	✅ Done	Adaptive form reduces friction and boosts completion rate
v0.4 — Validation	Three-layer validation (frontend, Edge Function, DB), blur validation, XSS sanitization	✅ Done	Production-grade data integrity with user-friendly error recovery
v0.5 — Emails & Submit	EmailJS integration, submit choreography, success bloom, character-by-character ID reveal	✅ Done	Dual email dispatch (user + admin) with graceful fallback on failure
v0.6 — Admin Terminal	PIN-auth dashboard, live stats, search/filter/sort, expandable detail rows, Excel/CSV export	✅ Done	Full operational control panel for event organizers
v0.7 — Payments	UPI QR generation, screenshot upload to Supabase Storage, payment verification workflow	✅ Done	End-to-end payment capture with admin-side verify/pending badges
v0.8 — Polish	Accessibility audit, mobile responsiveness, reduced-motion support, error message UX overhaul	✅ Done	WCAG AA compliant, tested at 375px–1440px viewports

Note: Status indicators follow the convention: ✅ Complete · 🔄 In Progress · 🗓 Planned.

Capstone Highlight

Zero-dependency frontend — no build step, no framework, ships as static HTML/CSS/JS Three-layer validation catches malformed data at every boundary (client → Edge Function → DB) Smart fallback: if the Edge Function is unavailable, the form gracefully degrades to direct Supabase insert Ambient canvas renders 40 circuit nodes at ~0.8ms/frame with 2D API — no WebGL overhead All motion via transform and opacity only — zero layout thrashing User-friendly error classifier translates raw DB codes (23505, 429) into actionable plain-language messages Dual-path email system: EmailJS fires user + admin emails in parallel with non-blocking failure handling

Getting Started

Prerequisites

• A modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
• A Supabase project with a PostgreSQL database
• An EmailJS account with configured service and templates
• A UPI ID for payment collection (GPay, PhonePe, Paytm, or BHIM compatible)

Installation

# Clone the repository
git clone https://github.com/Relvixx/INNOVATEX.git
cd INNOVATEX

# No build step required — open index.html directly or serve with any static server
# Option A: Python
python -m http.server 8000

# Option B: Node.js (npx)
npx serve .

# Option C: VS Code Live Server extension
# Right-click index.html → "Open with Live Server"

Environment Variables

The application uses inline configuration constants rather than .env files. Update these values directly in the source files before deployment:

Variable	Description	Required
SUPABASE_URL	Supabase project URL (in app.js line 7 and admin.html)	Yes
SUPABASE_ANON	Supabase anonymous/public API key (in app.js line 8 and admin.html)	Yes
EJ.publicKey	EmailJS public key for client-side email dispatch	Yes
EJ.serviceId	EmailJS service ID linked to your email provider	Yes
EJ.userTemplateId	EmailJS template ID for participant confirmation emails	Yes
EJ.adminTemplateId	EmailJS template ID for admin notification emails	Yes
EJ.adminEmail	Admin email address for receiving registration alerts	Yes
UPI.id	UPI ID for payment collection (e.g., ecellmet@okaxis)	Yes
ADMIN_PIN	PIN for admin dashboard access (in admin.html)	Yes
SUPABASE_SERVICE_ROLE_KEY	Service role key — set as Edge Function secret, never in frontend	Yes

Usage

# Serve the registration form locally
python -m http.server 8000
# Open http://localhost:8000 in your browser

# Access the admin dashboard
# Navigate to http://localhost:8000/admin.html
# Enter the configured ADMIN_PIN to authenticate

# Deploy the Edge Function (no CLI required)
# 1. Open Supabase Dashboard → Edge Functions → New Function
# 2. Name: "register"
# 3. Paste the Edge Function code and deploy
# 4. Set SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY as secrets

# Run the database migration
# 1. Open Supabase Dashboard → SQL Editor
# 2. Execute the migration script from docs/DEPLOYMENT_GUIDE.md

Tip

The frontend includes a smart fallback: if the Edge Function is not yet deployed or becomes temporarily unavailable, the form automatically falls back to a direct Supabase insert via the anonymous key. Deploy the Edge Function when ready — the form works either way.

Testing

# Test the Edge Function endpoint with cURL
curl -X POST https://YOUR_SUPABASE_URL/functions/v1/register \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_ANON_KEY" \
  -d '{
    "first_name": "Test",
    "last_name": "User",
    "email": "test@example.com",
    "phone": "9876543210",
    "year_of_study": "2nd Year",
    "college": "MET Bhujbal Knowledge City",
    "department": "Computer Engineering",
    "participation_type": "individual",
    "skills": "Frontend, Design",
    "source": "Instagram (@ecell_met)"
  }'

Note

Expected responses: 200 (success), 400 (validation error with specific message), 409 (duplicate email), 429 (rate limited). Verify database constraints by running SELECT conname, contype, pg_get_constraintdef(oid) FROM pg_constraint WHERE conrelid = 'innovatex_registrations'::regclass; in the Supabase SQL Editor.

Engineering Notes

Note

Deliberate zero-framework architecture. The entire frontend is vanilla HTML/CSS/JS with no build tooling, bundlers, or framework dependencies. This eliminates supply-chain risk, keeps deployment trivial (static file hosting), and ensures the 2D ambient canvas runs within a strict ~0.8ms/frame performance budget. The trade-off is manual DOM management in app.js, but for a form-centric application with a finite UI surface, this is the correct call.

Important

The Supabase anonymous key is embedded in client-side JavaScript. This is by design — the anonymous key is rate-limited and scoped by Row Level Security (RLS) policies that permit insert-only access with no read capability. The service_role key must never appear in frontend code; it is configured exclusively as an Edge Function secret. Before first deployment, run the RLS policy SQL from docs/DEPLOYMENT_GUIDE.md to lock down read access.

Warning

The ADMIN_PIN in admin.html is a client-side gate, not a security boundary. It prevents casual access but does not protect against a determined actor inspecting the source. The admin dashboard reads data via the Supabase anonymous key with an admin_read RLS policy. For production use with sensitive participant data, replace the PIN gate with Supabase Auth (Magic Link or OAuth) and enforce server-side role checks.

Known Limitations

• Admin authentication is client-side PIN only — not suitable for high-security environments without Supabase Auth integration
• Payment verification is manual (admin marks as verified) — no automated UPI webhook confirmation
• College autocomplete is a hardcoded list of ~50 Maharashtra institutions — does not cover all Indian colleges
• Email delivery depends on EmailJS free-tier limits (200 emails/month) — upgrade for large-scale events
• The ambient canvas and animations have no performance throttling on low-end mobile devices beyond prefers-reduced-motion

Roadmap

• Replace client-side PIN with Supabase Auth (Magic Link) for admin access
• Integrate UPI payment gateway webhook for automated verification
• Add real-time participant counter on the registration page
• Implement waitlist system when registration cap is reached
• Build a post-event feedback form linked to registration IDs
• Add multi-event support — reuse the system for future E-Cell events
• Generate PDF certificates tied to registration IDs after event completion

Contributing

Fork the repository, create a feature branch, and open a pull request against main. Keep commits atomic and descriptive. Follow the existing code style: vanilla JS with JSDoc comments, CSS custom properties for all design tokens, and semantic HTML with ARIA attributes.

Important

Run the full Edge Function test suite (see Testing) and verify the admin dashboard renders correctly before opening a PR. Ensure all new form fields include proper aria-describedby error associations and blur validation rules.

License

Distributed under the MIT License. See LICENSE for full terms.

_{Created by Relvixx — InnovateX 2026 — © 2026}