Building a Worldle Clone
with Phoenix LiveView

Let's build an application, together!

Dive into the world of real-time web applications with this comprehensive Phoenix LiveView Tutorial.

In this series we'll build a game using Phoenix LiveView to create our own version of the popular word-guessing game, Wordle.

Perfect for both beginners and experienced Elixir developers, this tutorial provides step-by-step instructions that show you how to leverage the power of Phoenix LiveView for building dynamic, interactive web applications.

A huge thanks to James Westbrook for working with me to adapt his Wordle game into this tutorial.

  • 13 episodes, totaling 1 hour and 32 minutes!
  • Craft a dynamic, real-time Wordle-clone web application using Phoenix LiveView.
  • Deepen your understanding of Phoenix LiveView's architecture and capabilities.
  • Acquire valuable Elixir programming skills applicable to a variety of web applications.
  • Create an interactive, user-friendly game!

What You'll Learn

Hands-On Learning
Follow along as we build a Wordle-clone, learning the intricacies of Phoenix LiveView in a practical, project-based approach.
From Basics to Advanced
Begin with basic setup and gradually dive into advanced concepts, including game mechanics and implementing real-time features.
Real-Time Web Features
Master the art of real-time communication in web apps, learning how to handle events, manage state, and update the UI seamlessly.
Interactive Gameplay Mechanics
Learn to implement game logic, handle user inputs, validate guesses, and provide instant feedback, all in real-time.
Custom Hooks and Animations
Dive into custom LiveView JavaScript hooks for enhanced interactivity, adding animations, and improving the overall user experience.
Responsive Design Techniques
Ensure your application looks great on all devices with responsive design strategies using Tailwind CSS.

Course Episodes

episode image

#177: Phoenix LiveView Tutorial Part 1

In this episode we begin creating our game by generating a new Phoenix LiveView application. Then we’ll set up the database, customize layouts with HEEx and Tailwind CSS, and update the router.

8m 9s
Watch Now →
episode image

Alchemist's Edition

#178: Phoenix LiveView Tutorial Part 2

This episode details setting up a Wordle-like game in Phoenix LiveView, covering creating two different database tables, populating them with 5-letter words using the WordList and NimbleCSV packages, and configuring routes and LiveView components.

11m 24s
Watch Now →
episode image

Alchemist's Edition

#179: Phoenix LiveView Tutorial Part 3

In this episode we’ll build a grid for our game. To do that we’ll create a couple different LiveView components to use for the cells, rows, and grid.

7m 53s
Watch Now →
episode image

Alchemist's Edition

#180: Phoenix LiveView Tutorial Part 4

In this episode we’ll create a keyboard component for our game. Using LiveView LiveComponents, we’ll add a dynamic keyboard to the application, and style it with Tailwind CSS and DaisyUI.

5m 50s
Watch Now →
episode image

Alchemist's Edition

#181: Phoenix LiveView Tutorial Part 5

In this episode we’ll start implementing our game logic. We’ll manage player guesses using Schemaless Ecto Changesets. Together we’ll walk through creating a module to handle guess validation and a module to encapsulate game logic.

4m 25s
Watch Now →
episode image

Alchemist's Edition

#182: Phoenix LiveView Tutorial Part 6

In this episode we’ll build the functionality that allows a player to add letters to their guess. We’ll update our LiveView to handle events from the keyboard and use them to update the game grid.

10m 0s
Watch Now →
episode image

Alchemist's Edition

#183: Phoenix LiveView Tutorial Part 7

In this episode, we update our game to allow players to remove letters from their guesses. This involves updating our KeycapComponent to send events to our LiveView.

2m 46s
Watch Now →
episode image

Alchemist's Edition

#184: Phoenix LiveView Tutorial Part 8

In this episode we update our game, allowing players to submit their guesses. We’ll build functionality to check if the guess is a valid word, comparing it against the game’s solution, and then updating the game’s state accordingly.

8m 47s
Watch Now →
episode image

Alchemist's Edition

#185: Phoenix LiveView Tutorial Part 9

In this episode we’ll update our game and add feedback for player guesses. We’ll update our LiveView to handle various guess outcomes. We’ll use flash messages to display the results of each guess.

4m 53s
Watch Now →
episode image

Alchemist's Edition

#186: Phoenix LiveView Tutorial Part 10

In this episode, we’ll update the guess feedback in our game by implementing custom JavaScript hooks and animations.

8m 56s
Watch Now →
episode image

Alchemist's Edition

#187: Phoenix LiveView Tutorial Part 11

In this episode, we’ll improve the guess feedback for our game with JavaScript hooks. We’ll focus on updating the background of a guess, to indicate the status of the guess.

13m 6s
Watch Now →
episode image

Alchemist's Edition

#188: Phoenix LiveView Tutorial Part 12

Similar to our last episode, here we’ll dynamically update the backgrounds of the keycaps on our game keyboard using JavaScript Hooks.

4m 47s
Watch Now →
episode image

Alchemist's Edition

#189: Phoenix LiveView Tutorial Part 13

We’ll let people play our game as much as they want! In this episode, we’ll refine the game’s flow and user experience by leveraging Phoenix LiveView to start a new game for users.

1m 57s
Watch Now →