I Created My Own Wordle Using Azure Functions, Azure Cosmos DB, and Flutter

Level up your coding skills by solving puzzles

My Wordle

Wordle has been around for a while now but I heard about it only last week. I read about it in our friends’ WhatsApp group. Then we started sharing our scores by an hour past midnight every day. It’s great.

While it is such a fun game to play, it also seemed such a simple piece of software to implement. So why not give it a go? Yup, just like that I decided to create my own Wordle. Here’s how.

What’s different?

• While Wordle brings the entire list of words with it when the page is loaded (YES!), I have created an API to verify the words against. This API takes and verifies a word against the word of the day (stored in a DB).
• Wordle has a list of legit words and it allows you to input a word only from that list. On the contrary, I query a Free Dictionary API and validate if an input word is a legit English word.
• While Wordle is a website, I have created a flutter app. I have tested only on android yet but I have no reasons to believe it won’t work on iOS :).

The Database

I was looking for a cheap solution for a database because all it needs to store is a key-value pair of dates (yyyyMMdd) and word. I chose Azure Cosmos DB for it. I created a Cosmos DB, created a container in it, and added a few date, word pairs.

Azure Cosmos DB data explorer

The API

I wanted a cheaper solution for my API as well and opted for serverless (Azure Functions) because:

• My API is not resource intensive.
• It would be billed per request.

I created a new Functions project following this doc.
The Azure Function registers an input binding with the Cosmos DB and get a list of stored words on every request following this doc.

Cosmos DB input binding

The Functions API is now set to validate the input words. Let me break this into 3 segments:

• Validate the input word (not null, is of the same length as the word of the day), extract the word of the day from DB & convert to uppercase both.

• Check if both words are same (return prematurely), validate if it is a legit English word & create response. I am using a color code for each letter; ‘g’ if letter position matched, ‘y’ if letter found but incorrect position, ‘b’ if letter not found.

The status of each letter in the input word is determined by the getLetterStatus function.

Deployed API: https://wordle-api.azurewebsites.net/api/CheckWord?word=

Codebase: https://github.com/sharmavikashkr/wordle-function

The App

Why flutter? Well, I wanted to create my Wordle only to create it in flutter.

The word_field component

This component creates an input widget which accepts a 5 letter word in 5 boxes (1 for each letter). This is similar to creating an OTP field. A gist of a box for each letter below:

The home component

This component builds a scaffold and puts together a page to accept 6 attempts for words.

The states

I am maintaining 5 state variables in the home component:

• _attempts: holds the number of attempts executed so far.
• _wordColors: holds a list of 6 color codes (like ‘bggyb’; returned from the API). Each color code is passed on to the respective word_field component to fill the letter backgrounds accordingly.
• _wordsEnabled: holds a list of 6 bools to identify which word_field is accepting input. Other word_fields as disabled.
• gameover: holds a bool to store if the game is over.
• shareMessage: is built if the word of the day is successfully guessed and the game is over.

The _checkWord handler

This handler calls the wordle-api, gets the color code, and updates the components accordingly.

The shareMessage builder

This piece takes care of creating the share message if the game is successfully won.

Codebase: https://github.com/sharmavikashkr/wordle_app

Out of scope

• Actual sharing of shareMessage to social handles.
• The flip/shake animations of the letter/word widgets respectively (would love to add it soon).