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

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

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
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

——

[queuebit]

I spent 45 minutes following along so far.

And I am...
<CHECKS PROGRESS BAR>

5:22 into the video.

Thanks, Harry!

[Sammysapphira]

I love you live programming instead of getting everything perfect with jump cuts or copy pasting pre made snippets.
It makes reading the work flow much easier.

[Retrosenescent]

Thank you so much for making this :) I am working with React for the very first time for a project that I wanted to include on my resume to show experience with React, and my idea was to create a Wordle clone, but instead of storing all the data in a file, I wanted to store it in MongoDB (to incorporate the full MERN stack). And also add a highscores functionality to compare with other players, and store their scores in MongoDB

[agilustre]

OMG! I have just started this yesterday and wanted more! Thank you for building one. 🙏

[dheerajs]

man it is always fun to hear your calming voice while learning something fun

[IRWBRW]

Crazy how well Copilot could guess the right code to write, and really good to combine that with tests.

[BookOfSaints]

Thank you for this! I tried this on my own before this video using context for global state, and nothing was updating properly. The issue was what you mentioned about stale references. I was calling a function from my context in the callback to the document event listener. I took the probably non optimal approach of reattaching the event listener to the document when certain state changed. Works like a charm now!

[sthefanocarvalho]

Best clone of wordle!
Thank you for this one!
You've just got a sub!

[denhed]

must also be the most popular app for developers / youtuber to make a clone of. Would almost be interesting with a movie that compares the different clone solutions that now exist =)

[prerakjain]

Waiting for "Where Did I Go Part 2?"

[tobias-edwards]

haha no way, I was gonna do the same in Svelte to force myself to learn it (not the most unique idea I know, but quite fun)

[TrowSonny]

yeah, really good video tuto but unfortunately very hard to follow along since you are using a lot of stuff that aren't available to us. too bad :(

[tobias-edwards]

You code so fast... I then realised I was watching on x1.5, still pretty quick though

[kennethd]

For the error you were seeing when trying to use .toBeInTheDocument(), I think you can fix that by importing at the top of the file