Inspiration
Booking campus facilities as a student often feels like wrestling with outdated, opaque systems—double bookings, lack of context about what you’re reserving, and wasted idle slots due to poor availability handling. We got inspired by that friction: the wasted time, the confusing UX, and the mismatch between supply (rooms) and actual student demand. ReServe was born to bring clarity, control, and higher utilization to facility booking—“Allowing you to Reserve. And us to Re-Serve.”
What it does
ReServe is a community/edutech facility booking platform that gives students full visibility and control over room reservations while maximizing real utilization of spaces. Key capabilities:
- Rich booking flow with search filters, availability calendar, and contextual facility info (capacity, costs, location, images).
- Credit system: Users spend credits to book; admins control pricing and credits.
- Co-booking / shared bookings: Students can invite or request co-bookers seamlessly.
- Released rooms & availability optimization: Idle or unconfirmed slots can be released to improve overall availability.
- Countdown timers & real-time feedback: Booking windows, session timing, and usage status are surfaced to reduce no-shows.
- Admin dashboard: Facility managers can block slots, monitor bookings in real time, manage user credits, and intervene when needed.
- Role-based UX: Separate tailored interfaces for normal users versus admins.
- QR code display for quick check-in/verification.
How we built it
The frontend is built in React with TypeScript, leveraging modern component composition to separate concerns (e.g., FacilityCard, CalendarBookingView, CoBookerSearch, SearchFilters, CountdownTimer, etc.). Routing is handled via react-router-dom with protected routes to enforce roles. Icons come from lucide-react for clarity and visual consistency.
Core pieces:
- A calendar-based booking UI with time grid manipulation to select and adjust reservation windows.
- Co-booker request workflow enabling shared reservations.
- Admin tools including facility management, blocking, credit adjustments, and live booking monitoring.
- Stateful UX elements like countdown timers, released-room handling, and dynamic availability feedback.
- Credit and pricing model abstracted so admins can tune cost per facility to influence behavior.
We focused on modularity: layouts (UserLayout, AdminLayout), reusable UI primitives, and clear separation between user and admin concerns, enabling future backend wiring.
Challenges we ran into
- Designing an intuitive time-block booking experience that mimics expected behaviors (e.g., adjustable duration in increments) while keeping the UI responsive and error-resistant.
- Balancing availability with commitment, i.e., minimizing no-shows without blocking rooms indefinitely. Building mechanisms for released rooms and countdowns to reclaim unused slots was nontrivial in UX design.
- Role-based complexity: Providing both a clean student flow and a powerful admin console without overwhelming either side required careful component and route structuring.
- State management across interdependent components (e.g., co-booker status affecting booking flow, real-time countdowns, and availability).
- Mocking before backend existed: We had to simulate core flows (like booking, credit deduction, co-booker approvals) with mock data while keeping the code ready for plugging in real APIs later.
Accomplishments that we're proud of
- Shipping a fully interactive booking front-end that supports co-booking, real-time feedback (countdowns, availability), and rich facility detail with minimal friction.
- Building a comprehensive admin dashboard that gives operators visibility and control—blocking, credit management, and live booking monitoring all in one place.
- Creating a flexible credit-driven incentive model that can be tuned to encourage fair and efficient usage.
- Designing the system with clear separation of concerns, making future backend integration, analytics, and extensions straightforward.
- Crafting a UX that anticipates student pain points: repeat bookings, no-shows, and shared usage, and wrapping them in a cohesive flow.
What we learned
- Real-world booking systems require careful orchestration of time, commitment, and incentives; it’s not just UI but behavioral design.
- Building modular React/TypeScript components early makes later scaling (new features, backend integration, A/B testing) far easier.
- Role differentiation (user vs admin) tends to explode complexity unless abstractions are introduced early.
- Simulating backend-dependent features effectively forces better API contract thinking even before the backend exists.
- Designing for availability optimization (e.g., releasing dormant reservations) blends UX decisions with system policies—technical tools alone aren’t enough.
What's next for ReServe
- Backend integration: Wire up real APIs, persist bookings, enforce credit transactions, and handle concurrency/conflict resolution.
- Real-time sync: Introduce WebSocket updates for live availability, co-booker responses, and admin alerts.
- Smart recommendations: Suggest alternative time slots or rooms based on historical usage and popularity to increase utilization.
- Recurring & prioritized bookings: Allow users to set up repeating reservations and introduce fair-use priority for high-demand slots.
- Mobile optimization / PWA: Improve on-the-go booking with responsive design and offline fallback.
- Notification system: Reminders, expiring holds, co-booker approvals via email/SMS/in-app.
- Analytics dashboard: Surface utilization trends, no-show rates, credit economy health, and equity of access.
- Gamification & credit earning: Reward users for releasing unused slots early or helping co-bookers, closing the loop on community-driven scheduling.
- Open sourcing & campus rollouts: Package ReServe so other institutions can adopt or adapt it, starting with pilot deployments.
Log in or sign up for Devpost to join the conversation.