Wordle

TL;DR

I love Wordle, so I built a clone with unlimited game play, additional game modes, and live solving capabilities.

Play it here → 🟩 🟩 🟨 ⬜ 🟩 ** mobile optimisation incoming

Source code here → 💾 💾 💾 💾 💾

Overview

A Wordle web application clone with unlimited gameplay, additional 4 and 6-letter game modes, and live solving capabilities.

Technologies

React | JavaScript | CSS | Vercel

Features

🎮 Existing Wordle features 🕹️ 4, 5, and 6-letter game modes ♾️ Unlimited gameplay

🌓 Dark / light mode ℹ️ Helper and end-of-game modals 📽️ Game animations and transitions

Upcoming Features

📱 Mobile compatibility 🤖 Live solving functionality

🔍 Jest unit testing 🍃 Integrate Tailwind CSS

v1 - Lockdowns

Wordle launched in the throes of the COVID-19 pandemic. Its addictive gameplay, limited daily releases, and easily shareable results were a perfect combination for a world craving connection and shared experiences. It quickly became a sensation, offering a surprising way to socialise and connect during a time of isolation and lockdowns.

I was one of those players. Flashback to December 2021, weighed down by Melbourne lockdowns I eagerly awaited each day’s Wordle puzzle.

Developed by Josh Wardle as a gift for his partner, Wordle started as a small personal project, but through organic adoption and the New York Time’s acquisition, Worlde reached two million active weekly players at its peak. What a testament to the power of personal projects! One engineer conceived, developed, tested, and deployed Wordle. A simple puzzle for a loved one morphed into a global sensation.

Could I build Wordle?

The engineering seemed achievable. The game's success was rooted brilliant in game design and charming simplicity rather than complex technology. It’s story sparked inspiration, and instead of waiting for daily releases I could play whenever I wanted!

At the time my programming experience was limited to university coursework and assignments. This presented an opportunity to venture beyond the classroom. I chose Python, dove into PyGame tutorials, and was on my way.

Simultaneously, I was trying to improve at Wordle. I was often stuck, staring blankly at a screen desperately trying to conjure a guess, any guess, that met the daunting criteria. I turned to Youtube and found communities discussing game strategy, information theory, and opening word selections. I also found solving scripts and AI helper bots, each with their own unique solving techniques rooted in linguistics and heuristics and mathematics way beyond me. These were cool, but predominantly operated within the console or were limited to single word suggestions. They lacked visualisation. This could be my clone’s point of difference.

I added a solve feature so that when stuck the user could hand over control to a bot and watch as it played the game. I built it. It worked! Sometimes. It was janky, poorly formatted, horribly optimised, but functional!

v2 - The Return

Two years later, with several web and mobile applications under my belt, I’ve returned with a renewed determination to transform my ugly little clone into a polished application boasting industry-standard UI andUX features. I think it’ll be cool to juxtapose my capabilities in 2022 against 2024.

The goals: complete UI and UX overhaul - animations, transitions, light & dark mode, all that stuff. Expanded game modes and features. 3x improved solving algorithms. Deploy and share with friends. Get feedback, improve, repeat.

I switched stacks to React x JavaScript, introduced additional game modes Wordl and Wordlee (4 and 6-letter variants), and opted to write the css without frameworks - animations and all. I used Gist repositories to store valid dictionary words and solution pools, sourced Karnak Pro font as replica of Wordle’s official typography, and deployed and hosted using Vercel.

Thats the quick of it. There were many ups and downs to get there, and many powerful lessons about React. Integrating my solving functionality has presented challenges with asynchronous state updates and my usage of context providers. I’ll figure it out. But for now this feature is still in development. I’ll detail all these hurdles and the lessons they produced soon.

v3 - The Horizon

Mobile Compatibility

Everyone plays Wordle on their phone. This should be playable on phones. The UI is currently configured for web use and lacks the dynamism to accomodate smaller devices. My frontend experience is limited. This project provided valuable insights into the capabilities of fundamental CSS and where it’s limitations lie. This is a great opportunity to gain more experience with a larger framework, and I’ll likely integrate Tailwind CSS to streamline the refactoring process.