In this video, we will build a react typing app like Typeracer. We will recreate all its typing functionality including marking of correctly and incorrectly typed characters, adding a cursor before the next character to be typed, adding timer and time-out functionality, typing progress car animation, showing current typing speed, and finally showing the result of typing. Results of typing will include speed, accuracy, duration, and the list of incorrectly typed words.
To build this project, we will use React with typescript, tailwind, and zustand for state management. In my view, this is the best project to build if you are learning to react.
CHAPTERS:
0:00 Introduction
1:00 App Setup
10:18 Core Typing Logic
27:48 Typing Logic Hook - Separate Logic From UI
32:58 Recap Code Logic
34:48 Add State Management Solution - Zustand
37:16 Get Random Text to Type
41:42 Add Start New Race Functionality
50:11 Mark Correctly / Incorrectly Typed Text
1:12:18 Add Cursor Before Next Character to be typed
1:17:32 Mark Input Element On Typo
1:20:28 Add Timer
1:25:55 Add Time Out Functionality
1:33:00 Add Race Track UI
1:38:53 Animate Car as Typing Progress and Show Current Speed
1:53:46 Add Text and Input Indicator Sign
2:03:31 Show Result Functionality
2:27:03 Final Testing and Adjustment
