OpenSpace

Inspiration

Every evening and weekend, tens of thousands of publicly funded classrooms, auditoriums, media labs, and gymnasiums sit locked and dark. Meanwhile, community organizations, non-profit youth sports leagues, and cultural groups are priced out of private commercial spaces or forced into subpar alternatives.

When educational institutions do attempt to open spaces to the community, administrative staff are overwhelmed by paper forms, liability worries, noise complaints, and accidental double-bookings. We built OpenSpace to eliminate these friction points with upfront policy enforcement, automated schedule conflict math, and an intuitive two-sided workflow for organizers and school administrators.

What It Does

OpenSpace provides an end-to-end civic facility reservation platform featuring a built-in Demo Role Switcher (Community Organizer ↔ Institution Staff):

1. For Community Organizers:

• Browse Vetted Campus Venues: Filter facilities by date, minimum attendance, permitted noise level, community hourly rates, and specialized equipment (e.g., sound booths, sprung hardwood floors, presentation screens).
• Campus Policy & Rule Fit Evaluator: Before applying, organizers test event parameters against the venue's rules. Real-time diagnostic tags show whether an event meets safety policies, noise curfews, custodial supervision rules, and cleanup deposit conditions.
• Single & Recurring Series Bookings: Organizers can book single sessions or recurring weekly/bi-weekly series (up to 8 sessions).
• Batch Conflict Checking: Real-time feedback verifies availability for every date in a recurring series, flagging overlapping bookings before submission.
• In-App Notification Center: Receive live alerts when permit requests are approved, declined with staff feedback, or cancelled.

2. For Institution Staff & Facility Managers:

• Centralized Staff Dashboard: Review incoming requests in a structured Table View or an interactive Weekly Timeline Grid (8:00 AM – 10:00 PM).
• Automated Conflict Prevention: Half-open time interval math prevents accidental double-bookings and blocks staff from approving conflicting requests.
• Facility Listing Management: Add new facilities, configure operating hours outside academic schedules, enforce decibel thresholds, and toggle permitted event activities.
• Export & Executive Reports: One-click CSV export plus print-ready executive summary reports detailing utilization hours and estimated rental revenue.

How We Built It

• Frontend Architecture: Built with React 19 and strict TypeScript, bundled with Vite for fast client performance and hot reloading.
• Design System: Engineered a bespoke Vanilla CSS design system using modern typography, glassmorphism, responsive CSS Grid/Flexbox layouts, WCAG-compliant contrast, and pinned modal dialogs.
• Scheduling & Conflict Math: Implemented interval evaluation algorithms ensuring back-to-back reservations (e.g. 17:00–19:00 and 19:00–21:00) remain valid while true time overlaps are halted.
• Persistence & Simulation: Designed an isolated client storage service (src/services/storage.ts) supporting live state persistence and a one-click demo data reset.
• Testing & Quality Assurance: Backed by an automated test suite in Vitest and React Testing Library with 100 tests passing across 15 test suites and 0 lint errors via Oxlint.

Challenges We Ran Into

1. Recurrence & Interval Math: Handling recurring weekly series across calendar months while running concurrent conflict checks against existing database reservations.
2. Half-Open Scheduling Logic: Ensuring events that end when another begins (e.g., 17:00–19:00 and 19:00–21:00) don't trigger false-positive conflict warnings.
3. Dual-Role Demo Mode: Providing an authentic experience where hackathon judges can test both the Organizer and Staff workflows in a single browser tab without requiring backend authentication setup.
4. Strict React 19 Hook Ordering: Ensuring modal forms, timeline projections, and live badge updates adhered strictly to React 19 render lifecycles.

Accomplishments That We're Proud Of

• 100/100 Tests Passing: Comprehensive test coverage covering filters, conflict engines, booking lifecycles, and calendar navigation.
• Zero Heavy UI Component Libraries: Completely custom UI built with semantic HTML and CSS, resulting in an ultra-fast production bundle under 400 kB.
• Interactive Weekly Calendar Grid: A responsive 7-day schedule timeline that visualizes campus occupancy with color-coded conflict warnings and quick popovers.
• Civic Value: Designed around the real-world operational constraints that public school districts and universities navigate daily.

What We Learned

• Public sector platforms must prioritize transparency and upfront policy enforcement to prevent disputes before bookings occur.
• Accessible design patterns—such as keyboard accessibility, high-contrast indicators, and bounded scrollable dialogs—dramatically enhance the experience for all users.
• Structuring clean state boundaries makes complex multi-role prototypes fast, reliable, and easy to evaluate.

What's Next for OpenSpace

• Stripe Connect Integration: Automated deposit escrow and custodial reimbursement.
• IoT Smart Access: Automated generation of temporary keycard PINs or QR codes for approved organizers.
• Multi-District Multi-Tenancy: Unified portals spanning entire school districts and municipal library systems.
• Insurance Verification: Automated verification of 501(c)(3) status and liability insurance certificates.

Built With

• civic-tech
• css3
• html5
• javascript
• lucide-react
• react
• testing-library
• typescript
• vite
• vitest
• web-application