Wordyl - Yet another Wordle clone!

s1varam — Tue, 01 Mar 2022 07:58:15 +0000

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!

My first React app - A simple Pokédex

s1varam — Sun, 27 Jun 2021 14:20:51 +0000

Totally new to React (and webdev), coming from Android background. Went through some HTML/CSS resources in freecodecamp/csstricks, then a couple of YT videos and React docs and built this simple Pokédex. Used React, PokéApi and Material-UI to build this.

Overall, had a great experience working with States, Components, API integration(way easier than Android lol), Material-UI(found it very difficult to customize).

Some of the features implemented in the application:

View basic details of each Pokémon
Filter Pokémon based on Region and Type
Sort Pokémon by ID/Name
Search Pokémon by its Name/ID
Dark mode toggle
Scroll to top
Lazy loading of images
Responsive design

Link to the Pokedex : here
Github repo : here

I know there is a lot of boilerplate code and my CSS requires optimization, but I hope it will improve with time. I need to know the areas that needs improvement and feedback is highly appreciated!

DEV Community: s1varam

Wordyl - Yet another Wordle clone!

My first React app - A simple Pokédex