HomeProjectsPeerHive (UniHub)
Frontend2024 - 2025

PeerHive (UniHub)

Modern web platform connecting students, alumni, and admins via forums, collaborative spaces, and resources with an advanced custom UI component system.

React 19React Router v7ZustandTanStack QueryTailwind CSS v4Radix UIFramer Motion

The Problem

Fragmented Campus Communication & Resource Sharing

University ecosystems often suffer from fragmented communication channels where students, alumni, and administrators struggle to share resources, post work opportunities, and collaborate efficiently. Creating a unified platform requires handling complex hierarchical data (forums, subforums, nested comments) and strictly separating roles (student, alumni, admin) while maintaining a high-performance, accessible, and intuitive user interface.

The Solution

Scalable Frontend Architecture with Custom UI System

Architected the entire frontend from scratch utilizing React 19, a custom Radix UI-based component library, and robust state management via Zustand and TanStack Query.

Key Technical Decisions

01Engineered a custom, accessible UI library utilizing Radix UI and Tailwind CSS v4, resulting in 46 distinct, highly reusable components including modals, dropdowns, and command palettes.
02Built a stateful, generic API interceptor (450+ lines) featuring automated HTTP-only JWT token refreshing, ensuring seamless user sessions without disrupting active requests.
03Orchestrated complex client and server state by leveraging Zustand for global UI state (e.g., interactive TutorialTours) and TanStack React Query for memoized, aggressively cached data fetching.
04Integrated highly nested data structures supporting infinite-depth comment threads and categorized forum hierarchies, ensuring fast renders through pagination and efficient component updates.
05Enforced strict end-to-end type safety using TypeScript 5.8 and ensured zero-runtime-error data submissions with React Hook Form coupled with Zod schema validation.
06Designed a fully fluid, responsive layout separating mobile views (BottomNav, MobileDrawer) from desktop layouts (LeftSidebar) to improve re-render efficiency by over 50%.

Impact & Results

46

UI Components

15+

API Endpoints

Infinite Depth

Threading

3

Role Types

High-Performance Unified Platform

PeerHive successfully unifies campus interactions through 8 comprehensive views and highly dynamic features like the Work Request Panel and dense Resource sharing pages. By aggressively memoizing API responses and abstracting complex logic into custom hooks and fetch wrappers, the application delivers near-instant navigation and a premium user experience free of technical debt.

Key Learnings

01

Custom fetch wrappers provide immense control — implementing silent token refresh logic inside the network layer prevents unexpected user logouts and creates a frictionless SPA experience.

02

TanStack Query drastically reduces boilerplate — replacing manual useEffect data fetching with React Query eliminated redundant network waterfalls and significantly sped up navigation between subforums.

03

Separating layout from content is vital for performance — isolating heavy components like Sidebars and Bottom Navigations into distinct layout wrappers prevented unnecessary re-renders across the 8 primary views.

Tech Stack

react
tailwind
Previous Project

Angular RBAC Records Dashboard

Next Project

Retrova - Vintage Audio Gear Showcase