SvelteKit with Monorepos, Cloudflare Pages, Workers, Websockets & more! ☑️ LIVE Coding & Chill 🔴
Let’s learn more about Cloudflare, Websockets and building collaborative applications, by analysing and replicating the viral website One Million Checkboxes! Checking a box, checks it for everyone else in the world 🤯
It’s one of the few cases, where the vision means that performance and speed will really matter! Most frameworks are mature and performant enough nowadays to serve most app ideas… but when the idea is to actually render one million of anything on the frontend, as well as keep a load of connections active on the backend, then you *have* to benchmark, and drill into the implementation details!
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/cloudflar...
If you’re a beginner, you may want to start with our Portfolio "Paulina Puppers" series, and end up with the same or an equivalent project: • Brand new Fullstack App with Svelte 5...
Check around the channel for more playlists and increasingly complicated tech stack choices 🙌
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
✅ What are we doing today? A million checkboxes?! What can we learn from this?
✅ Johnnify Premium Starter overview: https://johnnify.com/premium
✅ Let’s render a vanilla HTML Checkbox! https://developer.mozilla.org/en-US/d...
✅ Deploy to Cloudflare Pages, with seamless Github integration! https://kit.svelte.dev/docs/adapter-c... & https://developers.cloudflare.com/pag...
✅ Let’s create a Cloudflare Worker! https://developers.cloudflare.com/wor...
✅ Websocket Pair with Cloudflare Workers! https://developers.cloudflare.com/wor...
✅ Let’s render 10 checkboxes, that the server toggles back!
[ ] “Serverless state” with Durable Objects: https://developers.cloudflare.com/dur...
✅ Deploying the production Worker with Github Actions! https://github.com/marketplace/action...
[ ] Virtualising?
✅ Total “Checked” count
✅ Updating the address bar too https://svelte.dev/docs/special-eleme...
✅ Fancier shadcn-svelte checkbox: https://shadcn-svelte.com/docs/compon...
✅ Final 🥳 DEMO
— NEXT STEPS —
[ ] More than checkboxes? Toggles? Collaborative drawing?
[ ] Active user count?
[ ] Eponymous-user only features?
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
One Million Checkboxes: https://onemillioncheckboxes.com/
Cloudflare: [https://www.cloudflare.com](https://www.cloudflare.com/)
SvelteKit: https://kit.svelte.dev/
Tailwind: https://tailwindcss.com/
Shadcn-Svelte: https://shadcn-svelte.com/
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 113!
—
TIMESTAMPS
—
00:00 - A million checkboxes?! What can we learn from this?
7:45 - Johnnify Premium Starter overview
14:30 - Let’s render a vanilla HTML Checkbox!
20:25 - Deploy to Cloudflare Pages, with seamless Github integration!
43:10 - Let’s create a Cloudflare Worker!
1:03:55 - Websocket Pair with Cloudflare Workers!
1:20:45 - Let’s render 10 checkboxes, that the server toggles back!
2:08:45 - Fancier ☑️ checkboxes!
2:25:35 - “Serverless state” with Durable Objects?!
2:37:20 - Manually deploying the production Worker!
2:50:30 - Deploying the production Worker with Github Actions!
3:03:30 - Total “Checked” count!
3:24:55 - Updating the page title too!
3:29:51 - Final 🥳 DEMO
Watch video SvelteKit with Monorepos, Cloudflare Pages, Workers, Websockets & more! ☑️ LIVE Coding & Chill 🔴 online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 372 once and liked it 14 people.