Osada Vidath Chandrasekara
Osada's Blog

Osada's Blog

Introducing Wordable - The Better Wordle ๐ŸŸฉ๐ŸŸจโฌ›

Introducing Wordable - The Better Wordle ๐ŸŸฉ๐ŸŸจโฌ›

Enjoy Classic Wordle Even More ๐Ÿ˜‰

Osada Vidath Chandrasekara
ยทFeb 22, 2022ยท

7 min read

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

Introduction ๐ŸŸฉ๐ŸŸจโฌ›

Hey folks ๐Ÿ‘‹๐Ÿป,

I heard about the Netlify X Hashnode hackathon a few weeks ago and thought this is the best way to spend my February holiday. So here is what I built during that time.

Introducing Wordable - The Better Wordle ๐Ÿ˜‰

You might be like, "wait what? what do you mean by better wordle", don't worry, I will explain it from the beginning of this story. So as you all know wordle is trending on the internet right now, especially on Twitter. I don't think there is anybody who doesn't know how to cheat in the wordle game. So if you didn't know, it is as simple as this single line of code. Also, you can find all the words for the next few years if you take a look at the source code of wordle ๐Ÿ˜…. I'll leave that to you.

image.png

The Need For A Better Wordle ๐Ÿค”

After getting to know the problems with wordle. I told to myself that I need to fix this. So here I am with a web3 friendly better wordle called wordable ๐ŸŸฉ๐ŸŸจโฌ›. If you are thinking about what is the relation between web3 and wordable, I will come to that shortly. With wordable, I tried to solve all the problems I have with the current wordle.

What Wordable Really Can Do More Than Wordle โ“

Well, there are a few things that wordable can do but wordle can't, let's see what are those.

  1. Modern user interface.
  2. Share your game's grid with Twitter with a single click.
  3. Mint a unique NFT containing your game's grid ๐Ÿคฏ
  4. Last but not least you can't cheat or find the word list of the next few years ๐Ÿ˜ถโ€๐ŸŒซ๏ธ

My Tech Stack โš™๏ธ

Speaking of the tech stack, I tried to prioritize Netlify and choose others accordingly. Below are pretty much all the stuff I used to build Wordable

  1. Next JS
  2. Tailwind CSS
  3. Netlify Serverless
  4. MongoDB
  5. Thirdweb

For authentication, I used NextAuth JS and for the NFT minting process, I used express.

Demo ๐Ÿชง

Now I will walk you through the whole application and give you a little idea about what is Wordable.

First and foremost we have a modern homepage like this. The cool thing is the screenshot in the middle of the page changes according to the theme of the website and whether you are on a mobile device or a desktop. โ˜€๏ธ๐ŸŒ™ full_page.png

Currently, we only have a Twitter login and you will see why this is important in a bit. When you click on login with Twitter, you can authorize your Twitter account and go inside the app. Then you will see something like this.

image.png

In the left side panel, you can see the normal game board and in the right-side panel, there are all the games that you have already played.

You can play the game as if you were playing the classic wordle but notice that we are sending a request to the backend with the guess you made every time you submit the guess, this way we are able to validate the word without actually sending the word to the frontend. image.png

The Best Part - Sharing Your Result With The World Using Twitter ๐Ÿ˜Ž

Once you won the game, you will have a popup like this.

image.png

Now this is where the interesting part and all of my struggles began (will explain what were those in a later part of the article)

If you click on Tweet your win button, you will see a little loading indicator and hopefully a success message, then if you check your Twitter account ๐Ÿ˜Ž, voila image.png

Also optionally if you want to customize your tweet you can click on Copy Result to copy the game grid to the clipboard.

The Best Of The Best Part - Minting A Unique NFT ๐Ÿฆ„

Personally, I think this is the thing that is at the next level ๐Ÿš€. If you click on the Generate an Exclusive NFT button. You will be first prompted to authenticate with Metamask. Please note that we only support the Rinkeby network right now so if you are in a different network the popup will show a button for you to click in order to change the network.

Once you have done all of that, you will see that your NFT is minting in progress and check your open-sea profile to see more info about that. (Unfortunately, I am not able to keep the HTTP connection till the NFT is minted)

Also if you check your right-side panel, you will see how the information is updated. image.png

All of the NFTs that are minted by users will appear at this collection in opensea.

image.png

Video Demo ๐Ÿ“ฝ๏ธ

You can watch a video demo right here. Please note that the time to mint the NFT may vary, wait around 5 minutes and if the "See Your NFT On Opensea" button is displayed, you are good to go.

What If I lose The Game โ˜น๏ธ

image.png

Well, you will still be able to share your game grid to Twitter and copy it but you wouldn't be able to mint it as an NFT

So that is the whole functionality of this app.๐Ÿ˜Œ

Role of Netlify ๐Ÿ™‚

Netlify is used in many parts of this application. Mainly the whole app is hosted on Netlify. Even though I could easily use Next JS API routes, I opt-in for vanilla Netlify serverless functions, because I wanted to try out Netlify functions for a long time and the experience, was absolutely amazing ๐Ÿ”ฅ.

Linting & Code Quality ๐Ÿง‘๐Ÿปโ€๐Ÿ’ป

I primarily used ESLint for linting and to keep the code consistent and formatted across the project I used prettier.

Struggles ๐Ÿ˜ฉ

In this whole process, I had to deal with 5 major struggles.

  • Firstly I had to face issues with CSS. I spent countless hours trying to get the gameboard to a state where it looks good on mobile ๐Ÿ“ฑ.

  • Then I struggled a little bit to get the tweeting the game grid to work. Because I used Twitter OAuth 2, it didn't have many resources outside of the documentation. However, I finally got it to work.

  • The other problem came was when I was minting the NFT, the first problem was converting SVG to PNG, I tried with sharp at first, it worked but the fonts didn't work. So tried running a puppeteer instance and getting a screenshot, fonts worked but it didn't work on Netlify. I am not sure if I did something wrong but every example project on GitHub didn't work too. So I had to run it on a server environment (Heroku) for it to work.

  • Things got even weirder when I started minting the NFT because even though Heroku didn't have a 10 or 15-second timeout, we needed to send 1st byte within 30 seconds ๐Ÿ˜. (That's the reason I can't keep the connection as I mentioned above)

  • Finally, I was having problems with netlify.app domain because Next Auth needed the app URL ahead of time. I fixed that by adding a little snippet of code that redirects netlify.app domain to my custom domain.

Somehow I managed to fix all those issues and finish the whole project! Checkout wordable, contributions are highly appreciated and if there are any problems regarding the app, let me know.

Future Plans ๐Ÿ”ฎ

  • Post the first winner of the day to the official Twitter account.
  • Move from the test network to the main network.
  • Give users the ability to play custom and real-time games.

Finally thank you to Netlify and Hashnode for hosting this amazing opportunity and that's it about Wordable, let me know what do you think about Wordable down below in the comments. ๐ŸŸฉ๐ŸŸจโฌ›

UPDATE: Please try again if you couldn't mint the NFT before, Drastically improved the UX with minting the NFT๐Ÿš€.

UPDATE: Unfortunately, the live link will no longer work because I had to delete the twitter developer project to create another one. (Twitter allows only one project)

ย 
Share this