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!
Watch video Magnetic Carousel with SvelteKit, PocketBase & shadcn! 🎠 Travel Pocket Part 2 🔴 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 6 people.