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!
Смотрите видео NY Times Connections with SvelteKit! 🧩 CSS, Svelte 5 & SvelteKit 2 tutorial 🤖 LIVE Coding & Chill 🔴 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 350 раз и оно понравилось 18 людям.