Build Wordle in 20min with React.js! - wordle.plus

Build Wordle in 20min with React.js!

LearnCode.academy
Views: 15385
Like: 311
Using the right React.js stack makes a world of difference in web development! In this video, we’ll use Next.js, React.js, Tailwind CSS, and MobX to build Wordle from start to finish in right around 20min. (ok, mildly deceptive, 20min edited…it took me an hour to build it)

View the source code here:

Next.js allows us to build a web app immediately with no bootstrapping.
Tailwind CSS allows us to add styles to our page with no configuration and quick, modular results.
MobX gives us a simple way to define our data in a store fashion and keep it separate from our view layer.

14 Comments

  1. I miss your vids! I built my knowledge of Kubernetes on your Docker videos 🙂

  2. Would you consider helping me build my first website? I am so lost and I’d be so grateful. You can even make it a video

  3. Hi well . can you please please do can update for js tutorial . in your funny way PLAESE!!! . It's been 8 years . PLAESE , i learnd html and css just from your tutorials . they are so cool, funny and helpful..

  4. The submitGuess() function will never increment this.currentGuess if the user enters a word that does not exist in the words.json file. So if your just testing by typing in ASDFG and nothing happens when you press Enter, this is why. I solved this by adding else {this.currentGuess += 1} to the conditional. Although I suppose you could bypass the if statement all together. Why does it matter if the user types a real word or not? Anyway, great video! Thanks! 😀

  5. It is not about how quick you can dig a hole after 10 years of learning how to operate a spade, is it?

  6. Hey Will, Awesome video per usual! Love this stack that you have setup. Would be great to see a follow up with the stretch features some time. (User guess stats, flip animations, etc.)

  7. Nice if a little fast. I'm sure many will appreciate the speed of course, but a little more breathing might be good for newer people.

    There are a few other build a Wordle type videos that might be a bit slower paced

  8. Hi,Do you have any course in udemy or anything

  9. You seem to have a potential range error on 12:09. It is possible that Math.round(Math.random() * words.length) be greater than the last array index. Should have used Math.trunc() instead.

  10. Hi,

    great job, thank you. One question, in Qwerty.tsx I got this information: "Property 'store' does not exist on type '{}'.ts(2339)". I don't understand it and don't know how to fix it.

  11. I keep having a "TypeError: Cannot read properties of undefined (reading 'guesses')" error in the PuzzleStore file, even though I cloned your repository

  12. Hey man so I brainfarted when starting up vscode and exited out of stuff like the notes vscode gives you and stuff like that. What should i do to restart my app like new

Leave a Reply

Your email address will not be published. Required fields are marked *