DeskGuard

A real-time 3D spatial twin and automated presence ledger that stops desk hoarding and ensures fair seat access in modern libraries.

Comment

DeskGuard: Fair Seat Access & Spatial Intelligence for Libraries

Inspiration

During midterms and finals, university libraries turn into battlegrounds. Students scramble to find open pods or quiet study desks, only to find dozens of workspaces "reserved" by empty chairs, backpacks, and stacks of books. This phenomenon—desk hoarding—wastes valuable campus resources and creates massive friction for students who actually need to study.

We were inspired to build DeskGuard to solve this social-use dilemma. By combining a real-time WebGL 3D digital twin of the library floor with automated, database-driven sweep policies, we wanted to ensure that desks are distributed fairly, transparently, and dynamically.

What it does

DeskGuard is a spatial intelligence platform that tracks and optimizes library seat utilization:

  1. Real-Time 3D Floor Ledger: Students and staff access a high-performance WebGL digital twin of the library floor. Desk markers change colors in real-time based on occupancy state:
    • 🟢 Free: Available for check-in.
    • 🔴 Occupied: In-use by an active student.
    • 🟡 Away: The student is on a brief break.
    • 🟣 Abandoned: Flagged for reclaiming.
  2. Automated Sweep Daemon: If a student changes their status to "Away" (e.g. to grab lunch), a background cron job begins counting down. If the desk is left unattended for longer than the grace threshold (T_max), the system automatically reclaims the seat and releases it back to the available pool.
  3. Presence Checks: Interactive "Still Here?" verification prompts check on long study sessions, requiring students to verify they are still physically present.
  4. QR Code Check-In: Students scan a physical QR code at their desk (or simulate it) to sync their session and verify their presence.
  5. Librarian Command Center: Administrators can manually release hoarded seats, audit active sessions, view event logs, and review overall floor utilization statistics.

How we built it

DeskGuard is built as a highly responsive Single Page Application (SPA):

  • Frontend Core: React 18, React Router (with Auth protected route guards), and Context APIs for state synchronization.
  • 3D Graphics Engine: Three.js (WebGL rendering) with OrbitControls, directional lighting, custom geometries, and custom Raycasting hover hitboxes to detect desk clicks.
  • Database & Real-timeSync: Supabase PostgreSQL database integrated with Real-time Postgres Changes WebSockets to broadcast seat status updates instantly to all connected users.
  • Identity & Auth: Google OAuth via Supabase Auth, with role-based database lookups to automatically route users to Student or Librarian dashboards.
  • QR Code Verification: Web camera integration via the html5-qrcode library.
  • Theme & CSS: Custom vanilla CSS styling featuring glassmorphism cards, floating 3D dashboard panels, custom scrollbars, and entrance animations.

📐 Mathematical Formulation of Seat Efficiency

Let S_total be the total number of desks on the library floor, and S_hoarded(t) be the number of desks hoarded by students (reserved with belongings but empty) at time t.

In traditional libraries, hoarded desks are visually marked as occupied but provide 0 actual utility. We define the True Space Utility, U_true(t), of the library as:

U_true(t) = [ S_occupied(t) + S_away(t) - S_hoarded(t) ] / S_total

DeskGuard introduces a background sweep daemon checking the inactivity timer T_i for each desk S_i currently in the away state. If the student does not verify presence before the max threshold T_max = 20 minutes, the seat state transitions back to free:

State(S_i) = * Free (if T_i ≥ T_max)

  • Away (if T_i < T_max)

By enforcing these automated reclaims, DeskGuard ensures that the hoarding rate converges to zero:

lim (t → ∞) S_hoarded(t) = 0

which optimizes the library's true utility, ensuring U_true(t) → U(t).

Challenges we ran into

  1. WebGL Mobile Constraints: Rendering complex 3D scenes on mobile devices can cause performance bottlenecks and memory throttling. We optimized this by applying layout zoom levels (zoom: 0.8) on smaller viewports and introducing WebGL browser warnings advising users to access the maps on desktop systems.
  2. SPA Client Routing 404s: Direct routes (like /signin or OAuth returns) deployed on Vercel triggered server-side 404: NOT_FOUND errors. We resolved this by implementing custom redirection rewrite rules inside a root vercel.json file.
  3. Supabase Redirect Flicker: A brief visual flash of the login page occurred when Google OAuth redirected back. We resolved this by pre-setting authentication tokens in localStorage immediately upon Google clicks to render the loading splash screen instantly.
  4. Three.js to React Sync: Syncing Three.js mesh colors with Supabase real-time updates without re-instantiating the WebGL canvas was challenging. We solved this by separating the 3D renderer state from React rendering, updating mesh colors dynamically in-place via object names.

Accomplishments that we're proud of

  • Interactive 2-Column Hero Landing: Redesigned the homepage hero section into a premium layout featuring a live metrics panel and an automated real-time terminal logger simulating ledger sweep sweeps.
  • Google OAuth Integration: Built a robust authentication cycle routing students to spatial maps and librarians to dashboard views instantly.
  • Pixel-Perfect 3D Twin: Implemented a responsive WebGL floor map rendering plants, desks, lights, and color states dynamically.

What we learned

We learned the importance of Spatial Databases and WebSockets in creating seamless IoT-style dashboards. Building DeskGuard taught us how to couple heavy 3D client-side WebGL canvasses with fast, lightweight backend databases, optimizing render cycles, and ensuring layout responsiveness across mobile and desktop breakpoints.

What's next for DeskGuard

  • IoT Weight/Presence Sensors: Integrate under-seat pressure mats or desk weight sensors to automatically set desks to occupied or away states without manual check-ins.
  • Multi-Floor Support: Scale the WebGL engine to render high-rise multi-floor library structures.
  • Study Group Booking: Allow students to link multiple profiles to book collaborative study pods simultaneously.

Built With

Share this project:

Updates