DeskGuard: Spatial Intelligence for Library Seat Utilization

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:

• 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: 🟢 Free, 🔴 Occupied, 🟡 Away, and 🟣 Abandoned.
• Automated Sweep Daemon: If a student changes their status to "Away", a background cron job begins counting down. If left unattended longer than the grace threshold, the system reclaims the seat.
• Presence Checks: Interactive "Still Here?" verification prompts check on long study sessions, requiring physical presence verification.
• QR Code Check-In: Students scan a physical QR code at their desk to sync their session and verify their presence.
• Librarian Command Center: Administrators can manually release hoarded seats, audit active sessions, view event logs, and review floor utilization statistics.

How we built it

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

📐 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) = \frac{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\text{ minutes}$, the seat state transitions back to free:

$$\text{State}(S_i) = \begin{cases} \text{Free} & \text{if } T_i \ge T_{max} \ \text{Away} & \text{if } T_i < T_{max} \end{cases}$$

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

$$\lim_{t \to \infty} S_{hoarded}(t) = 0$$

which optimizes the library's true utility, ensuring $U_{true}(t) \to U(t)$.

Challenges we ran into

• WebGL Mobile Constraints: Rendering complex 3D scenes on mobile devices caused performance bottlenecks. We optimized this by applying layout zoom levels (zoom: 0.8) on smaller viewports and introducing browser warnings advising desktop use.
• SPA Client Routing 404s: Direct routes 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.
• Supabase Redirect Flicker: A brief flash of the login page occurred during Google OAuth redirection. We resolved this by pre-setting authentication tokens in localStorage immediately upon Google clicks.
• Three.js to React Sync: Syncing Three.js mesh colors with Supabase real-time updates without re-instantiating the WebGL canvas was challenging. We separated 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 a real-time terminal logger simulating ledger 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 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.
• 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

• react
• supabase
• three.js
• vercel
• vite