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
Смотрите видео Build a Typing Speed App with React, Typescript, TailwindCSS & Framer Motion онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code With Gionatha 03 Август 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 8,52 раз и оно понравилось 27 людям.