👀 Demo: [ Ссылка ]
🌱 Source Code: [ Ссылка ]
💬 Discord: [ Ссылка ]


📚 Resources
TailwindCSS: [ Ссылка ]
Framer Motion: [ Ссылка ]
Classnames: [ Ссылка ]
React icons: [ Ссылка ]

In this video, we are going to build a Typing Speed application by using React, Tailwind and Typescript.


Chapters:
00:00 Intro
00:50 Creating the React App
01:40 Installing TailwindCSS
03:21 Installing Framer Motion
03:44 Installing FakerJS
04:13 Installing Classnames & React-Icons
04:46 Project Structure
05:21 Applying the base style
07:51 Generating random words
09:08 Building the countdown Timer
10:03 Building the Restart Button
13:04 Showing the results
17:04 Showing the characters typed
21:56 Building the Caret
23:53 useEngine hook
24:45 useWords hook
26:46 useCountdownTimer
29:47 useTypings hook
35:53 Updating UserTypings component
39:05 Calculating the results
40:20 Managing the application state
43:45 Wrapping up
44:41 Final result
45:20 Outro

#react #tailwindcss #typingspeed #tutorial #programming

свернуть