Goodminton

Badminton version of Tinder ^_^

Comment

Goodminton

Introduction

We live in a world where sports communities are becoming increasingly fragmented. Gone are the days of simply showing up at a local court and finding a game. Now, players struggle to connect with others at their skill level, coordinate schedules across busy lives, and navigate the logistics of court bookings and cost sharing.

Finding badminton partners shouldn't be this hard. Players want to improve, compete, and enjoy the game, but the friction of organising sessions often gets in the way. Local clubs are hard to discover, tournaments fly under the radar, and there's no central hub bringing the badminton community together. With some inspiration from apps like Tinder and Meetup, we present Goodminton - the ultimate platform to connect, play, and grow together.

Features

Goodminton has six major features. Each feature focuses on a different aspect of the badminton experience to create a comprehensive community platform.

Partner Matching (Swipe to Connect)

  • Tinder-style swiping interface to find compatible players
  • Matches based on skill level (1-10 rating), play style (singles/doubles/both), and location
  • Compatibility scores calculated from availability, intentions (casual/competitive/coaching), and proximity
  • Detailed player cards showing stats, win rate, preferred days, and bio
  • Instant match notifications when both players swipe right
  • Direct messaging to arrange your first game

Interactive Map Discovery

  • 3D interactive map powered by Mapbox GL JS
  • Discover nearby players, courts, clubs, and tournaments at a glance
  • Custom markers differentiate between different venue types
  • Distance calculations to find what's closest to you
  • Filter by type to focus on what you're looking for

Smart Scheduling & Booking

  • Calendar picker with time slot selection
  • Browse venues with pricing, ratings, and amenity listings
  • Multi-partner invites to bring your whole group
  • Direct court booking with availability indicators
  • Seamless flow into fare splitting after booking

Fare Splitting

  • Equal split mode for quick calculations
  • Custom allocation sliders when costs vary
  • Payment tracking to see who's paid
  • Reminder system to nudge late payers
  • No more awkward "who owes what" conversations

Tournament Hub

  • For Players: Browse tournaments by format, filter by skill level, view entry fees and prizes, one-click registration
  • For Organisers: Create tournaments, define positions and brackets, track registrations, manage check-ins
  • For Workers: Browse job postings (referees, linesmen, coaches), apply with CV, track application status

Club Discovery

  • Discover local clubs with activity levels and meeting schedules
  • Skill level ranges so you find the right fit
  • Join open clubs instantly or request membership for private ones
  • Create your own club and build a community
  • See member avatars to know who's already part of the group

The Development Journey

In 24 hours, we came together to produce a fully functional product. After brainstorming, we decided to build a comprehensive platform with interconnected features—partner matching flows into scheduling, which flows into fare splitting—creating a seamless user journey.

Our team split into front-end and back-end sections. We focused heavily on creating smooth user interactions with Framer Motion animations and building a robust API layer connecting to Supabase. The sections maintained close communication to ensure consistent data models and smooth integration.

A major challenge was implementing the swipe mechanics with proper physics-based animations. Getting the drag gestures, rotation on release, and like/pass overlays to feel natural required significant iteration. We also invested time into the fare splitting logic to handle edge cases like excluding participants mid-session.

Built With

  • Next.js 14 (App Router)
  • TypeScript
  • React 18
  • Tailwind CSS v4
  • shadcn/ui
  • Framer Motion
  • Mapbox GL JS
  • Lucide React
  • Recharts

Try It Out

GitHub Repo

git clone https://github.com/your-team/goodminton.git
cd goodminton
npm install
npm run dev

🏸

Built With

  • nextjs
  • sql
  • vercel
Share this project:

Updates