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-bet...
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- / 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/djan...
------------
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