After my first React project - Pokedex, it took a while before starting the next one. This time I made sure to learn and use functional components, since I used classes in the former one. Initially, I was so hesitant in switching to hooks, but once I got the hang of it, I found it to be easier than classes.
Now - what to build? Since I wanted to get familiar with hooks, I didn't want to build something complex. Hence I chose to build WORDYL - a simple clone of the sensational game everyone's playing right now (Wordle). Since I used Material UI in my previous app, I wanted to try something new and hence opted for Tailwind CSS.
What I built:
- Components : Gameboard (parent component that includes all the child components), Header, Keyboard, Letter-Tile, Modals.
- Used useState, useEffect and useContext hooks.
- Used word list from the og Wordle.
- Application theme based on device theme using useContext and ThemeProvider. Can also be changed manually.
- Doesn't have all functionalities of the og game like sharing guesses/ one day timer.
- Can be played unlimited number of times by hitting reset button.
- Stats displayed in the form of a graph - used ChartJS.
- Fancy confetti popup after guessing the correct word (react-confetti).
- Used compare-words npm package for comparing words.
- Data is stored in localStorage - so if site data is cleared, the progress would be lost.
- Used very minimal CSS in the places I found Tailwind to be a bit difficult.
- Used cogo-toast npm package for displaying toast messages.
- Responsive design.
- Tried using Framer Motion and Animate.css packages for animations, but unfortunately was unable to get them working as expected :/
Some snapshots of the application:
To-dos:
- Extend 5 letter words to more.
- Use keyboard for typing words.
- Add animations (like shake, pulse and reveal)
- Share progress
- Persistent user-data storage
You can find the source code here and you can play it here. Do star the repo if you like it! Suggestions are most welcome!
Top comments (0)