Smart Link Hub: The Context-Aware Identity Ecosystem 🚀

Official Entry: IIT Ropar TechFest 2026 - JPD Hub Hackathon

https://youtu.be/3WpFdqcLOwE ---> Youtube Link

"One link to rule every click." — Smart Link Hub is an intelligent digital ecosystem that adapts to the visitor's intent, environment, and behavior using real-time algorithmic decision-making.

---

🏛️ The IIT Ropar Challenge: Problem Statement Analysis

This project was engineered to solve the core requirements of the IIT Ropar JPD Hub Hackathon 2026. The challenge was to move beyond static link aggregators and create a system that understands Context and Intent.

Mandatory Requirements Met:

• ✅ Dynamic Context-Awareness: Adaptive link ordering based on visitor data (Device, Time, Geo).
• ✅ AI Rule Synthesis: Converting natural language into complex logic via Groq/Gemini.
• ✅ High-Fidelity UI: Five distinct "Visual Universes" with premium aesthetics and GPU-accelerated effects.
• ✅ Deep Analytics: Real-time tracking of visits, clicks, and conversion trends.
• ✅ Scalable Architecture: Production-grade monorepo system with shared type-safety.

---

🏛️ Project Architecture & Structure

This project is built as a High-Performance Monorepo using TurboRepo, ensuring maximum code reuse and hyper-efficient build pipelines.

smart-link-hub/
├── apps/
│   ├── web/                # Next.js 14 App Router (Frontend)
│   │   ├── src/app/        # Core Pages & Layouts
│   │   ├── src/components/ # Atomic UI Design System
│   │   └── src/lib/        # Frontend API Clients & Utils
│   └── api/                # Express.js (Backend)
│       ├── src/lib/        # Rule Engine (UCB1 Algorithm)
│       ├── src/routes/     # RESTful Endpoints
│       ├── src/services/   # Business Logic (AI, Analytics)
│       └── prisma/         # PostgreSQL Schema & Migrations
├── packages/
│   └── shared/             # Zod Schemas & TypeScript Interfaces (Type-Safe Bridge)
├── run_local.bat           # Windows Automation Script
└── vercel.json             # Serverless Deployment Config

---

🦾 The "Winning Edge" Features

1. AI-Powered Logic Synthesis (Magic Rule) ✨

Creators don't write JSON; they describe their needs in English. Our Hybrid AI Layer converts prompts like "Show my portfolio only on weekdays for recruiters from the US" into valid, validated code.

• Groq (Llama 3.3): Ultra-low latency logic parsing (<300ms).
• Gemini 1.5 Flash: Orchestrates complex multi-intent analysis.

2. Algorithmic Relevance (Smart Sort)

We implemented the UCB1 (Upper Confidence Bound) algorithm, typically found in professional recommendation engines.

• Exploitation: Boosts links with high historical CTR.
• Exploration: Systematically tests new links to ensure they aren't buried.
• Formula: Relevance = CTR + 2.0 * sqrt(ln(TotalVisits) / LinkVisits)

3. The 5 Immersive Visual Universes

Using a centralized Design System in globals.css, we created:

• 🟢 Neo-Brutalism: Retro-bold, high-contrast borders, and isometric 3D transforms.
• 🧊 Liquid Glass: Light refraction using organic SVG morphing and deep blurs.
• 🧸 Claymorphism: Tactile inflated UI with squishy spring physics.
• ⚙️ Skeuomorphism: Industrial shaders simulating brushed aluminum and carbon fiber.
• ❄️ Minimal Glass: Clean frosted glass with backend green aura glows.

---

🛠️ Full Technology Stack (Granular)

Component	Technology	Role
Monorepo	TurboRepo	Orchestration & Build Caching
Frontend	Next.js 14, React 18	App Router, SSR, Framer Motion
Backend	Node.js, Express	RESTful API, UCB1 Engine
Database	PostgreSQL, Prisma	Relational Mastery & Schema Versioning
AI Layer	Groq + Gemini 1.5	Real-time Logic Processing
Animation	Framer Motion	Physics-based UI & Transitions
Analytics	Recharts, UA-Parser	Engagement Telemetry & Visualization
Security	JWT, bcryptjs, Helmet	Auth & Payload Protection
Validation	Zod	End-to-end Type-safety

---

🗺️ System Data Flow

graph TD
    User((Visitor)) --> Web(Next.js App)
    Web --> API(Express API)
    API --> RuleEngine(Smart Rule Engine)
    RuleEngine --> UCB1(UCB1 Algorithm)
    RuleEngine --> AI(Groq/Gemini AI)
    API --> DB[(PostgreSQL)]
    DB --> Prisma(Prisma ORM)
    Web --> Analytics(Recharts Dashboard)

Loading

---

🚀 Execution & Setup Guide

⚡ Automated Local Startup (Windows)

We provide a zero-configuration run_local.bat script for high-speed setup.

1. Double-click run_local.bat in the root directory.
2. The Script will automatically:
   • Check for Node.js installation.
   • Detect or copy the root .env to the API package.
   • Install all root and workspace dependencies via npm install.
   • Build the @smart-link-hub/shared package (The Type-Safe Bridge).
   • Generate the Prisma Client and offer to Push/Seed the database.
   • Launch both the Frontend (3000) and Backend (3001) simultaneously using concurrently.

🖥️ Manual Local Development (Cross-Platform)

1. Installation: npm install (Installs dependencies for all monorepo apps).
2. Build Shared Library: npm run build -w packages/shared (Crucial for workspace type-safety).
3. Database Layer: npm run db:generate & npm run db:migrate in the root (Or inside apps/api).
4. Parallel Execution: npm run dev (Runs both API and Web using a single process manager).

---

🌐 Deployment Architecture

The platform is built for a distributed, high-performance production ecosystem:

• Frontend (Vercel): Hosted on the Edge for sub-100ms LCP globally.
• Backend API (Railway/Render): Deployed as a persistent Node.js process to handle real-time rule evaluation and heavy AI inference via Groq/Gemini.
• Database (PostgreSQL): Utilizing Neon (Serverless Postgres) or Supabase for elastic scaling and relational integrity.
• Domain Orchestration: Managed via Vercel Rewrites (vercel.json) to serve the API from /api/* on the same origin as the frontend, bypassing CORS overhead.

---

🛡️ Security, Privacy & Performance

• Privacy: 100% IP-anonymization via SHA-256 hashing for all analytics telemetry.
• Efficiency: Multi-layer caching at the Prisma and In-Memory levels for viral traffic spikes.
• GPU-Acceleration: Premium background effects (3D Orbs, Liquid Glass) are offloaded to the GPU to ensure 60FPS on any modern browser.

---

Submitted for IIT Ropar TechFest 2026.