Скачать или смотреть Web Games (build an app in 4 hours) · Web Dev Challenge S2.E2

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_sta...
Message Passing documentation: https://docs.temporal.io/develop/go/m...
Interacting with Temporal Workflows: https://learn.temporal.io/courses/int...
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/replay2...

THE DEVS
Adam Argyle (‪@AdamArgyleInk‬) https://nerdy.dev
Lane Wagner (‪@bootdotdev‬) https://www.boot.dev
Sarah Shook https://shook.codes   / sarahshook  
Nikki Meyer   / nikki-meyer  
Shashi Lo (‪@codingwithshashi‬)   / shashilo   https://x.com/shashiwhocodes
Nick Taylor (‪@nickytonline‬)

THE ADVISORS
Alex Garnett   / chicken-sandwich  
Jason Lengstorf (‪@codetv-dev‬) https://jason.energy/links

THE APPS
Sarah and Nikki's Breakin' the Law: https://github.com/shookcodes/breakin...
Nick and Shashi's Connect 4 backend: https://github.com/nickytonline/conne...
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