NTU Sports Matching

Architechture

Project by Hackstreet Boys (Roen, Jordan, Elliot, Juninho)

Inspiration

Being a sport loving student in NTU, you always have an itch to play a quick game of basketball, badminton or any other sport. But when it comes time to actually find people to play with, that's where we run into trouble. Blasting our hall chats, faculty chats, your orientation chats, waiting hours and hours for vague replies like "see how" and getting no-showed by people who confirmed. We aren't the only ones experiencing this, the courts are empty, yet there are so many individual people who want to play have no way of finding each other. NTU is a big place, and there is no good solution that exists to solve this problem.

What it does

NTU Sports is a real-time mobile based app used for finding and joining pickup sports games around campus. It features:

Live game board to see every open game by sport, location, and time.
Campus heatmap, an interactive map of all NTU courts with color coded activity rings showing how busy each court is right now.
Waitlist system for full games, allowing players to join the queue and get auto-promoted the moment a slot opens.
Game chat for real time messaging allowing for interaction and last minute coordination.
Post game ratings to rate teammates after every session. Allowing people to build a reputation, earn coins, and hold each other accountable.
Streak leaderboard showing weekly participation streaks ranked across the whole platform and among friends, rewarding consistency.
Push notifications alerts 15 minutes before game start, when players join, and when friend requests arrive.

How we built it

We built NTU Sports as a cross-platform mobile app using React Native with Expo, written entirely in TypeScript.

The backend runs on Supabase, PostgreSQL for the database, Supabase Auth for user sessions, and Postgres Change Subscriptions for real-time updates over WebSockets. Every event propagates instantly without polling.

Server-side game logic like status transitions, coin disbursements, waitlist promotion, and recurring game scheduling runs in Supabase Edge Functions on Deno.

The campus map is built with react-native-maps, rendering heatmap rings per court from live player counts. Push notifications are handled using Expo's notification infrastructure, with device tokens stored in Supabase and server-triggered alerts from Edge Functions.

Our AI usage

We used Claude Code, a combination of their Sonnet and Opus models, as development accelerators throughout the project. With the increasing use of Gen AI producing hundreds of apps today, we used it to move faster on the implementation, boilerplate, debugging, and write complex algorithms.

The bigger challenge was product thinking. AI has made development extremely trivial to ship something that works, but the product was too generic and gave a cheap feel. We spent our time drafting and building what the experience we want the user to feel and like procedurally. The difference is, the AI helped us execute our vision and not just generate a cookie cutter app.

A small personal reflection here is that, AI is replacing traditional coding and the quality of the code is definitely amazing, but it cannot replace design decisions tailored to human experiences. It is, more than ever, important to stay creative and use these new tools to enhance your work and not replace it.

Challenges we ran into

Real time state consistency was the hardest problem. With multiple users joining and leaving simultaneously, we had to be careful about race conditions. We solved this with server-side idempotency checks in Edge Functions so no action could fire twice regardless of client state.

Game lifecycle management was more complex than expected. Automatically transitioning games from open -> in progress -> completed, triggering downstream effects like coins, recurring child games, flag cleanup, and handling edge cases like host abandonment required a lot of communication in the backend between databases, code and edge functions.

Accomplishments that we're proud of

Building a fully functional app that achieved our initial goal of a matching platform and more.

The heatmap is something we improved beyond the initial goals, its gives you an instant read of campus sports activity, making it feel real and lively instead of just reading off a list.

The reputation system, ratings, reviews, streaks, and the abandonment flag also addressed one of the major problems we faced which was no-shows. It helps to enforce accountability, and gives players heads up when a frequent no-shower joins there game queue.

A polished, clean and high quality UI, with many customizable features, like dark mode, custom avatar borders, editable profiles that is consistent across iOS and Android. We really paid attention to the user experience, making everything simple to interact with to improve user adoption and retention.

What we learned

Working on GitHub, is extremely important, documenting what we have done, ensuring everything is approved before shipping and merging. Knowing what is in progress at all times helps to keep track of our implemented plans.

UI designs need to be tested and be given feedback. Many times we code and build things in a certain way because it is intuitive for us, but not necessarily for others. We found certain configurations to be easier to use for people we surveyed but not for us. We learned to take that feedback and improve it according to the user feedback.

What's next for NTU Sports Matching

In terms of NTU context, we see NTU Sports Matching as being able to handle core school facility functions. Taking over facility booking and management, users no longer need to email or call, reducing the hassle of looking for the right numbers or email addresses and wait times, connecting with NTU's court booking system so joining a game and booking the court happen in one flow. This will likely improve the overall sport activity around NTU.

To further enhance the experience while remaining secure, we can see integrating NTU SSO integration to allow users to login and be verified using their school accounts.

We also envision multi-campus support. The architecture is already capable of supporting arbitrary court coordinates. It can be easily replicated in other campuses with just a simple configuration change.

Sport functions wise, we hope to integrate more sports that can use the existing courts, such as pickleball in badminton or tennis courts. Also improving matchmaking by adding position roles, skill level tags so that users can find games with skill levels matching their own.

Scheduled recurring games, letting organisers lock in a weekly timeslot (e.g. "Wednesday 6pm basketball") that auto-posts each week which helps build a consistent player base and hence, builds a consistent user base.

Post-game highlights to let players share a photo or quick recap after a session to build a social feed around games they played, transforming the app into a social media-esque platform.