Build a Typing Speed App with React, Typescript, TailwindCSS & Framer Motion
👀 Demo: https://speed-typing-ten.vercel.app/
🌱 Source Code: https://github.com/CodeWithGionatha-L...
💬 Discord: / discord
📚 Resources
TailwindCSS: https://tailwindcss.com/docs/guides/c...
Framer Motion: https://www.npmjs.com/package/framer-...
Classnames: https://www.npmjs.com/package/classnames
React icons: https://www.npmjs.com/package/react-i...
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
Watch video Build a Typing Speed App with React, Typescript, TailwindCSS & Framer Motion online without registration, duration hours minute second in high quality. This video was added by user Code With Gionatha 03 August 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,52 once and liked it 27 people.