The BETH Stack: Build Hypermedia-Driven Web Apps with Great DX and Performance

An opinionated way to build web apps in 2023 ------------- LIVE SITE (down rn because I needed the database for another project but new video coming soon)- https://the-beth-stack.fly.dev/ PROJECT REPO- https://github.com/ethanniser/the-beth-stack Bun - https://bun.sh/ Elysia - https://elysiajs.com/ Turso - https://turso.tech/ HTMX - https://htmx.org/ typed-html - https://github.com/nicojs/typed-html tailwind-css - https://tailwindcss.com/ drizzle - https://orm.drizzle.team/ hyperscript - https://hyperscript.org/ fly.io - https://fly.io/ FOLLOW ME ON TWITTER- https://twitter.com/ethanniser Content Credits: Snippets + Memes: Htmx Docs- https://htmx.org/ Snippets: Typed-html readme- https://github.com/nicojs/typed-html Snippets: W3 Schools- https://www.w3schools.com/django/django_add_link_details.php ------------ This video is NOT sponsored in any way. I have zero relation with any of these projects. I choose the stack because I though each part was cool. ------------ VS Code: Font - Fira Code Theme - Material Theme Darker Gear: Microphone - Shure SM58 Headphones - Philips SHP9500 Interface - Focusrite Scarlett 2i2 Timestamps: 0:00 Intro 0:15 HTMX 2:07 HTML templating 3:25 JSX is pretty good 4:17 typed-html 4:51 Bun 5:20 Elysia 5:45 Lets start building 6:55 Add JSX 7:23 Add HTMX 7:53 Add Tailwind 8:32 Todo list time 9:00 Reading Todos 9:34 Updating Todos 10:39 Deleting Todos 11:15 Creating Todos 12:04 Using a 'real' db 12:22 Turso 12:50 Create db schema 13:59 Using the db client 14:56 Client Scripting 15:27 Hyperscript 16:08 Time to deploy 16:14 Fly.io 16:51 The BETH stack 17:06 Outro