977: We built a CSS Challenge platform

Scott and Wes break down how they built SynHax, the real-time CSS Battle app powering the upcoming Mad CSS tournament. From SvelteKit and Zero to diffing algorithms, sync conflicts, and a last-minute hackweek glow-up, this one’s a deep dive into shipping ambitious web apps fast.

Show Notes

•
00:00 Welcome to Syntax!

•
00:50 March Mad CSS (madcss.com) Tournament.

•
03:19 Brought to you by Sentry.io (sentry.io/syntax).

•
03:59 What the heck is a CSS Battle?

•
05:34 The tech stack.

•
06:30 Svelte Kit.

•
06:44 Zero Sync.

• Zero Docs (zero.rocicorp.dev)

•
Zero Svelte (github.com/stolinski/zero-svelte).

•
07:32 Drizzle (orm.drizzle.team/docs/overview).

•
07:58 Supabase (supabase.com).

•
08:23 Graffiti (graffiti-ui.com).

•
10:45 Sync Server.

•
12:10 Cloudflare Workers.

•
12:23 Local File System.

•
13:26 How Zero Works.

•
13:48 Zero Sync Client.

•
15:39 API server.

•
19:34 Dealing with states and conflicts.

•
24:25 The Hackweek Project.

•
25:29 The Diffing Algorithm.

•
35:22 The bugs.

Hit us up on Socials!

Syntax: X (twitter.com/syntaxfm) Instagram (instagram.com/syntax_fm) Tiktok (tiktok.com/@syntaxfm) LinkedIn (linkedin.com/company/96077407/admin/feed/posts) Threads (threads.net/@syntax_fm)

Wes: X (twitter.com/wesbos) Instagram (instagram.com/wesbos) Tiktok (tiktok.com/@wesbos) LinkedIn (linkedin.com/in/wesbos) Threads (threads.net/@wesbos)

Scott: X (twitter.com/stolinski) Instagram (instagram.com/stolinski) Tiktok (tiktok.com/@stolinski) LinkedIn (linkedin.com/in/stolinski) Threads (threads.net/@stolinski)

Randy: X (twitter.com/randyrektor) Instagram (instagram.com/randyrektor) YouTube (youtube.com/@randyrektor) Threads (threads.net/@randyrektor)