Football Club Management
A production full-stack football club management platform built for a real club (Naya Diganta Club). It manages an entire club operation — squads, fixtures, live match scores, standings, news, gallery and academy — through a public website, a role-based admin panel and a REST + Socket.io backend.
Technologies
Project Duration
20 days
What I built.
- ✓JWT authentication with register, login, forgot-password and reset-password flows
- ✓Role-based access control across 7 roles (Super Admin to Member)
- ✓Live match centre with real-time score, events timeline and viewer count via Socket.io
- ✓Live match chat and real-time formation/pitch builder for matchday
- ✓Squad and player profile pages with stats, position, number and career info
- ✓Fixtures with filters by club, competition, season, status and date range
- ✓Competition standings and top-scorers tables
- ✓News system with categories, tags, search and per-article view counts
- ✓Photo/video gallery with lightbox and infinite marquee
- ✓Academy, training sessions and attendance tracking
- ✓Match request workflow for opponents
- ✓Separate admin panel with full CRUD for clubs, players, teams, matches, news, gallery, members, users and statistics
- ✓Bulk player import and player transfer handling
- ✓Cloudinary media uploads (avatars, club logos, player photos, news covers)
- ✓SEO: dynamic sitemap, robots.txt, OpenGraph image and JSON-LD structured data
- ✓Dark/light theme, skeletons, toasts and fully responsive mobile-first UI
Technical Architecture.
Challenges I faced.
01 — Real-time match updates without state drift
Problem
Live scores, match events, status changes and viewer counts had to reach every viewer of a match instantly, but the React components received updates from multiple Socket.io events and could end up showing a score that disagreed with the timeline of events.
Solution
Joined a per-match Socket.io room on mount and left it on unmount, then drove all UI state from a single source: each socket event carried its own score snapshot alongside the event/status, and every listener was explicitly torn down in the cleanup function so no stale subscribers or duplicated event handlers survived a route change.
Result
Scores, events and status stay in sync for all viewers of a match in real time, with no duplicate events or leaked listeners after navigating away and back.
02 — Role-based access across 7 roles and two apps
Problem
The platform has 7 hierarchical roles (Super Admin, Club Admin, Team Manager, Coach, Scorer, Player, Member) that inherit permissions downward, and the same rules had to be enforced consistently in the REST API, in the public site UI and in the separate admin panel.
Solution
Made the backend the single source of truth with role middleware that checks the minimum required role per endpoint, then mirrored those rules on the client to gate routes and hide admin actions, plus an Axios response interceptor that clears the session and redirects to login on any 401.
Result
One permission model enforced end to end — users only ever see and can trigger the actions their role allows, and an expired or invalid token can never leave the app in a half-authenticated state.
03 — CORS and cookies failing after deployment
Problem
Everything worked on localhost but the production site and admin panel were blocked by CORS, and because the auth token is also sent as an HttpOnly cookie, requests only succeeded when the correct origin and credentials settings lined up between the deployed frontend, admin panel and backend.
Solution
Configured the backend CORS whitelist from an environment variable listing the exact production frontend and admin origins with credentials enabled, set `withCredentials` on the Axios instances, and made the API base URL and Swagger server URL environment driven instead of hardcoded.
Result
The public site and admin panel both authenticate and talk to the deployed API reliably, with no hardcoded localhost URLs left in the build.
04 — Modeling a whole club without duplicating data
Problem
Clubs relate to players, teams, matches, competitions, seasons, academy groups and statistics, and early on the same entities were being duplicated across screens which made filters and standings inconsistent.
Solution
Designed Mongoose schemas with clear relations and references, kept statistics derived from matches and players instead of stored twice, and built list endpoints with consistent pagination and query filters (search, club, position, season, status, date range) that every screen reuses.
Result
One consistent data model: standings, top scorers, squad lists and fixtures all agree because they are all resolved from the same records with the same filtering contract.
What I learned.
- →Designing and shipping a real-time feature with Socket.io rooms and clean listener lifecycles
- →Implementing hierarchical role-based access control end to end
- →Structuring a Mongoose data model for a domain with many related entities
- →Consistent API design: envelope responses, pagination and composable query filters
- →Form architecture with React Hook Form + Zod and typed schemas
- →Axios interceptors for auth headers and global 401 handling
- →Environment-driven configuration and production CORS with credentials
- →Deploying a three-part system (public site, admin panel, API) and debugging it in production
- →Next.js App Router: server components, route groups and caching/revalidation
- →Technical SEO with dynamic sitemap, robots, OpenGraph and JSON-LD
- →Media handling through Cloudinary including deletes by public id
What I would improve.
- →Add WebSocket-based push for news and gallery updates instead of only matches
- →Implement offline-tolerant optimistic updates for admin mutations
- →Add end-to-end tests (Playwright) for the live match flow and role gating
- →Introduce a Redis cache layer for standings and top scorers aggregations
- →Add push notifications for match start, goals and final whistle
- →Add multi-club tenancy so the platform can host more than one club
- →Move media delivery behind a CDN transform pipeline with responsive image sets
- →Add analytics dashboards for attendance, engagement and live viewer patterns
- →Add a mobile app or PWA install flow for matchday updates
Results.
- ✓Live, publicly used club platform running at nayadiganta.club
- ✓Real-time match centre with scores, events, viewer counts and chat
- ✓Complete role-based admin panel managing the entire club operation
- ✓Consistent data model powering fixtures, standings, top scorers and squads
- ✓Secure JWT auth with password reset and protected routes
- ✓Production deployment across three services with Cloudinary media
- ✓SEO-ready public site with sitemap, OpenGraph and structured data
- ✓Reusable, fully responsive component system for the whole club site