Book My Court: A React–Redux Multi-Role Sports Court Booking and Player Matchmaking Platform

Book My Court: A ReactRedux Multi-Role Sports Court Booking and Player Matchmaking Platform

Arnav Pimple

UG Student, G H Raisoni College of Engineering Nagpur

Vaibhav Upase

UG Student, G H Raisoni College of Engineering Nagpur

Dr. Swati Patil

Faculty, G H Raisoni College of Engineering Nagpur

Dr. Laxman Thakre

Faculty, G H Raisoni College of Engineering Nagpur

Dr. Wani Patil

Faculty, G H Raisoni College of Engineering Nagpur

Abstract – The way competitive and recreational athletes use sports facilities has changed due to the growth of digital platforms. Nevertheless, the majority of current sports booking systems are restricted to single-role access, do not support QR-code-based physical verication, and do not have real-time player matchmaking capabilities. This paper introduces Book My Court, a role-based, full-stack web application for managing and book-ing sports courts. Each of the four user roles supported by the systemPlayer, Court Owner, Court Attendant, and Administra-toris controlled by a separate dashboard and workow. The platform incorporates court discovery, slot-based reservations, booking conrmation via QR code, cancellation/rescheduling, solo-match player matchmaking, tiered subscription plans, and a centralised notication engine. It is built with React.js and Redux Toolkit on the front end. The evaluation of the systems experimental usability shows that The proposed architecture follows industry-standard component-based design and statefull API integration patterns, making it scalable and maintainable for real-world deployment.

Index TermsSports Booking System, React.js, Redux Toolkit,

QR Code Verication, Role-Based Access Control, Player Match-making, Court Management, Single Page Application, JWT Authentication, Web Application

1. Introduction

   Globally, participation in organised sports has signicantly increased due to the growing awareness of health and physical tness. However, in spite of this momentum, the reservation process for sports courts is still primarily manual, disjointed, or dependent on antiquated phone-based coordination. The overall quality of the sports experience is diminished by players frequent encounters with unavailable slots, double bookings, and unclear cancellation policies.[1]

   Without a single management interface, court owners and facility managers must manage membership records, keep track of attendant assignments, prevent fraudulent use of reserved courts, and maintain updated slot availability. There is a strong argument for an integrated, multi-stakeholder sports facility management platform because of the discrepancy

   between what customers want from a digital-rst experience and what conventional booking methods offer.[2]

   While some of these needs are met by current solutions like Playo, which offer venue discovery and game-joining features, they do not have the ne-grained operational and administra-tive control needed by independent facility operators. None of the academic systems suggested in the literature integrate solo match matchmaking, QR-based physical check-in, and a multi-tiered subscription model into a single coherent system. Instead, they offer partial functionality, usually two-role archi-tectures covering only user-facing and admin operations.[3, 4, 5, 6, 7]

   In order to address each of these shortcomings, this paper in-troduces Book My Court, a modular, component-based Sports Court Booking and Management Platform. The system im-plements full lifecycle management of a court booking, from slot discovery through physical court check-in and post-game notications, and is built around four user roles: Player, Court Owner, Court Attendant, and Administrator. The contributions of this work are as follows: A four-role, role-based access control (RBAC) architecture for sports facility management

   A real-time solo player matchmaking module that connects players by sport, date, and time exibility A QR-code-based court check-in system enabling attendants to verify physical bookings A tiered membership subscription system with plan-based access privileges A comprehensive Redux Toolkit state management architecture for asynchronous API-driven SPA applications

2. Litreature Review

   The domain of online sports facility booking has attracted considerable research attention, particularly in the context of transitioning from paper-based or phone-based reservation systems to digital platforms.

   1. Web-Based Booking Systems

      A badminton court reservation system with user registration, login, court booking, schedule management, and payment re-porting features was created by Sarosa et al. User Acceptance Test (UAT) and Mean Opinion Score (MOS) evaluations of their system produced an average score of 3.8 on a 4-point scale, which is considered very good. The system is user-friendly and functional, but it only supports one sport and does not accommodate several administrative positions.[1]

      Waluyo introduced a combined mobile and web reservation platform built on RESTful APIs, aimed at simplifying sports facility bookings while giving users up-to-date visibility of available time slots. In a similar direction, a turf booking so-lution developed with React.js and Firebase delivered a single-page, cross-platform experience with secure authentication and live slot updates. Together, these works conrm that SPA-based booking interfaces are practical and effective, but they still do not offer the kind of rich, multi-role management found in more advanced systems.[4][5]

      The Web-Based Sports Arena Booking Hub offers a richer design by separating functionality into dedicated user, owner, and administrator modules. Even so, its deliberate omission of integrated payments and automated notications in favor of a simpler architecture makes it less suitable for real-world commercial use where these capabilities are typically essential.[4]

   2. QR CodeBased Verication in Booking Systems

      QR codes are now widely used as a contactless way to verify identity in event and venue management systems. In one QR codebased online booking system for sports complexes, a unique code is created at registration and then reused for both login and attendance tracking, showing that a single QR token can function as both a digital credential and a physical check-in pass. Commercial platforms such as RegFox further illustrate how multi-device QR scanning with real-time data synchronization can speed up entry lines and greatly reduce fraudulent access. Building on these ideas, Book My Court generates a distinct QR code for each individual booking, which is validated on-site by court attendants during check-in, tightly coupling the digital reservation with actual facility usage.[8][9][10]

   3. Player Matchmaking and Community Features

      Popular commercial apps such as Playo have gained sig-nicant traction by emphasizing social matchmaking features, allowing users to join existing games, discover new playpals, and co-host sessions with other players. The On Spot platform offers a similar experience, enabling users to nd partners based on both skill level and preferred time windows. In con-trast, most academic sports booking systems pay limited atten-tion to these community-oriented capabilities. Book My Court addresses this gap by providing a formalised single-match request mechanism with explicit invitation, acceptance, and rejection ows, combining the social strengths of commerial

      apps with the clearer structure and rigor expected in research-oriented system design.[6][11][7]

   4. JWT Authentication in React-Redux Applications

   Secure authentication for single-page applications has been extensively explored in recent work, with JWT-based ows emerging as a common choice for React ecosystems. In prac-tice, developers often combine JSON Web Tokens with Redux Toolkit for centralised state and Axios for HTTP interception, enabling stateless sessions and clean role-based routing on the client. Book My Court follows this pattern by dening an authSlice that uses asynchronous thunks to handle login, registration, OTP-based access, and prole updates, aligning closely with patterns advocated in established ReactRedux authentication guides.[12][13][14]

3. Methodology

   1. System Overview

      Book My Court is architected as a Single Page Application (SPA) with a RESTful backend API. The frontend communi-cates exclusively via Axios-based HTTP calls, with all global state managed through Redux Toolkit slices. The application follows a modular, component-based design pattern in which each functional screen is an independent React component that dispatches actions to the Redux store.

   2. Four-Role RBAC Architecture

      The system denes four distinct user roles, each with a unique workow: 1. Player (End User): Discovers sports and courts on the Home Dashboard, selects time slots, creates bookings, manages existing reservations (cancel/reschedule), participates in solo matches, receives notications, manages prole, and subscribes to membership plans. 2. Court Owner: Authenticates and accesses a management dashboard. Cre-ates courts, congures slot schedules and pricing, manages availability, assigns Court Attendants to specic courts, and monitors booking records. 3. Court Attendant: Logs into a lightweight interface, views courts assigned to them by the owner, checks in players by scanning/verifying QR codes, and marks the current status of each court. 4. Administrator: Exercises system-wide authority views all bookings across all facilities, adds new Court Owners, and monitors the status of owners, courts, and attendants through a centralized ad-ministrative panel. The authentication and role-selection ow is illustrated conceptually as follows: upon successful login or registration, the system presents a role-selection interface that routes the authenticated user to the appropriate dashboard based on their assigned role. This design cleanly separates concerns and enforces access boundaries.[13][12]

   3. System Architecture Diagram

   4. Frontend Module Structure

      The frontend architecture of Book My Court follows a modular, component-based design, where each major feature is encapsulated in a dedicated React component. The entry and authentication layer comprises components such as Splash.jsx,

      Fig. 1. System Architecture.

      Login.jsx, and Register.jsx, which together handle the initial landing experience, user sign-in and registration ows, and subsequent role selection. The player-facing dashboard is implemented in Home.jsx, providing an interface for sport discovery and offering quick access to core booking actions directly from a single, centralized screen.

      The Booking Management module, implemented in Book-ings.jsx, enables users to inspect their upcoming and past reservations, initiate cancellations, request rescheduling, and handle incoming solo match invitations from other players. The Booking Conrmation module, Conrmation.jsx, presents the nalized booking details and renders a corresponding QR code that is later used for on-site verication. Complementing these, the Solo Match module, SoloMatch.jsx, supports users in discovering and joining one-on-one matches by ltering

      role, and acts as the parent for several dependent records, in-cluding a users bookings, active subscriptions, and associated solo-match participation.

      F. Mathematical Model for Court Slot Allocation

      To formalize the backend booking logic, the court allocation can be posed as a capacity-constrained optimization problem, similar to models used in facility reservation and venue management literature. [13][5]

      Fig. 2. CourtSlot Allocation Diagram

      Let U be the set of users, C the set of courts, and T the set of discrete time slots. Each booking request is indexed by r R with associated user u(r) U and desired time slot t(r) T . For every feasible assignment of request r to court c, dene the binary decision variable

      available opportunities according to sport type, date, and pre-ferred time window, while respecting user-dened exibility settings.

      xr,c

      = 1, if request r is assigned to court c,

      (

      0, otherwise.

      (1)

      The Notications module (Notications.jsx) delivers real-time feedback to users, surfacing events such as new solo match invitations, booking conrmations, and status updates. The User Prole module (Prole.jsx) lets users review and edit their personal details, ensuring that contact information and preferences remain up to date. The Subscription module (Subscription.jsx) provides an interface for browsing available membership plans and initiating purchases based on individual usage patterns. Finally, the Layout module (Layout.jsx) denes the shared shell of the application by rendering a consistent navigation bar, handling periodic notication polling, and managing logout behaviour, thereby maintaining a uniform user experience across all screens.

      For state management, the application utilizes Redux Toolkit, with dedicated slices such as authSlice.js, book-ingSlice.js, and noticationsSlice.js to maintain global appli-

      Using a non-negative weight wr (for example, wr = 1 for all users or higher values for premium subscribers), the objective is to maximize the number or total priority of accepted booking requests:

      L L

      max wr xr,c. (2)

      rR cC

      L

      Each booking request can be assigned to at most one court:

      xr,c 1, r R. (3)

      cC

      For every court c and time slot t, at most one active booking may occupy that slot. Let Rc,t denote the subset of requests that are compatible with court c and slot t. The capacity constraint is

      cation state efciently.

   5. Database Entity Design

   rLRc,t

   xr,c 1, c C, t T. (4)

   The database layer adopts a relational schema that models the core domain entities and the relationships between them, in line with standard ER-based design practices. The User entity stores attributes such as id, name, phone, email, password, and

   Membership plans and business rules can be incorporated by modifying the weights wr (e.g., assigning higher wr to premium users) or by adding side constraints that guarantee a minimum allocation for each subscription tier. [13][50] From

   the optimal solution, the utilization of a court c over a planning horizon of |T | slots is computed as

   L

   = 1 y

   c |T |

   tT

   c,t

   , (5)

   where yc,t = 1 if court c is occupied at time t and 0 otherwise, directly reecting the court usage patterns maintained by the backend booking APIs.

4. Experimental Design and Results

   1. Authentication and Role-Based Routing

      The authentication system implements JWT-based state-less sessions consistent with industry best practices. Upon successful login, the server returns a JWT containing the users role claim. The authSlice stores the token and decoded user object in the Redux store. React Router DOM routes are conditionally rendered based on the user object available through useSelector, ensuring that unauthorized users cannot access protected dashboards:[12][13]

      The fetchMe thunk performs silent re-authentication on pagerefresh by calling GET /auth/me, restoring the user session from the server without requiring re-login. This pro-vides a seamless experience comparable to commercial appli-cations.[14]

      Fig. 3. Working Frontend

   2. Court Booking Workow

      The booking workow in Book My Court follows a struc-tured four-stage process. First, in the Discovery stage, the Home.jsx component displays a dynamically generated list of sport categories (for example, badminton, lawn tennis, and table tennis), with each card linking to a dedicated booking route and passing the selected sport as a query parameter. Next, during Slot Selection, the booking screen queries the backend for available courts via GET /courts and uses func-tions such as bookingSlice.listCourts and checkAvailability to load slot availability for the chosen sport and date. In the Booking Creation stage, once the user conrms a slot, the createBooking asynchronous thunk issues a POST /bookings

      Fig. 4. Admin Dashboard

      Fig. 5. Admin Login

      request containing the selected court, date, and time range; the server responds by creating the booking record and generating a unique qrCodeData token for that reservation. Finally, in the Conrmation stage, Conrmation.jsx retrieves the most recent booking from the Redux store and renders the corresponding QR code, which serves as the digital token for on-site veri-cation by court staff.

   3. Booking Lifecycle Management

      After a reservation is created, players retain full control over its lifecycle through the Bookings.jsx module. This screen allows users to cancel a booking by issuing a POST /book-ings/:id/cancel request with a cancellation reason, upon which the booking status is set to cancelled and the corresponding time slot is released back into the availability pool. Similarly, rescheduling is handled via POST /bookings/:id/reschedule, where the client submits the new date, start time, end time, and justication; the server then veries that the requested slot is free before conrming the update. The same interface

5. Discussion

   1. System Strengths

      Fig. 6. Court Attendant Login

      also surfaces pending solo match invitations, enabling players to accept or decline them directly from the bookings view. To keep the interface responsive, Redux Toolkit applies optimistic updates to the local state, which are subsequently conrmed or rolled back based on the outcome of the asynchronous thunk resolved via .unwrap(), ensuring a smooth and consistent user experience.

   1. Solo Match Matchmaking Module

   The SoloMatch.jsx module is one of the platforms most novel features. It enables a player seeking opponents or partners to broadcast availability and receive match propos-als:[15][6]

   The exible boolean parameter enables the matchmaking logic to consider partially overlapping time windows rather than requiring an exact slot match, which increases the likelihood of successfully pairing players. When a match is found, both participants receive immediate feedback through toast-based notications: a solo invite pending message informs the recipient that a new invite has arrived, solo invite accepted conrms that their request was approved, and solo invite declined indicates that it was turned down, each styled with appropriate informational, success, or warning variants. These notications are driven by a polling mech-anism implemented in the Layout.jsx component, where a useEffect hook periodically dispatches fetchNotications for authenticated users and then marks any retrieved items as read, ensuring that the UI stays synchronized with the backend without requiring manual refresh.

   Book My Court sets itself apart from earlier academic prototypes by the richness of its role-based architecture. Whereas many existing systems add an admin interface as an afterthought, this platform is designed from the outset around four clearly separated operational roles, each with its own workow and responsibilities. The dedicated Court Attendant role is especially important, as it models real on-site operations where human staff still control physical access and QR-based check-ins, rather than relying solely on fully automated gate systems.[3][4]

   The solo match module targets a clear gap in how play-ers typically arrange casual games. Instead of forcing users to coordinate manually through external messaging apps, it offers a built-in, structured ow with explicit invitations, accept/decline responses, and immediate in-app notications. This is reinforced by the exible parameter in the matching logic, which lets the system consider partially overlapping time windows and therefore improves the chances of nding compatible partners for users with changing or constrained schedules[6][15]

   The QR-based check-in mechanism adds a crucial layer of physical verication that tightly links a digital reservation to actual court usage. For every booking, the system generates a unique qrCodeData token that is validated exclusively by the designated court attendant at entry, making it difcult for players to occupy courts they did not reserve or reuse codes from cancelled bookings.[9][8]

   B. Limitations and Challenges

   There are, however, several clear avenues for enhancement. At present, the payment layer relies on a mock ow for handling subscription purchases; although the API design is compatible with real-world gateways such as Razorpay, it has not yet been hardened with production-grade security con-trols or end-to-end transaction reconciliation. The solo match module also uses a straightforward parameter-based lookup rather than a true recommendation engine, suggesting that techniques such as collaborative ltering or preference-aware scoring could be introduced to boost match relevance. Finally, notications are delivered via periodic polling on page load instead of a WebSocket- or push-based channel, which can add avoidable latency for time-critical solo match invitations compared with real-time delivery patterns recommended in modern notication systems.[5][2]

   C. Security Considerations

   In the current design, authentication relies on JSON Web Tokens using the conventional Authorization: Bearer ¡token¿ header pattern for securing API calls. Access control on the frontend is enforced by checking the Redux authentica-tion state before rendering protected routes, which prevents unauthenticated users from reaching restricted views. For a production environment, however, the lack of refresh-token

   rotation and a formal token revocation mechanism is a no-table security limitation. A more robust setup would use short-lived access tokens combined with secure, HTTP-only refresh cookies and server-side revocation lists or blacklists, aligning with hardening practices recommended for modern JWT-based systems.[13][12]

6. Conclusion

This paper has presented Book My Court, a comprehensive, multi-role web-based platform for sports court booking and facility management. By combining four-role RBAC (Player, Owner, Attendant, Admin) with real-time solo player match-making, QR-codebased physical check-in, tiered subscription plans, and end-to-end booking lifecycle control, the system di-rectly tackles limitations observed in both academic prototypes and commercial applications. Built as a React.js single-page application with Redux Toolkit for state management, it de-livers these capabilities within a single, cohesive architecture. The modular component structure, consistent Redux pat-terns, and role-aware routing together yield a scalable and maintainable codebase that aligns well with contemporary industry practices. A comparative review of related work indi-cates that no prior academic system offers the same breadth of features across all stakeholder groups, particularly in terms of attendant-mediated check-in and structured matchmaking.At the same time, the architecture remains extensible, providing a clear path to integrate AI-driven matchmaking, production-grade payment gateways, and IoT-based occupancy sensing in

future iterations.[16][12][13]

Book My Court illustrates how a thoughtfully engineered single-page application, backed by disciplined state manage-ment practices, can reach near production-grade quality even within the scope of an academic project, offering a concrete contribution to both modern web software engineering and the practical management of sports facilities.

References

1. D.K. Singh, S. Khan, L. Thakre, V.V. Mukkawar, J.V. Shukla, Global Trends of IoT in Pharmaceutical Industry: A Bibliometric Analysis of Scopus Database, in Proc. 11th ICCCNT, 2023.

2. Safe Food Advocacy EU, Plastic Overshoot Day 2024: Global waste crisis surpasses management capacity, 2024.

3. Our World in Data, Packaging is the source of 40% of the planets plastic waste, 2024.

4. Kamerai AI, The packing and shipping dilemma retailers need to solve at the earliest, 2024.

5. DS Smith, E-commerce Response Report: Last-mile delivery chal-lenges, 2025.

6. Precedence Research, Articial Intelligence in Packaging Market Re-port 2024, 2024.

7. Eurostat, Packaging waste statistics, European Commission, 2024.

8. J.M. Lagaron and A. Lopez-Rubio, Nanotechnology for bioplastics: opportunities, challenges and strategies, Trends in Food Science & Technology, vol. 22, no. 11, pp. 611617, 2011.

9. V. Kumar et al., Smart Solutions: AI and Sustainable Packaging A Mini Review, African Journal of Biomedical Research, vol. 27, no. 4s,

   pp. 954960, 2024.

10. F. Ceschin and I. Gaziulusoy, Evolution of design for sustainability: From product design to design for system innovations and transitions, Design Studies, vol. 47, pp. 118163, 2016.

11. H.K. Chan, A pro-innovation framework for sustainable packaging development, Packaging Technology and Science, vol. 31, no. 4, pp. 230243, 2018.

12. Z. Xia et al., A Comprehensive Review of Recommender Sys-tems: Transitioning from Theory to Practice, arXiv preprint arXiv:2407.13699, 2024.

13. Z. Xia et al., Contemporary Recommendation Systems on Big Data and Their Applications: A Survey, 2022.

14. E. Zitzler, M. Laumanns, and L. Thiele, A comparison of multiobjective evolutionary algorithms for design optimization, IEEE Transactions on Evolutionary Computation, vol. 4, no. 4, pp. 253271, 2001.

15. T. Trisna, L. Nurani, and Y. Yuniarti, Multi-objective optimization for supply chain management problem: A literature review, Decision Science Letters, vol. 5, no. 1, pp. 163176, 2016.

16. L. Breiman, Random Forests, Machine Learning, vol. 45, no. 1, pp. 532, 2001.

17. J.H. Friedman, Greedy function approximation: A gradient boosting machine, The Annals of Statistics, vol. 29, no. 5, pp. 11891232, 2001.

18. G. Biau and L. Devroye, A New Overview of Random Forests. Springer, 2010.

19. Z. Lin et al., A Pareto-Efcient Algorithm for Multiple Objective Optimization in E-Commerce Recommendation, in Proc. ACM RecSys, 2019.

20. R.M. Zulqarnain et al., Multi-Objective Optimization for Sustainable Supply Chain and Logistics: A Review, Sustainability, vol. 13, no. 24, 2021.

21. Shweta Borkar, Payal Ghutke, Wani Patil, Sonali Joshi, Swati Sorte, A Review of Pick and Place Robots for the Pharmaceutical Industry, in Proc. ICETET-SIP, 2023.

22. Devashish Vikas Wanjari et al., Study of strain induced martensite and its reversal on sensitization behaviour of metastable austenitic stainless steel, 2022.

23. Inayat Ullah and Rakesh Narain, Linking supply network exibility with mass customization capability, Journal of Business & Industrial Marketing, vol. 37, no. 11, pp. 22172230, 2022.

24. Snehal B. Kalambe and Trushna Deotale, Design and Implementation of Weight-based Sorting Mechanism using IoT, in Proc. I-SMAC, 2023.

25. Snehal Kalambe, Trushna Deotale, Swati Paraskar, Enabling Smarter Sorting: IoT Based Weight-Based Sorting Mechanism for Diverse Ap-plications, in Proc. ICUIS, 2023.

26. Ganesh Khekare et al., Internet of Things Based Best Fruit Segregation and Taxonomy System for Smart Agriculture, 2021.

27. Apeksha Rane et al., Design of An IoT based Smart Plant Monitoring System, in Proc. ICETET-SIP, 2022.

28. Laxman Thakre et al., Implementation of Soldier Tracking and Health Monitoring System, in Proc. ICETET-SIP, 2022.

29. Darshana Raipure et al., Implementation of Photovoltaic Based EV Charging System Using Inductive Charging System, in Proc. ICDICI, 2025.

30. A. N. Golatkar, A. Vinod Thawari, A. M. Yadav, R. Agrawal,

    S. Sorte and L. Thakre, Design of Secured Multifactor Finger-print Authentication System for Bank Employee, 2022 3rd In-ternational Conference on Electronics and Sustainable Communica-tion Systems (ICESC), Coimbatore, India, 2022, pp. 662-667, doi: 10.1109/ICESC54411.2022.9885549.

31. S. B. Derkar, D. Biranje, L. P. Thakare, S. Paraskar, and R. Agrawal, CaptionGenX: Advancements in Deep Learning for Automated Image Captioning, in 2023 3rd Asian Conference on Innovation in Technol-ogy (ASIANCON), Ravet, India, 2023, pp. 18, doi: 10.1109/ASIAN-CON58793.2023.10270020.

32. Leena Sharma, Senior Embedded Software Engineer, Sahasra Electron-ics Solution Limited, 68AA, NSEZ, Noida, 201305.