Sponsored by Temporal — What could you create if you had 30 minutes to plan and 4 hours to build? Adam Argyle, Lane Wagner, Sarah Shook, Nikki Meyers, Shashi Lo, and Nick Taylor took on the Web Dev Challenge to find out.
*THE CHALLENGE*
_Build a game that’s played on at least 2 devices._
Single player, multiplayer, cooperative, competitive, or something totally different — your challenge is to come up with something fun that is played across at least two devices. Temporal’s workflow tools will allow you to manage sending information between devices dependably.
Your game could be something like Jackbox, where a tv is the “game board” and each player’s phone is how they interact with it on their turn. You could make a game that uses phone APIs like the camera or gyroscope. Or you can implement a simple word game like the New York Times connection puzzles, but with the twist that it's designed to be solved collaboratively, and a session can persist beyond the players closing the web app.
*THE TOOLS*
Your app must use Temporal (https://codetv.link/temporal) as part of the build. Temporal provides SDKs for Go, TypeScript, Python, .NET (C#), Java, and PHP, so you can use the language of your choice.
Temporal is a durable execution platform, which means you can orchestrate really complex logic across multiple services in a way that’s resilient, flexible, and — to use their words — invincible.
For this challenge, these resources might be especially useful:
- Getting started with Temporal: https://learn.temporal.io/getting_started/
- Message Passing documentation: https://docs.temporal.io/develop/go/message-passing
- Interacting with Temporal Workflows: https://learn.temporal.io/courses/interacting_with_workflows/
- Temporal’s Code Exchange: https://temporal.io/code-exchange
If you want to see an example of a real-time game that was created using Temporal, take a look at the keynote demo from their 2024 Replay Conference: https://github.com/temporalio/replay2024-demo
*THE DEVS*
Adam Argyle (@AdamArgyleInk) https://nerdy.dev
Lane Wagner (@bootdotdev) https://www.boot.dev
Sarah Shook https://shook.codes https://linkedin.com/in/sarahshook
Nikki Meyer https://www.linkedin.com/in/nikki-meyer/
Shashi Lo (@codingwithshashi) https://www.linkedin.com/in/shashilo https://x.com/shashiwhocodes
Nick Taylor (@nickytonline)
*THE ADVISORS*
Alex Garnett https://www.linkedin.com/in/chicken-sandwich/
Jason Lengstorf (@codetv-dev) https://jason.energy/links
*THE APPS*
- Sarah and Nikki's Breakin' the Law: https://github.com/shookcodes/breakin-the-law
- Nick and Shashi's Connect 4 backend: https://github.com/nickytonline/connect-4-backend
- Nick and Shashi's Connect 4 frontend: https://github.com/shashilo/connect-four
- Adam and Lane's Flappy Face: https://github.com/wagslane/flappyface
Tech used in this episode includes Go, CSS, JavaScript, Nuxt, Vue, Tailwind, TypeScript, React, Storybook, Node.js, WebSocket, and more.
*THE GEAR*
The workstations in this series are made possible through sponsorships from these wonderful companies:
- BenQ RD280U monitors: https://codetv.link/benq
- Uplift Desks: https://codetv.link/uplift
- Keychron K8 Pro keyboards: https://codetv.link/keychron
- Anglepoise desk lamps: https://codetv.link/anglepoise
- Ugmonk desk accessories: https://codetv.link/ugmonk
See the full desk setup here: https://codetv.link/uses
*THE STUDIO*
CodeTV Studio was built with generous support from Algolia. Add search to any app fast: https://codetv.link/algolia
----------------------------------------------------------------------
Get early access to new videos, exclusive bonus content and other perks, and join me in building a happier, healthier, friendlier web dev community!
https://codetv.dev/support
----------------------------------------------------------------------
Chapters:
0:00 In this episode...
0:34 Welcome + the challenge
0:51 Required tool + meet your advisor + what is Temporal?
2:07 Planning phase starts
2:20 Meet Adam and Lane + their app idea
4:19 Meet Sarah and Nikki + their app idea
5:03 Meet Nick and Shashi + their app idea
8:11 Advisor Jason Lengstorf weighs in on the teams' plans
8:31 Build phase starts
12:24 Progress check ins
16:26 Late stage check ins
20:21 Team Sarah + Nikki app demo
23:44 Team Nick + Shashi app demo
26:46 Team Adam + Lane app demo
31:23 Closing thoughts