Build A Wordle Clone With React In Under 3 Hours (Plus Tailwind, Vite, Vitest, and Zustand!)

Опубликовано: 09 Октябрь 2024
на канале: Harry Wolff

11,811

274

Here's a long tutorial on how to build Worlde with React, Tailwind, Vite, Vitest, and Zustand!

Finished code: https://github.com/hswolff/reacdle/
Live demo: https://hswolff.github.io/reacdle/

The original Wordle game: https://www.powerlanguage.co.uk/wordle/

0:00 Intro
1:58 Create git repo
2:46 Setup Vite
5:02 Setup Tailwind
8:52 Setup Vitest
17:34 All tooling setup!
18:00 Our word bank
20:32 Create word-utils.ts and tests
24:04 Create WordRow.tsx UI Component
34:58 The Core Algorithm
38:52 Core Algorithm Tests
43:05 Edge Cases for the algorithm
52:07 Render Correct Guess State in WordRow
1:00:56 Add Zustand for State Management
1:19:10 Support End of Game State
1:26:30 Tests for End Game State
1:34:33 Fix Rendering for Empty State
1:36:27 Refactor CalculateGuess into Store
1:44:13 Support Winning State
1:53:19 Support Global KeyDown Listener
2:07:56 Disallow Invalid Guesses - with tests
2:16:40 Show Answer in Modal
2:17:40 Create Keyboard UI
2:24:15 Make Keyboard Functional
2:29:53 Show Keyboard Letter State
2:38:19 Wrap up

——

DISCORD:   / discord

VOTE ON VIDEOS: https://votey-uppy.vercel.app/

NEWSLETTER: https://hswolff.com/newsletter/

PATREON:   / hswolff

TWITCH:   / hswolff11

TWITTER:   / hswolff

SITE: https://hswolff.com/