Magnetic Carousel with SvelteKit, PocketBase & shadcn! 🎠 Travel Pocket Part 2 🔴 LIVE Coding & Chill
Let’s see how we can make beautiful images carousels, including uploading the images to a versatile CMS admin interface with PocketBase, and rendering them optimised with SvelteKit and shadcn!
🚀 Click around the app yourself: https://travel-pocket.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/travel-po...
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...
No need to watch the previous episode, but this series playlist is: • 4+1 ways to fetch data with SvelteKit...
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? Data-fetching strategies? What’s the app?
✅ What about the *🧲 Magnetic Carousel with Tailwind & Svelte 🎠:* • 🧲 Magnetic Carousel with Tailwind 3 &...
✅ Adding images for a *🎠,* using the PocketBase admin interface!
✅ Render all images on the frontend!
✅ Bringing in the shadcn-svelte Carousel! https://shadcn-svelte.com/docs/compon...
✅ Rendering our Carousel!
✅ Optimising images with PocketBase Thumb Sizes!
— BONUS —
✅ Further Image Optimisations? `webp`, `avif`?
✅ Autoplay? href anchors?
✅ Final 🥳 DEMO + LIKE 💜 SUBSCRIBE
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
PocketBase: https://pocketbase.io/
Tailwind: https://tailwindcss.com/
shadcn-svelte: https://shadcn-svelte.com/
Turbo: https://turbo.build/
Vercel: https://vercel.com/johnnify
Fly.io: https://fly.io/
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 117!
—
TIMESTAMPS
—
00:00 - Agenda + Images and media carousel!
3:35 - What about my own short video?!
6:45 - Adding images for a 🎠, using PocketBase!
17:43 - Render all images on the frontend!
34:05 - Bringing in the shadcn-svelte Carousel! https://shadcn-svelte.com/docs/compon...
46:59 - Rendering our Carousel!
55:02 - Style tweaks and buttons
1:03:45 - Optimising images with PocketBase Thumb Sizes!
1:19:57 - Further Image Optimisations? `webp`, `avif`?
1:24:25 - Multiple Items per “slide”
1:31:00 - Autoplay? href anchors?
1:39:53 - Final 🥳 DEMO & fun chat questions!
Смотрите видео Magnetic Carousel with SvelteKit, PocketBase & shadcn! 🎠 Travel Pocket Part 2 🔴 LIVE Coding & Chill онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 350 раз и оно понравилось 6 людям.