Build a Wordle Clone in ReactJS - Best React Project - wordle.plus

Build a Wordle Clone in ReactJS – Best React Project

PedroTech
Views: 39951
Like: 1020
The first 1,000 people to use this link will get a 1 month free trial of Skillshare:

In this video I will be going over how to build a Wordle Clone using React.

Word Bank:
Code:

Topics You Will Learn:
– Advanced React, React Hooks: UseState, UseEffect
– State Management – UseContext, Context API
– React/Javascript Logic, Wordle

Join our Discord:
🚀 Learn ReactJS By Building 6 Projects:
🐙 GraphQL Course:

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Linkedin:
Instagram:
Github:

Business Email: pedro@pedrotech.co

Tags:
– ReactJS Tutorial
– ReactJS and MySQL
– NodeJS Tutorial
– Wordle

Timestamps
00:00 | Demo
02:45 | Sponsorship
03:34 | Setting Up Board
23:02 | Keyboard
55:13 | Coloring Letters
01:03:06 | Getting Words From Word Bank
01:20:29 | Game Over

#reactjs #wordle

40 Comments

  1. Dude, amazing stuff thanks for everything! It would be cool to see like a twitter clone or linked in clone using React, redux toolkit and firebase v9. Most out are outdated

  2. Yes plz make the second part.. Plz plz… Lots of things we learn from you. Thanks Pedro

  3. i'm getting an error which says Word Not Found! Anyone got it? I've been trying to troubleshoot it for a long time

  4. I think the logic for checking if the word will fail if the word has an alphabet which appears more than once, eg: Shoot what about this ? If user enters scout or scoot wouldn't this fail ?

  5. Can you please make a video with email verification or OTP for login framework

  6. I am unable to type letter after first word is typed what's the issue can't understand?

    After lot of Time after debugging I copied your code but the same issue
    Plz help sir

  7. Pedro, thank your for this amazing project! I really appreciate you using Context API here. Can't wait to watch the second part 👏

  8. Many thanks, you really helped me to understand a lot of concepts in react js.

  9. What a legend. I will use the concepts learned here to incorporate this in my next project that will allow individuals to play three different games as part of an entire larger web application.

  10. Muito bom, mano!!!!
    Parabéns!
    God bless you!

  11. Hi Pedro, great tutorial! I'm just wondering if we could use class instead of IDs for the bigKey and colors? I think IDs should be unique in HTML. Thanks!

  12. The use effect function is not working in the app.js file. This is the error I`m getting "Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useEffect) is not a function" Do you know why?

  13. I completed this and am getting 'word not found' for everything, I tried cloning your repo and still got the same thing. Any chance you know what im doing wrong? thanks in advance!

  14. If anyone finding difficult to split the word just try this :-
    const WordArr = result.split(/r?n/);

    Keep Coding 🙂🙂

  15. Quick question. Why doesn't the game over win condition work once you switch over to the correctWord, setCorrectWord state? The lose condition will trigger, but the win condition never happens.

  16. its work my localhost but doesn't work on github pages. i have an error Word not found. Anyone help me ?

  17. An excellent video. Thank you Pedro. Just done slightly too fast for me, but that is a minor issue. Yes please to the next video that 'finishes off' Wordle.

  18. Hey @PedroTech great video 🙌. At 1:30:31 you guessed the word but it didn't render the GameOver component. And I poked around in the code and realized that currWord is in uppercase. And it's solved by adding .toLowerCase() in for loop in onEnter function.

  19. Good video BUT i have BIG problems seeing anything with that dark background och dark font-color, is it a div? a nav? bracket? conditionals… so hard to see…

  20. logic isn't good what about t that turned yelow when you geuused already', but relly nice tutorial

  21. Hey Pedro,
    Thanks for the video I tried out the code but I am getting the alert 'Word not found' after the first attempt no matter what I type and the game does not progress to row two.
    I tried using your code fromyour repo but same problem.

  22. You explained everything very nicely. Thankyou!!
    I was finding some course/video to clone quordle and then came across this video, helped me a lot.

  23. I have seen many wordle clone, but i think your's is the most efficient one, well structured

  24. I am stuck on the has function, what to do? its not searching through the word bank. I console logged and saw it was taking the correct input for searching only still it can't find the word.

  25. Pedro, Hello) In the very end of the video (1 hour 30 min) function 'almost' doesnot work acctially.

  26. 01:30:33

    t was in the word but it wasn’t highlighted as a yellow potential word

    and the correct word was write

    the yellow hint feature isn’t working

  27. Anyone else have an issue at to where the GameOver component is not rendering after implementing the random word functionality? I have everything working, even when the user does not get the correct word, but it does not change when I do the correct word. I think it has something to do with this part:

    let currWord = ''
    for (let i = 0; i < 5; i++) {
    currWord += board[currAttempt.attempt][i]
    }

  28. Thank you.

    And waiting for second part.

  29. but almost wright(yello part) thing is not working….

  30. I'm having problem with deployment, its working fine on my local but when I make it live of host it on netlify its breaking saying "Word is not found in bank" not able to figure out. If someone have done this please share. Thank you!

  31. when clicking letters on the keyboard, the letters appear vertically on the board, not horizontally. Anyone has a similar issue?

  32. at 1:30:39, your first guess was RIGHT which has the letter T(which is also a part of WRITE but not in the correct position) but it doesnt get highlighted in yellow. Is it because you are supposed to put the uppercase part for the almost part too?. Great video btw, learnt a lot.

  33. this video is very underrated
    explanation of your code in every step is perfect even for people that just started working with react
    thanks man <3

  34. Thank you for this tutorial 😊 Can we use this project in our portfolios and do we need to attribute you?

  35. I am getting the alert message for the correct words as well, can anyone tell where is the issue? i rechecked the code but I couldn't find the problem, can anyone suggest where it must have went wrong?

  36. great video pedrotech. was super fun hoping for more fun projects like this

  37. the error you didnt resolved is that if a person is gusseing a word that doesnt exist at the last attempt it is increasing the attempt count and thus having a gameover is triggered and resulting in failed.

  38. We can add a reset button if we want to, so the user can keep playing:
    // Reset the game function (Add right above first useEffect statement)

    const resetGame = () => {

    // Reload the page to reset the game

    window.location.reload(true);

    };
    // Add under return
    <button onClick={resetGame}>Reset Game</button> in app.js under <>h1Wordle </h1>

  39. Hello 😊

    I am trying to learn react and and I started with a long tutorial.
    I wanted to have some projects where can I apply the concepts learned, and seems the games can be good start, besides folowing the tutorial
    You explained it very well, nice tutorial, but for me seems that app function i's too big. I think you could have this in a separate file where you could have the provider there added, as a separate component.
    And then you can have wrap the 2 components, Board and Keyboard inside of it.
    But anyway, congrats and thank you!

Leave a Reply

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