DEVELOPMENT OF THE CLIENT-SIDE PART OF A MULTIPLAYER KEYBOARD TRAINER USING REACT AND WEBSOCKET TECHNOLOGIES

Abstract

Introduction. The increasing volume of digital communication and the spread of
remote work and learning enhance the importance of keyboard typing skills. This competence is
essential not only for IT professionals but for a wide range of users: students, office workers,
journalists, and researchers. Specialized typing trainers with feedback on speed and accuracy are a
proven tool for developing this skill. However, most available solutions either focus exclusively on
individual practice without a social component or provide multiplayer mode without comprehensive
session analytics and personalized interface. From a technical perspective, a real-time multiplayer
trainer presents challenges not present in individual trainers: synchronous state transmission with
minimal latency, correct handling of player connections and disconnections, concurrent server
resource access, and a responsive interface.
Purpose. The aim of this work is to develop the client-side part of a multiplayer keyboard
trainer using the technology stack of React.js, TypeScript, TailwindCSS, and ActionCable/WebSocket,
enabling real-time competitions, user authentication, and session result analytics.
Results. A comparative analysis of three popular keyboard trainer web applications –
TypingClub, Nitro Type, and 10FastFingers – was conducted. The analysis revealed that none of these
solutions combines real-time multiplayer, detailed session analytics in graphical form, personalized
interface with theme switching, and modern authentication mechanisms. Based on this, the
requirements for the developed application were defined.
The client-side is implemented as a Single Page Application (SPA) using React.js with hooks
and the Context API for state management. TypeScript provides compile-time type safety, which is
especially important for WebSocket message structures. TailwindCSS enables dynamic theme
switching across five color schemes without separate CSS files. ActionCable over the WebSocket
protocol (RFC 6455) ensures low-latency bidirectional communication between game participants.
Two authentication flows are implemented: JWT-based (RFC 7519) and Google OAuth2. The
GameRoom component supports both offline practice and online multiplayer modes, determined by
the presence of the room_id route parameter; character-by-character accuracy tracking and speed
synchronization via WebSocket are implemented. The LeaderBoard component provides search and
bidirectional sorting by accuracy and speed. The MultiplayerRoom component enables browsing and
creating game rooms with sorting by password status, player count, and lock status.
Conclusion. The developed application combines real-time multiplayer functionality, detailed
session analytics, flexible interface personalization, and standard-based authentication mechanisms –
a combination absent in any of the analyzed existing solutions. The technology stack ensures code
reliability at compile time (TypeScript), minimal latency in multiplayer synchronization (WebSocket,
RFC 6455), component reusability and predictable state management (React with one-way data flow),
and styling flexibility (TailwindCSS). Directions for further development include adaptive text
selection algorithms based on user skill level, support for group competitions with more than two
participants, and server-side rendering for improved initial load performance.