NY Times Connections with SvelteKit! 🧩 CSS, Svelte 5 & SvelteKit 2 tutorial 🤖 LIVE Coding & Chill 🔴
Let’s tackle some interesting full-stack aspects, by building my favourite New York Times puzzle game, Connections!
We’ll do frontend with modern CSS including container queries, full-stack by persisting guesses and streaks in cookies, and backend by connecting to a Turso for user accounts. Users will be able to design their own Connections!
If you’re a beginner, you may want to start with that Portfolio series, and end up with the same or an equivalent project: • Brand new Fullstack App with Svelte 5...
Check around the channel for more playlist and increasingly complicated tech stack choices 🙌
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/connections
— 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 puzzle game?
✅ Let’s play Connections! https://www.nytimes.com/games/connect...
✅ Backend: a Game controller with a hardcoded grid!
✅ UI: Rendering our puzzle grid!
✅ Can I center a div? https://smolcss.dev/#smol-grid-centering
✅ Selecting guesses!
✅ Submitting a guess, with an HTML form & cookies!
✅ Parsing data with Zod & Superforms! https://superforms.rocks/api#arraypro...
✅ Styling inspired by Adam’s GUI Challenge on Taglists: • Thinking on ways to solve PICKLISTS & https://github.com/argyleink/gui-chal... & https://github.com/argyleink/gui-chal...
[ ] “Correct group!” UI with CSS Variables / Custom Properties!
[ ] Animation flair with a HitStun effect!
[ ] Winning!
[ ] “Mistakes”!
[ ] Losing!
[ ] Shuffling the grid!
[ ] BREAK & Chat discussions
— SCRAPING & DATABASES —
[ ] Puzzle author and date information
[ ] Scraping the NYT connection of the day with Playwright! https://playwright.dev/docs/api/class...
[ ] Auto-scrape on a schedule with a Github workflow!
[ ] Deploying to Fly.io! https://fly.io/docs/js/frameworks/sve...
[ ] Github action for automatic deployments! https://fly.io/docs/app-guides/contin...
[ ] API to persist new puzzles with a `+server` Request Handler https://kit.svelte.dev/docs/routing#s...
[ ] A `connections` table with Drizzle and SQLite!
[ ] Dynamically fetching the latest `connection`
[ ] Responsive font size based on word length?
[ ] Break & Chat discussions
— USER ACCOUNTS & STATS —
[ ] Auth flow recap!
[ ] Persisting results to your account!
[ ] Cookieless gameplay?
[ ] Stats & Graphs!
— USER CONTENT —
[ ] UI to create your own connection!
[ ] Playing custom user connections!
[ ] Rating puzzles!
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Tailwind: https://tailwindcss.com/
Superforms: https://superforms.rocks/
Playwright: https://playwright.dev/
Fly.io: https://fly.io/
Drizzle ORM: https://orm.drizzle.team/
Turso: https://docs.turso.tech/introduction
Lucia Auth: https://lucia-auth.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 106!
—
TIMESTAMPS
—
00:00 - What are we doing today? A puzzle game?
3:40 - Let’s play Connections!
15:11 - Current app overview
17:38 - Backend 🤖 a Game controller with a hardcoded grid!
37:51 - UI 🎨 Rendering our puzzle grid!
40:18 - Selecting guesses with HTML input checkboxes!
55:40 - Submitting a guess, with an HTML form & cookies!
1:02:15 - Parsing data with Zod & Superforms!
1:31:40 Styling inspired by Adam’s GUI Challenge on Taglists:
2:20:45 - TDD validating a guess with Vitest!
Watch video NY Times Connections with SvelteKit! 🧩 CSS, Svelte 5 & SvelteKit 2 tutorial 🤖 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 350 once and liked it 18 people.