Flagship Project

Play To Network

Sports community platform connecting players, teams, and organizers

Next.jsTypeScriptTailwind CSSSupabasePostgreSQLVercelFramer Motion

Overview

Play To Network is a sports community platform that aims to connect players, teams, and organizers through sports. Users can explore sports events and tournaments, organizers can create and manage tournaments, and teams can register for events through a modern, responsive user interface.

Problem Statement

Sports enthusiasts in India lack a unified digital platform to discover events, manage tournament registrations, and connect with other players and organizers. The absence of a structured system means organizers rely on manual processes and social media, creating fragmented and inefficient experiences for everyone involved.

Key Features

  • Browse and explore live sports events and tournaments
  • Organizer dashboard to create, publish, and manage tournaments
  • Team registration flow with player roster management
  • Modern, fully responsive UI built with Tailwind CSS
  • Real-time data powered by Supabase and PostgreSQL
  • Smooth page transitions and animations via Framer Motion

Architecture

1Next.js App Router with server and client components
2Supabase as the backend-as-a-service layer (auth, database, storage)
3PostgreSQL for structured relational data (users, tournaments, teams, registrations)
4Vercel for continuous deployment and edge delivery
5Row Level Security (RLS) policies on Supabase for data access control

Challenges & Solutions

Designing a relational schema that cleanly models the many-to-many relationships between teams, players, and tournaments.

Used a junction table pattern in PostgreSQL — a `registrations` table linking teams and tournaments, with status tracking for each registration.

Ensuring the UI remained performant while loading dynamic tournament data on initial page load.

Leveraged Next.js server components with Supabase server-side queries to stream data to the client, avoiding waterfall fetches.

What I Learned

  • End-to-end Next.js App Router patterns including server actions and route handlers
  • Supabase schema design, RLS policies, and real-time subscriptions
  • Building scalable type-safe TypeScript frontends with proper data modeling
  • Deploying and optimizing full-stack applications on Vercel