Build a Typing Speed App with React, Typescript, TailwindCSS & Framer Motion

📚 Resources

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

[gionatha]

I've fixed some minor bug in the useCountdown and useEngine hooks. Be sure to check out the latest source code!

[feliks]

By far the best video I found. You deserve much more views and subs. very straightforward with great chaptering. I love you xoxo

[albert]

thanks for sharing, I really needed it

[alex_angri]

How long did it take for you to become this good at using hooks? And how did you practise when you were a beginner with hooks part of React?

[ComputersAreRealCool]

Great video 😄 Why did you use a ref for totalTyped in the useTypings hook, as opposed to useState? Where you are returning totalTyped.current, that will only update on re-render (e.g. when resetTotalTyped is called the value returned by the hook won't update until next render)

[aliemphizia]

May you help me | i need to add a sound when i 'm typing in this project ? how can i do it? just give me the idea and thanks again

[johnpaulrayco]

awesome!! thanks for the walkthrough. I have a question though, what IDE are you using? I am using VS Code and I can't install Tailwind CSS despite having node js in my pc. When i type the command for installing tailwind in the terminal, it says "npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. " do you know what causes this problem?

[dimitriuytterhoeven]

Hi @Gionatha !
Nothing happens when I type the letter "m" in the demo 😊
I tried different keyboard layouts

[ghostcyber]

This is dope...but if i use React without typescript..will it still work? Don't know much about ts

[codewithnws]

can i know the name of browser that you using?