Finding a quiet place to study around a bustling engineering college campus like BITS Pilani K.K. Birla Goa Campus (BPGC) shouldn’t require an impromptu scavenger hunt. However, one of the biggest daily problems my friends and I faced was simply not knowing which lecture halls were free at any given time.
Sometimes I’d pack up all my study materials, walk across the entire expansive campus in the blistering sun, only to open a massive lecture hall door and realize an ongoing tutorial was happening. I would then repeat this cycle—guessing and checking—until I stumbled upon an empty room by sheer luck.
To fix this infuriating and time-consuming process, I created the BPGC Class Finder. This is the development story behind a deeply data-driven utility app designed to completely erase the guesswork of campus studying.
The Root Problem: The Timetable Disconnect
The schedule of every single course and available lecture hall existed, but it was incredibly poorly formatted for immediate, contextual consumption. If it was a Tuesday at 3:00 PM, finding an open room required you to manually cross-reference 40+ distinct hall schedules, accounting for odd/even lab rotations, tutorials, and club bookings.
Ingesting and Normalizing the Schedule
The very first foundational step of the solution inherently involved data engineering. I ingested the campus-wide schedule of all classes and normalized it into a structured, unified JSON dataset (free_schedule.json).
This file acted as my central truth engine containing:
- Every lecture hall identifier (e.g., A101, C204).
- A day-by-day availability matrix.
- Hour-by-hour status flags for each hall.
I constructed the web app interface using Next.js 14 App Router routing for robust modern React performance.
Note
The Motivation: The immediate goal of this web app was simple: tell the user which classrooms are completely empty right now, or when a specifically targeted classroom would be free later that day, instantly.
Clean Data, Clean Interface Architecture
The logic behind the app is heavily driven by date-fns, handling the complex date/time formatting.
The application logic revolves around two vital utility scripts:
app/utils/dateUtils.js: Converts the current device time into matching schedule hours, accurately mapping incoming current-day arrays into human-readable parameters.app/utils/locationUtils.js: Computes the free rooms directly from the loadedfree_schedule.json.
export const determineAvailability = (schedule, selectedDay, selectedHour) => { // Parses the entire JSON tree instantly filtering down halls // returning an array of available hall IDs for the precise hour. return schedule.halls.filter( (hall) => hall.availability[selectedDay][selectedHour] === 'FREE', )}The Component UI Strategy
I didn’t want the interface to look like a boring spreadsheet. The app is built entirely with React 18 and Tailwind CSS.
The presentation layout was split logically into powerful, reusable features using a shadcn-style component library powered by headless Radix UI primitives:
- FreeHallsCard (
components/FreeHallsCard.jsx): The immediate dashboard view. It parses the time selection dropdowns and instantly renders the halls that are open “right now” or “at a chosen time” onto easily legible cards. - FreeTimesCard (
components/FreeTimesCard.jsx): This flips the search paradigm. It tracks per-classroom variables, telling you exactly when your favorite, quietest study hall will become available later in the day.
Note
The UI Hurdle: With 40+ lecture hall states changing every single hour, rendering massive tables proved sluggish and visually overwhelming for users looking on mobile devices.
Creating the Visual Experience
To remedy the visual clutter of 40+ halls on a mobile screen, I implemented clean pagination and dynamic table logic. Only the relevant data blocks are visible at any given moment. To top it off, I instituted @vercel/analytics and dynamic open-graph images (@vercel/og) making the links highly shareable amongst friend groups trying to coordinate group study sessions.
The lib/utils.js file utilized a shared cn() utility comprising clsx and tailwind-merge, allowing the React UI components to remain highly dynamic natively.
By combining seamless data-driven orchestration with incredibly satisfying, modern React UI components, the BPGC Class Finder solved a campus-wide headache overnight. It stopped the aimless walking, removed the guesswork, and transformed daily frustration into calculated, scheduled productivity.