JoinTree: Institutional 3D Procedural Campus Network

Executive Genesis, Problem Statement & Institutional Mission

In modern collegiate environments, academic resources, communication channels, and institutional hierarchies are notoriously fragmented. Students rely on transient, unmoderated WhatsApp group chats, physical paper notice boards, and disconnected cloud folders to access notes, syllabus updates, and circulars. This results in information asymmetry, lost circulars, and a complete absence of institutional memory across graduating batches.

The Four Fatal Flaws of Existing Campus Solutions

Theoretical Foundations: Algorithmic Botany & L-Systems

Unlike ordinary web projects that download static 3D models or third-party graphic widgets, JoinTree is grounded in the foundational computer science principles of Algorithmic Botany established by biologist Aristid Lindenmayer (1968) and formalized by Prof. Przemyslaw Prusinkiewicz et al. in the landmark treatise "The Algorithmic Beauty of Plants" and the referenced University of Calgary research paper "Modeling plant development with L-systems".

// Rodrigues rotation of vector v around unit axis k by radians
const rot = (v: Vec3, k: Vec3, rad: number): Vec3 => {
  const c = Math.cos(rad);
  const s = Math.sin(rad);
  return add(add(scl(v, c), scl(crs(k, v), s)), scl(k, dot(k, v) * (1 - c)));
};

// Deterministic 32-bit PRNG (Mulberry32)
function mulberry32(seed: number) {
  let a = seed >>> 0;
  return () => {
    a |= 0;
    a = (a + 0x6d2b79f5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

Full-Stack System Architecture & Engineering Stack

JoinTree is engineered as a monolithic full-stack application leveraging the cutting edge of modern web development: Next.js 16 (App Router), React 19, TypeScript, Prisma ORM, and SQLite.

Trade-Off Analysis: Custom Canvas 2D Engine vs Three.js

Database Engineering & Entity-Relationship Schema (12 Models)

The data persistence layer is governed by Prisma ORM 6 targeting an embedded SQLite relational database. The schema defines 12 models with strict referential integrity, cascading deletes, and optimized B-tree indexes.

model Course {
  id         String    @id @default(cuid())
  name       String    // e.g., "BCA 2024-25"
  batchYear  Int
  color      String    @default("#2e6fd1")
  order      Int       @default(0)
  department String    @default("General")
  createdAt  DateTime  @default(now())
  students   Student[]
}

model Student {
  id        String   @id @default(cuid())
  name      String
  rollNo    String   @unique
  role      String   @default("Student")
  status    String   @default("Active")
  isSample  Boolean  @default(false)
  courseId  String
  course    Course   @relation(fields: [courseId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([courseId])
}

model User {
  id         String   @id @default(cuid())
  name       String
  email      String   @unique
  password   String   // SHA-256 hashed
  role       String   @default("Student") // Student | Teacher | Director | Admin
  status     String   @default("Active")  // Active | Pending | Rejected | Inactive
  rollNumber String?
  department String?
  idCard     String?  // base64 dataURL uploaded during registration
  createdAt  DateTime @default(now())
}

The 12 Schema Entities at a Glance

The 3D Procedural Tree Engine Deep Dive

The procedural visualization engine is split into two specialized modules: src/lib/lsystem.ts (computes botanical geometry in 3D world coordinates) and src/lib/tree-render.ts (projects 3D coordinates onto a 2D Canvas with depth sorting and mouse picking).

export function projectTree(tree: Tree, yawDeg: number, pitchDeg: number, out?: Projected): Projected {
  const cy = Math.cos((yawDeg * Math.PI) / 180);
  const sy = Math.sin((yawDeg * Math.PI) / 180);
  const cp = Math.cos((pitchDeg * Math.PI) / 180);
  const sp = Math.sin((pitchDeg * Math.PI) / 180);

  for (let i = 0; i < segCount; i++) {
    const s = tree.segments[i];
    // Yaw rotation around Y axis
    const ax = s.a.x * cy + s.a.z * sy;
    const az = -s.a.x * sy + s.a.z * cy;
    // Pitch rotation around X axis
    const ay = -(s.a.y * cp - az * sp);
    ...
  }
}

Zero-Allocation Rendering via Typed Arrays

To prevent JavaScript Garbage Collection (GC) pauses while the user is actively rotating the tree at 60 FPS, all projected segment coordinates are packed into contiguous Float32Array buffers:

• seg: Float32Array(segCount * 6) — stores [ax, ay, bx, by, width, depth].
• leaf: Float32Array(leafCount * 5) — stores [x, y, size, shade, course].

Authentication, Authorization & Role-Based Security (RBAC)

JoinTree enforces strict four-tier Role-Based Access Control: Student, Teacher, Director, and Admin.

Academic Resource Hub & In-Browser PDF Previewer

Located at /notes, the Resource Hub enables students and faculty to upload and retrieve study materials, past question papers, and syllabus schemes categorized by Department and Semester (1 to 6).

Key Architectural Features

• In-Browser Streaming: Small documents and previews are streamed as base64 DataURLs directly inside an HTML5 <iframe> or <object> element, enabling instant reading without forcing phone memory downloads.
• Client-Side Multi-Filter: Filter instantaneously across courses (BCA / BBA / B.Com) and semesters without waiting for full page reloads.
• Visibility Controls: Notes can be flagged as Internal (registered college students only) or Public.

Institutional Bulletin & Campus Desk

The official bulletin board at /announcements eliminates casual chat clutter. Only authorized staff (Teachers, Directors, Admins) possess the cryptographic permissions to broadcast notices.

Administration, Governance & Audit Logging

The Admin Portal at /admin serves as the central command desk for college management.

Administrative Modules

1. User Verification Queue: Review pending registrations, zoom into uploaded college ID card badges, and approve or reject accounts.
2. Student Roster Management: Add or remove students from courses, with instantaneous visual reflection on the 3D tree.
3. Audit Logging: Every action taken by an admin is recorded in the ModerationLog table with actor ID, target entity, timestamp, and justification reason.
4. Bug Telemetry Desk: Collects unhandled client exceptions and PDF rendering errors, logging user agent, OS, and stack traces into the BugReport table for rapid bug resolution.

Progressive Web App (PWA) & Native OS Platform Integration

To ensure JoinTree feels like an app downloaded from Google Play or the Microsoft Store rather than a simple webpage, we implemented modern PWA standards and native platform adapters.

Key Components

• Web App Manifest (public/manifest.json): Configures display: "standalone", theme color #0f172a, and multi-resolution launcher icons.
• Service Worker (public/sw.js): Implements a stale-while-revalidate strategy for static resources, pre-caches essential UI components, and serves an offline fallback page (/offline) during campus network outages.
• Native Platform Provider (src/components/native-platform-provider.tsx): Hooks into the browser's navigator.vibrate() API to deliver subtle tactile haptic pulses on Android touch interactions, and injects Windows Fluent Mica/Acrylic translucent CSS styling on desktop operating systems.

End-to-End RESTful API Specification

The backend exposes 18 modular API endpoints implemented in Next.js Serverless Route Handlers:

Comprehensive Viva Defense Guide & Faculty Examination Checklist

Below are the top questions frequently posed by computer science viva panels, along with comprehensive, mathematically sound model answers.