The cover image of the video course

Building the Wordle Game with Elixir and Phoenix LiveView

What You Will Learn in This Course

In this course we are going to build the Wordle game with Elixir and Phoenix Liveview

This course provides a great introduction to Elixir and Phoenix LiveView through a hands-on project.

To make a game like the Wordle game we will learn the following topics step by step:

  • Understanding Phoenix LiveView Callbacks
  • Managing click events with LiveView
  • Handling keyboard events with LiveView
  • Understand Live Components and how to integrate them with LiveView pages
  • Utilizing Elixir’s pattern matching for cleaner, more readable code
  • Separating game logic from presentation by designing a Game Engine Module
  • Implementing all the core logic of the game using Test-Driven Development (TDD)
  • Adding animations to your LiveView applications with Tailwind CSS and LiveView features
  • Employing minimal JavaScript to respond to client-side events without server-side events
  • Using push_events to communicate from server to client with LiveView
  • Creating a GenServer to manage the game state, understanding its main callbacks, and their applications

By the end of this course, you will have developed a fully-featured Wordle game to showcase to your friends and colleagues.

What You Will Get With This Course

Immediate and lifetime access to all course content, including videos and materials. Early access to upcoming classes designed to enhance the game even further.
About the Instructor

My name is Thiago Ramos, and I bring over 15 years of experience as a software engineer. My career has spanned various languages, platforms, and frameworks. While my current focus is on Elixir and Phoenix, I’ve also worked extensively with iOS (Objective-C and Swift), Ruby on Rails, and Java, developing everything from marketplaces and small games to ERPs and payroll systems.

You can follow me on X (Twitter) @thramosal

Special Offer

The course is available at a pre-launch price of $49.00, which is more than 50% off its regular price. This is a limited-time offer, ensuring early subscribers receive significant savings.

Lessons

5 Modules - 30 Lessons - 2h 37m total length - 1080p
Indtroduction
Creating the main interface for the game
Creating the Grid Interface
Preview
Creating the Keyboard Interface
Creating the core functionalities of the game
Where we will create the core functionalities of the game. You will be introduced to the GameEngine module and you will learn how to use TDD to develop with confidence.
Creating the Game Engine Module and creating the function to create a new game
What is TDD and why we are using it?
Integrating the Game Engine Module with Phoenix LiveView
Add Key Attempts to the Game Engine Module
Integrating Add Key Attempted with Phoenix LiveView
Remove Key Attempted function in the GameEngine Module
Integrating Remove Key Attempt function with Phoenix LiveView
Add function to confirm an attempt in the GameEngine Module
Integrate Confirm Attempt functionality with Phoenix LiveView
Learning about how to refactor code while Refactoring GameEngine Module
Preview
Adding the word field to the GameEngine Module and Removing the hard coded word
Adding state to the GameEngine Module
Creating Win/Lose Modal Page
Dynamically change CSS and message based on Game result
Adding Keydown events to Game
Forbid player to type invalid keys
Introducing letter states
Add colors to the Grid Tiles
Change state of the keyboard letters
Animations
This module will introduce to you the rotation animation and the pop animation that are common in the Wordle game.
Change TailwindCSS configuration to add rotation animation
Add Rotation Animation Effect to the Game Grid
Add Pop animation when the Player is typing the letters
Game Server and Multiple Words
In this section we will add our Game Server that will make it possible for us to hold the word of the day and to change the word each day.
Create the Game Servier
Add Word Catalog
Add validation to check if the word is a valid guess
Valid Guess Animation and UI Polish
In this module we will add our last animation and do some UI polish to make the game beautiful
Add Animation when player attempt an invalid guess
UI Polishing - Make the game look good
Deploy the game to Fly.io
Coming soon

Price: $49.00

Coupons
Reviews
5.0 (3)
5 Stars
100%
4 Stars
0%
3 Stars
0%
2 Stars
0%
1 Stars
0%
Created by The creator profile picture Thiago Ramos

Price: $49.00