SvelteKit Search, Pagination, Sorting & Filtering 🕵️♂️ 2024 SaaS app Part 3 🔴 LIVE Coding & Chill
Let’s make our table a bit more user-friendly, by adding Search functionality to it! Text search, filtering, sorting and pagination, we’ll be doing the works today 🔎
This is part 3 of a new series where we go from ZERO to a legit, modern, *SaaS* app: by the time we’re done we’ll be taking recurring payments, gating features to specific users, offering discounts and upsells… all the while offering a real product & value! As always, I do my best to keep my content practical and “real-world” 😄
I do have a “curriculum” in mind, but do let me know what you’d like me to cover, as we build this further!
🚀 Click around the app yourself: https://10xify.dev/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/saas
📺 Playlist with all the parts: • SvelteKit Auth with Supabase, Magic L...
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
[ ] What are we doing today? SaaS app? “What we’ve got” recap & “what we’ll add” overview
[ ] 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?
[ ] `searchParams` to paginate results!
[ ] UI for pagination, with melt-ui!
[ ] Cache Control: https://kit.svelte.dev/docs/load#headers
— BONUS —
[ ] Date fields & the `melt-ui` Date Picker: https://melt-ui.com/docs/builders/dat...
[ ] `searchParams` to sort on different columns!
[ ] UI: Apply different sorts on click!
[ ] `searchParams` to filter results based on status!
[ ] melt-ui Toggle Group to filter on status! https://melt-ui.com/docs/builders/tog...
[ ] Limiting users to a specific amount of records!
[ ] OAuth: Login with GitHub
— FUTURE —
[ ] E2E with Playwright & testing methodologies
[ ] Subscriptions with Stripe
[ ] Subscription management with the Stripe Customer Portal
[ ] Standalone purchases with Stripe
[ ] A Uniquer Unique Selling Point with… OpenAI?!
[ ] Admin super access and real-world fine-tuning
[ ] Automating migrations & CI/CD tips
[ ] Internationalisation / Localisation! i18n / l10n
[ ] One-click purchases & UX optimisations
— 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/
TailwindCSS: https://tailwindcss.com/
MeltUI: https://melt-ui.com/
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Threads! 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 76!