OfficeQ

Skip that line, save YOUR time!

Comment

✨ OfficeQ Inspiration

Every student knows the dread of standing in a long, inefficient line for office hours, wasting valuable study time, only to find the professor is busy. For professors, managing the dynamic flow of students—from walk-ins to no-shows—is a distracting manual effort.

We saw a clear opportunity to modernize this archaic system. Why should student support depend on static whiteboards or unreliable paper sign-up sheets?

Our goal was to build a system that respects both the student's time and the professor's focus. We wanted a tool that provided perfect, real-time transparency, eliminating physical lines and allowing learning to happen more efficiently. That's how we created OfficeQ, a modern, serverless solution for academic queue management.

💡 What it does

OfficeQ is a real-time, zero-friction queue management application that transforms your traditional office hours into a transparent, digital experience. Students can join a professor's queue, see their live position, and monitor the professor's availability from anywhere, while professors gain a dynamic, responsive dashboard to manage their waiting list.

🛠️Core Features:

Real-Time Queue Synchronization - Uses Firebase Firestore onSnapshot() listeners to provide students with their exact, live position and estimated wait time without manual refreshing.

Professor Dashboard - A secure view allowing professors to log in with their email, track their unique queue, call the next student (which automatically removes the entry and updates remaining positions), and toggle their availability status (available/busy/offline).

Automated Queue Management - Students join the queue instantly, receiving the next position. Positions automatically shift up when the student currently being helped is removed.

Responsive & Themed UI - Built with React and Tailwind CSS, featuring a responsive, mobile-first design and themed with the university color palette (USF-inspired emerald and gold).

Serverless Persistence - Entire application runs client-side, with Firebase handling all data storage and synchronization across the separate professors and queue_entries collections.

Student Self-Monitoring - Students can view the professor’s current availability and their position in the queue, reducing unnecessary waiting.

Frameworks & Technologies:

Frontend: React (Vite) for the dynamic UI, powered by modern hooks (useState, useEffect).

Styling: Tailwind CSS for rapid, responsive, utility-first design, ensuring mobile-first compatibility and USF-themed aesthetics.

Backend/Database: Firebase Firestore for robust, real-time NoSQL data persistence and synchronization.

SDK: Firebase SDK handles authentication (custom token/anonymous sign-in) and all database operations (onSnapshot, addDoc, deleteDoc).

❓ Challenges we ran into

Firestore Query Consistency Implementing the real-time queue required complex Firestore queries that combined filtering (where('professorId', '==', ...)) with sorting (orderBy('position', 'asc')). This often led to runtime errors due to missing composite indexes in the database. We addressed this by being meticulous about the query structure and ensuring the necessary index definitions were prepared.

Concurrency in Positioning Ensuring queue position accuracy when multiple students attempt to join the same professor's queue simultaneously presented a challenge. Although we relied on Firebase's reliable addDoc to create the entry, future robustness will require using Firebase Transactions to lock the position counter to guarantee no two students receive the exact same position number if they join in the same millisecond.

Component Dependency Resolution We faced a persistent build error (Could not resolve "../firebase") when integrating the Firebase SDK into our React components. This required creating and correctly exporting a dedicated, self-contained firebase.js configuration file to ensure the database instance was initialized properly using the necessary environment variables before being imported by other views.

🏆 Accomplishments that we're proud of

Near-Instant Real-Time Synchronization We successfully implemented real-time queue updates with sub-second latency across all connected devices. When a professor calls the next student, the remaining students see their position number update instantly, demonstrating a fully functional, live data stream.

Clean Serverless Architecture We delivered a comprehensive, fully functional application without writing a single line of custom backend server code. The entire system is managed and scaled by Firebase, showcasing an effective and maintainable serverless approach using modern React hooks.

Dedicated UI/UX for Each Role We created distinct, intuitive interfaces for both the professor (focused on management, status, and control) and the student (focused on transparency, position, and wait time), ensuring a smooth experience tailored to the user's specific role.

📚 What we learned

The Power of Real-time Listeners We learned how crucial Firebase's onSnapshot listeners are for building truly modern, reactive web applications. By shifting from a traditional "pull" model to a real-time "push" model, we could eliminate manual refreshes and ensure all users see the absolute latest data immediately, which is essential for a queuing system.

🚀 What's next for OfficeQ?

AI Pre-Queue Assistant Integrate the Google Gemini API to offer an AI assistant on the student view. Students could ask general course questions, view FAQs, or clarify assignments before committing to joining the live queue, reducing unnecessary traffic for the professor.

Professor Analytics Develop an analytics reporting feature that provides professors with actionable data, such as peak office hour demand times, average student wait times, and total students served per week.

Multi-Staff Support Expand the system to allow multiple teaching assistants (TAs) to pull students from a single, shared course queue. This would require enhanced logic to track which staff member is currently serving which student.

Built With

Share this project:

Updates