Fast Typist Client

Fast Typist is a browser-based typing game that allows you to practice your typing skills! You must type a given word in no more than a given timelimit, if you type it correctly, your score increases, a new word gets generated, and the timer is reset. Otherwise, you ❌lose❌!!

This project is still under development, and it consumes the REST API and WebSocket Server provided by the Fast Typist Backend Project.

Features

✅ Practice Game Mode

Without having to log in, the player can start a client-based game session where their top score is automatically stored in the browser Local Storage. All the logic of the practice mode is handled on the client-side, there is no need to deal with the overhead of the connection between the backend and the client since this gamemode isn't included in any scoreboard and player scores aren't considered officially in the game. Therefore, even if a player exploits the the browser land to maliciously input high scores, they won't be considered and it would be only on their local storage.

✅ Single Player Game Mode

After logging in, the player initiates a WebSocket connection to the backend server where the client immediately receives a set of words. In this case, all the logic of generating new words, validating word inputs, calculating score, timers, and everything is done on the server side. The WebSocket connection is used to synchronize the frontend with the backend state in real time via SocketIO.

Sample flow of events:

⌚ [Next Release] Multiplayer Game Mode

Players would be able to create rooms, and send an invitiation link to their colleagues. They can then start the game, compete with each other to get the highest score without missing a word under a given timelimit! All the logic is also handled in the backend side, the frontend in this case is only responsible to reflect the backend state on the client efficiently.

⌚ [Planned Feature] Scoreboard

Players should be able to view a scoreboard of top scores in different time limits, search for a player's top score, sort by score, etc.

Technologies:

• TypeScript
• NextJS (React)
• SocketIO
• Zustand for State Management
• TailwindCSS for Styling

Demo Screenshots

• Practice Game Mode:
• Login Screen: