IIT Dharwad IRO Web Portal

Comprehensive web portal with a 3-tier role-based routing system, fluid page transitions, and an integrated Admin CMS for managing international programs.

React 19React Router v7ViteTailwind CSS v4Shadcn UIFramer MotionBarba.js

Live Demo Source Code

The Problem

Scattered Data & Manual Application Overheads

IIT Dharwad's International Relations Office required a centralized platform to manage global collaborations, student exchanges, and public information. Relying on scattered university sites and manual paper-based application pipelines caused administrative bottlenecks. The solution needed a premium, highly performant frontend that could seamlessly handle public information routing, secure student OAuth onboarding, and an expansive Admin CMS for dynamic content management without refreshing the page.

The Solution

3-Tier Role-Based SPA with Fluid Transitions

Engineered a highly performant Single Page Application utilizing React 19 and React Router v7, featuring a custom Barba.js transition engine and a decoupled Context-based state architecture.

Key Technical Decisions

01Architected a robust 3-tier role-based routing system (Public, Student OAuth, Admin JWT) utilizing React Router v7 to strictly gate access to 12+ CRUD dashboards and application tracking pipelines.

02Engineered a custom page transition engine utilizing Barba.js and Framer Motion, hijacking anchor clicks to trigger a state-machine based 'curtain' loader, masking network delays and providing a premium SPA experience.

03Eliminated heavy state-management boilerplate (like Redux) by implementing a decoupled React Context API architecture (AuthContext, StudentAuthContext, SiteContentContext) to serve as a lightweight frontend CMS cache.

04Built a secure, centralized Axios API client featuring automated JWT injection, cache-busting logic for Admin GET requests, and a silent background token-refresh mechanism via HTTP-only cookies to prevent session drops.

05Integrated Shadcn UI and Radix UI with Tailwind CSS v4, utilizing clsx and tailwind-merge to build a highly accessible, fast-rendering component library with modern variable fonts (@fontsource-variable/geist) to minimize layout shifts.

06Streamlined student onboarding by integrating Google OAuth (@react-oauth/google) and built complex multi-step application workflows with live status tracking interfaces.

Impact & Results

Role Tiers

12+

Admin Dashboards

Barba.js

Transitions

JWT + OAuth

Auth Flow

Streamlined Operations & Premium UX

The newly deployed IRO portal completely transformed the digital presence of the department. By decoupling hardcoded content and providing a comprehensive Admin CMS utilizing react-quill-new, administrators can now manage site content instantly. The fluid Barba.js transitions combined with Locomotive Scroll delivered a high-end, stutter-free browsing experience that drastically cut user load latency and administrative inquiry overheads.

Key Learnings

Silent token refresh using HTTP-only cookies is critical for secure SPAs — intercepting 401 errors globally via Axios prevents disruptive forced logouts and protects against XSS vulnerabilities.

Cache-busting dynamic API routes (like Admin dashboards) is essential when utilizing global Context providers, ensuring users never see stale data without relying on heavy libraries like React Query.

Tech Stack

Previous Project

Harshtal - Japanese Cultural Festival Portal

Next Project