Image Uploads & Optimizations with Cloudinary 🖼️ Fullstack SvelteKit Part 10 🚀 LIVE Coding & Chill 🔴
Let’s handle user uploads and specifically images: one of the critical things to handle well for great UX & SEO, since Google relies heavily on what they call Core Web Vitals for search rankings, and unoptimised images are the top culprits out of all the things you can handle better 🙂
In this series with our new code-along project, Loot Goblin, we keep increasing the complexity until we get to working with ChatGPT and the OpenAI API! This will legitimately build CV experience for those fresh new “AI Developer” positions.
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...
… or you can get Johnnify Premium which includes all this code & more, while supporting all my work 🙌
Playlist with all parts of THIS series: • How to start a NEW app from your latest & ...
—
This series will get you firmly into the day-to-day job of a software engineer, in any company. If you can talk to databases, APIs, if you can fetch data, and render it nicely on the screen, you can do web dev, I promise 👊
It’s also a great way to increase you price range: With our previous series, you should be able to make portfolio and marketing sites, but this one will get you into serious contracting range! You’ll be able to charge those who think they have the best ideas in the world some serious money 🤑
Or, hey, if you’re the one with the passion project, you’ll be more able than even to make it happen 🚀
🚀 Click around the app yourself: https://lootgoblin.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/loot-goblin
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
Check out the TIMESTAMPS / chapters ✅
— FUTURE —
[ ] Users can favourite loot!
[ ] User profiles and avatars!
[ ] “Undo” with soft deletes!
[ ] Integrating with ChatGPT! Describe your party, ChatGPT suggests the loot drops! https://platform.openai.com/docs/intr...
[ ] Dynamic OpenGraph Images with: https://vercel.com/docs/functions/og-...
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Drizzle ORM: https://orm.drizzle.team/
Turso: https://docs.turso.tech/introduction
Tailwind: https://tailwindcss.com/
DaisyUI: https://daisyui.com/
Cloudinary: https://cloudinary.com/
`@unpic/svelte`: https://unpic.pics/img/svelte/
Lucia Auth: https://lucia-auth.com/
Resend: https://resend.com/overview
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 97!
—
TIMESTAMPS
—
00:00 - What are we doing today? Image Uploads?
05:03 - @sveltejs/enhanced-img for images in our version control, CDNs for user-uploaded images
08:40 - Core Web Vitals & quick performance wins
12:20 - UI for the user to upload a file!
17:45 - Upload Image preview with Svelte 5!
43:20 - Getting that file server-side & validating!
50:50 - Uploading to Cloudinary!
1:32:00 - base64 encoding our Array Buffer, so we can actually upload to Cloudinary
1:41:15 - UI to render the uploaded image
1:57:00 - Optimised images with Cloudinary and `@unpic/svelte`
2:14:20 - Refactor to vanilla HTML picture element, so we can stay Svelte 5 `runes` strict!
2:14:20 - Refactor to vanilla HTML picture element, so we can stay Svelte 5 `runes` strict!
2:32:45 - Should we actually be storing image urls in our DB?
2:35:00 - Possible next steps & chat suggestions!