your·rock·is·coming — Sydney Tennis Platform

The ultimate discovery hub for Sydney tennis lovers.

Comment 1

What inspired us


Sydney has a massive and passionate tennis community, yet players today face a severe information silo. Courts are scattered across disparate local council sites, private club pages, and school portals—each with its own clunky booking system. There’s no centralised platform to compare crucial decision-making factors like surface type (grass, hard, clay), indoor/outdoor environments, night lighting, or pricing.
 Furthermore, Sydney's unpredictable weather adds immense friction. When it rains, outdoor courts become unusable, but the current refund and reschedule processes are notoriously complex. We wanted to build the ultimate discovery and booking hub for Sydney tennis venues, deeply integrating a weather-aware flow so players can seamlessly plan around rain.


Our project name, your·rock·is·coming, embodies our core philosophy. It draws from the idea that with persistence—like a small stone steadily rolling upward to become a rock—everyone can reach their goals. On our platform, every player has the potential to be a champion in their own right.


What we learned

Building this platform within a tight hackathon timeframe was a masterclass in agile product development and technical architecture:

  • Architectural Resilience: We learned how to design a robust full-stack application that degrades gracefully. By implementing a "Dual-mode UX," we ensured the platform could function entirely via mock data and localStorage if the backend went offline.
  • Contextual API Integration: Integrating Open-Meteo taught us how to embed third-party data seamlessly into the user journey. We tied 7-day forecasts directly into the hero section and checkout flow to provide contextual rain warnings exactly when the user makes a booking decision.
  • Geospatial Discovery & Smart Ranking: We mastered map-based UI/UX using Leaflet/react-leaflet. To optimise the user experience, we explored a dynamic ranking concept rather than relying on a simple alphabetical list. We designed a recommendation logic that balances three core variables: proximity to the user (calculated via the Haversine formula), price affordability, and real-time weather conditions. By dynamically penalising the ranking of a venue based on its precipitation probability fetched from the weather API, we ensure users are always presented with the most convenient, cost-effective, and weather-safe options first.
  • Frictionless User Flows: We learned how to distil a complex booking process into a linear, intuitive path: Discover Venue → Select Date → Pick Time Slot → Review Weather → Confirm.



How we built it

We adopted a modern, lightweight, and fast-compiling stack to maximise our output over the 48 hours:

  • Frontend: Built with React 18, TypeScript, and Vite 8 for rapid development. We utilised Tailwind CSS for responsive styling, react-router-dom for navigation, Leaflet/react-leaflet for the interactive map, date-fns for time slot logic, and react-hot-toast for UI feedback.
  • Backend: Powered by Node.js and Express, utilizing SQLite via better-sqlite3 for a lightweight, zero-configuration database. We exposed a clean REST API for courts, availability, bookings, and weather routing.
  • Data & Deployment: We wrote SQLite schema, seed, and migration scripts to quickly populate Sydney court data. In development, the frontend proxies /api to the backend; for production, the built frontend is served directly from Express.
  • Weather Integration: We utilised the Open-Meteo API (which requires no key) for reliable, free weather data, with an optional fallback to OPENWEATHER_API_KEY for live data from the backend.



Challenges we faced

  • Ruthless MVP Prioritization: The biggest challenge was deciding what not to build. We had grand visions for coach matching and payment gateways, but had to strictly prioritise the "Find + Book + Weather" core loop to deliver a polished MVP in 48 hours.
  • The "Demo-Proof" Dual-Mode UX: Ensuring the app worked flawlessly for judges regardless of server status was technically demanding. Syncing state between a "backend on" and "backend off" environment required meticulous state management.
  • Complex State Synchronisation: Keeping the calendar availability, selected time slots, and the user's booking dashboard perfectly in sync across different pages pushed our frontend skills to the limit.
  • Strategic Weather UI: Deciding where to call the weather API to minimise latency, handling missing API keys gracefully, and surfacing rain warnings without cluttering the mobile UI required several design iterations.

Built With

+ 5 more
Share this project:

Updates