key-racing
What is key-racing ❓
Key-racing is a simple and easy-to-use keyboard trainer that help you master ten-finger typing skills, improve your typing speed and reduce the number of typos. Do you want to think about the algorithm, and not where is this button? Tired of running your eyes from keyboard to monitor and back? Then go here!
There are other learning platforms for speed typing, but only here you can arrange a competition that motivates the student.
Units ?
▶ Theory
This section explains what touch typing is, why and how to print correctly.
▶ Game
By typing quotes, jokes and phrases, you will increase your typing speed and be able to prepare for typing real texts. Here are two game modes:
? Single-player. You train yourself. The main criterion is time. The goal is to break your own record, learn how to type in less time with greater speed.
? Multi-player. This is a competition between different gamers. This is so-called race, when you try to type text faster than your opponent, overtake him. Also you can create two types of room: private and public. You can access in private room only by following the link. It is not visible in the general list of rooms.
▶ Rating
Here you can see your rating among all users.
▶ Settings
? Profile. In this section you can change your name, e-mail and profile photo.
? Security. Also you can you can turn off the display of your rating for other players.
? Game. User can change time limit before game and time for game for single mode.
How it works ❓
After entering the site, the user is registered using a username, email, password or using a google or facebook account. Authentication takes place using two types of JWT tokens. First, Access Token – information that a particular user is allowed to do. It is reusable and short-lived. The second, refresh token, is used to refresh a pair of access and refresh tokens. It also has two properties opposite to the first token: it is disposable and long-lived. Thus, an attacker using only the access token will gain access to the application for a very short time, and using both, the server will immediately generate a new pair, leaving the villain no chance.
Each user can choose their own avatar, it will be saved in AWS S3 using Multer. If no avatar is selected, initials will be displayed instead. The password will be hashed using Cryptr.
After registering or logging into an account, the user gains access to the game. He can train both independently and compete with other players.
The process of the game. The player is shown a text on the screen and he enters it from the keyboard. The system checks the correspondence of characters with the text and those entered by the user. The next character cannot be printed if the previous one has not been typed. For incorrectly typed characters, the user does not incur any losses, except for time.
In single-player mode, at the end of the game, the elapsed time, the number of characters typed, the speed and the graph of the number of typed characters in seconds are displayed.
To start playing in multi mode, you must either join one of the public rooms, or create your own private or public room. An invitation to a private room is sent to the mail, backed up to the account, in the form of a link to the room.
The game will not start if there are fewer than two people in the room. The maximum number of participants is 5. Each participant confirms his readiness. After that, the game starts. The course of the game will be commented on by the virtual host Escape Enterovich. His remarks will be displayed in text and voiced. He will also make jokes from time to time using the Official Joke API. The game ends when the time expires, or when someone types all the given text. After the game, the rating of the players with their recruitment speed is displayed.
The entire multiplayer game mode is socket based so that users can instantly see the changes of other participants. Room creation is also socket based. As soon as a new public room is created, it is displayed to all users.
Our web-application will host on Heroku. Express will be used as a web server. Database will host in Atlas Mongo Cloud.
Technologies ?
Frontend
⏹ React
⏹ Redux Toolkit
⏹ React-Bootstrap
⏹ SCSS
⏹ Official Joke API
⏹ Chart JS
Backend
⏹ Express
⏹ TypeScript
⏹ WebSocket
⏹ MongoDB
⏹ AWS S3, Multer
⏹ JWT
⏹ Cryptr
⏹ Googleapis
⏹ Nodemailer
⏹ React-facebook-login