Web platform
The Real PCL: a web platform for a corporate cricket league
therealpcl.com is the site of the Pakistan Corporate League, a corporate T20 cricket league in Lahore. It combines public pages for players, teams, tournaments and editions with online player registration and a dashboard where captains and managers nominate their squads.
The challenge
A league has several audiences that need the same data. Players want to register and keep a profile, captains and managers need to submit a squad for every edition, and followers want to look up teams, players and past tournaments.
All of it lives in the league's API, so the site had to present it publicly, fast and indexable, while giving signed-in players and captains the tools to change it.
Our approach
Public pages from the league's data
Players, teams, tournaments, editions and a hall of fame are rendered on the server from the league API and refreshed every 12 hours. Old numeric URLs redirect permanently to readable slugs.
Registration online
A detailed player registration form covers playing role, batting and bowling style, kit details, team and the upcoming edition. Profile photos are compressed in the browser before they're uploaded.
A squad dashboard for captains and managers
Players sign in. Captains and managers add players to their team for an edition, set captain, manager and kit details, and can copy a squad from a previous edition.
Tournament-day tools
A live and recorded video feed from the league's YouTube channel is fetched server-side, and an internal pool-draw tool assigns an edition's teams to pools and saves the result.
Architecture
- Front end
- Next.js 16 App Router and React 19, with Ant Design 5 components and TanStack Query for the signed-in pages.
- API
- The league's Laravel API, with bearer tokens. Public pages call it from the server; signed-in requests go through small server-side routes that forward the player's token.
- Sign-in
- Players sign in against the API, the session is checked when the dashboard loads, and an expired token sends the player back to the sign-in page.
- Search and sharing
- A sitemap built from the API for players, teams, tournaments and posts, sports-specific structured data (SportsOrganization, SportsEvent, SportsTeam, Person), and a www-to-bare-domain redirect.
- Security
- A content security policy, HSTS, frame and permissions policies, and blog HTML sanitised before it's rendered.
People
Public pages
Players, teams, tournaments, editions
Player dashboard
Profile, squads, nominations
Next.js
Server rendering
Public pages cached for 12 hours
Server routes
Forward the signed-in player's token
Services
League API (Laravel)
Players, teams, editions, nominations
YouTube Data API
Live and recorded matches
Where it stands
Live at therealpcl.com
The public site, registration and the captains' dashboard run on one Next.js app.
One source of truth
Public pages and the dashboard read and write the same league API, so a squad change shows up on the team's page without a second copy of the data.
Built with
- Next.js 16
- React 19
- Ant Design 5
- TanStack Query
- Tailwind CSS
- Laravel API
- YouTube Data API
Services involved
Have a problem like this one?
A few lines is enough. We'll ask the right questions on the call.
We reply within one working day
By email or WhatsApp, whichever you prefer.
A short call
To understand the goal, the people who'll use it and any deadline.
A written scope and estimate
Before any work starts, so you know what you're agreeing to.
Prefer to talk first?