Best Worst Video Player (build an app in 4 hours) · Web Dev Challenge S2.E3

Sponsored by Mux — What could you create if you had 30 minutes to plan and 4 hours to build? Michael Chan, Chance Strickland, Eve Porcello, Roxy Rodriguez-Becker, Braydon Coyer, and Devyn Coyer took on the Web Dev Challenge to find out. *THE CHALLENGE* _Build the most unhinged, Byzantine, devious, unusual video player UX you can imagine._ Programmer social media passes around intentionally bad UI designs every once in a while, and it’s both very fun and also deeply painful to see how creatively a developer can make something like a simple button hurt so much to use. Your challenge is to embody this kind of mischievous energy and build out a truly heinous video player UX built on top of the Mux video player base. The video *must* be actually playable (though we’ll let you get creative with what “playable” means). *THE TOOLS* Your app must use Mux (https://codetv.link/mux) as part of the build. Mux provides everything you need to deliver video, from video asset delivery and optimization to drop-in components that support advanced playback approaches like adaptive bitrate streaming. You’ll be using the Mux's open source Media Chrome library as a baseline for this challenge, and you’ll be playing a video that’s delivered via Mux. *THE DEVS* Chance Strickland: https://chance.dev https://bsky.app/profile/chance.dev Michael Chan (@chantastic) https://chan.dev Eve Porcello: moonhighway.com twitter.com/eveporcello https://bsky.app/profile/eveporcello.com Roxy Rodriguez-Becker: https://www.linkedin.com/in/roxana-rodriguez-becker https://twitter.com/RoxanaCodes https://www.instagram.com/grrfeisty Braydon Coyer: https://x.com/BraydonCoyer https://braydoncoyer.dev Devyn Coyer *THE ADVISORS* Dave Kiss Jason Lengstorf (@codetv-dev) https://jason.energy/links *THE APPS* - Braydon and Devyn's video player UI source code: https://github.com/braydoncoyer/web-dev-challenge-ui - Braydon and Devyn's video player API source code: https://github.com/braydoncoyer/web-dev-challenge-api - Chance and Chan's Mux 95 video player source: https://github.com/chaance/mux-95 - Eve and Roxy's video obstacle course: https://github.com/eveporcello/obstacles Tech used in this episode includes React, Mux Media Chrome, CSS, JavaScript, TensorFlow, and more. ---------------------------------------------------------------------- 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:33 Welcome + the challenge 1:06 Required tool + meet your advisor + what is Mux? 3:45 Planning phase starts 5:30 Meet Braydon and Devyn + their app idea 7:01 Meet Chan and Chance + their app idea 8:31 Meet Eve and Roxy + their app idea 10:19 Build phase starts 11:51 Progress check ins 15:57 Late stage check ins 20:00 Team Braydon + Devyn app demo 24:33 Team Chan + Chance app demo 28:54 Team Eve + Roxy app demo 32:36 Closing thoughts