Скачать или смотреть Calendar Inputs with Superforms & shadcn 🗓️ Svelte 5 & SvelteKit 2 tutorial 🚀 LIVE Coding & Chill 🔴

Let’s do a deeper dive on Superforms for SvelteKit, and add a popular but tricky date picker / calendar to our app!

See this project from the start with this playlist:    • Auth & RLS with Supabase & shadcn ⚡️ Svelt...  

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! Run...  

And then the previous series, with different database & auth solutions, Loot Goblin:    • How to start a NEW app from your latest & ...  

🚀 Click around the app yourself: https://culture-stock.com/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/culture-s...

— 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? What’s tough with Calendar Pickers?
✅ Recapping Superforms and proxy objects! https://superforms.rocks/concepts/pro... & https://developer.mozilla.org/en-US/d...
✅ “Edit Activity” route for the UPDATE part of CRUD!
✅ Backend logic to handle an updated activity!
✅ UI: A vanilla HTML date input! https://superforms.rocks/concepts/pro...
✅ UI: Fancier with a `shadcn-svelte` DatePicker! https://shadcn-svelte.com/docs/compon...
— BONUS —
[ ] Refactoring for Flash messages! https://superforms.rocks/flash-messag...
✅ What about DateTime?! https://developer.mozilla.org/en-US/d...
[ ] Voting / rating activities!
[ ] What’s our architecture & infra look like? What about THE EDGE?
— HAVE FUN —

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Supabase: https://supabase.com/
Tailwind: https://tailwindcss.com/
Superforms: https://superforms.rocks/
`shadcn-svelte`: https://shadcn-svelte.com/
Playwright: https://playwright.dev/
Vercel: https://vercel.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 104!

—
TIMESTAMPS
—
00:00 - What are we doing today? What’s tough with Calendar Pickers?
05:00 - Recapping Superform and proxy objects!
12:23 - UI for user’s own Activities to be editable
28:45 - “Edit Activity” route for the UPDATE part of CRUD!
1:49:05 - Backend logic to handle an updated activity!
2:08:34 - Show toast on successful update
2:14:44 - UI: A vanilla HTML date input!
2:26:55 - BREAK
2:30:56 - UI: Fancier with a `shadcn-svelte` DatePicker!
2:41:45 - Backend logic and database migrations for updating the activity date to work!
4:06:35 - ESLint and refactoring shadcn components to use Svelte 5 runes
4:18:25 - Live Production 🥳 DEMO!