Super Wordle!

Jan 2023 - Jan 2023

#User Interface
#Games
Super Wordle! cover image

Technology Used

View Full Demo

Rebuilding Wordle, the Viral Hit

Wordle was definitionally a viral hit, created by Josh Wardle (another Brit living in Brooklyn) as a personal project, and later sold to the NY times for an estimated $3 Million after gaining 2 Million users.

Wordle is the classic story of a developer's personal project turning into a viral hit and taking the world by storm. It eventually sold to NYT for an estimated $3 Million, not too shabby!

It seemed like the perfect project to emulate, and an opportunity to improve my front-end development skills.

It was important to me to have this app run almost entirely on the client side, thereby maintaining a fluid user experience, as well as allowing a user to continue where they left off, should they choose to leave the page for a bit.

These requirements were perfectly met with two new technologies

While I did also use Tailwind, Nextjs, and Supabase, these technologies were not the primary objective and were only used at a surface level.

Designing for State

This project helped drill down how React state scoping works, and crucially, the unidirectional flow of state.

React State

Everything you see on a webpage can be a component in React. If we want that component to change properties during its lifetime, we need to assign that component a "state". The concept of state is relatively abstract, so let's use an example. Each letter on the keyboard in Wordle can have three states:

cover image

When we change the value of the state variable in our code, React will then alter the rendered component accordingly.

Unidirectional State Flow

To create neat encapsulation of components, React allows components to contain other components.

cover image

In React, State is allowed flow from parent to child only - hence the unidirectionality. The issue this causes, unfortunately, is that a child component cannot directly change the state of another sibling component.

cover image

This is perfectly fine for most websites as information is frequently requested at page load and the page is constructed from the top down i.e. from grandparent --> parent --> child. This is not fine for highly interactive user interfaces like Wordle. In this use case, we want a user interaction with any child e.g. pressing a letter on the keyboard to change a global state e.g. adding a letter to the current guess.

Zustand and Global State Management

The solution to the unidirectional state-flow problem is global state management. Zustand provides a simple tool that allows every component to interact with the state store and allows for intra-app interactivity, as a bonus, we can persist this state store between user sessions.

cover image

This makes it enormously easier to have a unified user experience, an interaction now any component can trigger an update to the state of the system as a whole and allow any other components to reflect the new state accordingly. In the wordle case, this simply means that keyboard letters and letterbox letters can maintain sync without requiring any page reloads.

React makes it look easy

Modern single-page web apps are giving a top-level user experience akin to that of built-for-device native applications. While they may emulate natively built apps in appearance, they do not emulate in internal complexity.

Imagine requesting the engineer "when the user clicks a certain letter on the wordle keyboard, make the background change color". Depending on how the engineers have designed their state management within the app this request is either a 5-minute job or a "back to the drawing board" level of rethinking to get it to work.

Gauging the difficulty of a feature request, and being able to explain at a high level why a request may be tricky to implement, is crucial to success in the technology sector. React, while creating an unparalleled experience, obfuscates what is going on under the hood, causing a false sense of simplicity to those that are not directly familiar with a specific implementation.

I hope that the evolution of this technology drives in the direction of transparency where realized complexity nears equal to assumed complexity, opening channels of communication between both technical and non-technical team members.

Hand built with React & Next.js by Phil Labrum © 2023