Search, Filtering & Pagination with SvelteKit 🔎 Fullstack App Part 4 🔴 LIVE Coding & Chill скачать в хорошем качестве

Search, Filtering & Pagination with SvelteKit 🔎 Fullstack App Part 4 🔴 LIVE Coding & Chill

Let’s add Awesome Search to our dashboard app! With SvelteKit it’s easier than you’d think coming from things like Redux or even React Query… so long as you know what to do! And I *didn’t* in the previous episode, so now we’ll do it properly 😂 Today’s stream also counts as another episode of our “Nextjs/Learn… but it’s SvelteKit!” implementation of the fresh official course by Vercel, for Next.js: https://nextjs.org/learn At its core, that course is about creating a modern web app… so we’re adapting to do just that, but with a different meta framework 😄 Watch Part 1 with initial project scaffold, Tailwind & more:    • Fullstack SvelteKit App with... Next/Learn...   Watch Part 2 with A LOT of DB stuff… and charts!    • Fullstack SvelteKit App Part 2:  Prisma, F...   Watch Part 3 where we tried doing the Search, got it half-working, then bailed into doing the Form Mutations:    • Fullstack SvelteKit App Part 3:  Svelte 5,...   🚀 Check out the app we’re working on today: https://sveltekit-dashboard-phi.verce... 💻 See its code, open-source and free: https://github.com/jmagrippis/sveltek... — COMMUNITY — Our DISCORD SERVER 👾:   / discord   — 🥳🥳🥳 — — Agenda — ✅ What are we doing today? Why do we need search? ✅ Scaffold a new route! ✅ UI with hardcoded data! ✅ Dynamic data loading with `+page.server.ts`: https://kit.svelte.dev/docs/load ✅ Using `searchParams` to search our database: https://kit.svelte.dev/docs/load#usin... ✅ Using a vanilla HTML form & input to make our Search work! https://kit.svelte.dev/docs/form-acti... ✅ Auto-searching as the user types! ✅ Keeping focus on the input element! https://kit.svelte.dev/docs/link-opti... ✅ “Debouncing” or “Throttling” for better UX, AND better performance ✅ How does this work with View Transitions? ✅ Can our search also work with pagination? `searchParams` to paginate results! ✅ UI for pagination! ✅ Search UX concerns when we also have pagination? — BONUS — ✅ Cache Control: https://kit.svelte.dev/docs/load#headers ✅ Handling Errors ✅ Empty / no results UI — HAVE FUN — No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄 — Highlighted software — SvelteKit: https://kit.svelte.dev/ Vercel: https://vercel.com/ Prisma: https://www.prisma.io/ Tailwind: https://tailwindcss.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 62! — TIMESTAMPS — 0:00 - What are we doing today? When do we need Search? 2:25 - Quick series recap! 3:30 - Scaffolding a new route to display all invoices! 7:15 - Building our table UI using hardcoded data 9:20 - Dynamic data loading with `+page.server.ts` 17:51 - Using `searchParams` to search our database 23:25 - Using a vanilla HTML form & input to make our Search work! 30:55 - Auto-searching as the user types (remember to use `.requestSubmit` instead!) 35:40 - Starting off with the search params from the URL! 35:40 - Debugging hoping I remember to use `form.requestSubmit`, not `form.submit`! 45:05 - “Debouncing” or “Throttling” our auto-search for better UX, AND better performance 49:30 - View Transitions for our search results 53:55 - Implementing pagination! `searchParams` to paginate results 59:25 - Defaulting to the first page and safe-guarding against invalid input 53:55 - UI for pagination! 1:13:20 - I finally remember to use `form.requestSubmit`, NOT `form.submit`! 1:14:15 - Preventing scrolling back to the top with `data-sveltekit-noscroll` 1:15:17 - Cache-Control for better UX, performance, costs 1:21:35 - Handling errors with `+error.svelte` 1:28:00 - Empty / no results UI 1:43:26 - Edge cases / timeout cleanup 1:52:00 - Stream recap, next steps + COMMENT 🧡 SUBSCRIBE