Search, Command Palettes & Autocomplete Lookups 🔎 Svelte 5, shadcn & Kit 🚀 LIVE Coding & Chill 🔴
Let’s add modern Search to our app, starting from vanilla HTML `search`, `form` and `input` elements, all the way to a `shadcn` Command Palette Combobox that hits a real third party API!
The end goal is to get video game results, and be able to rate them using a simplified card UI, with emojis 🙂🚀🗳️
See this project from the start with this playlist: • Auth & RLS with Supabase & shadcn ⚡️ ...
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...
And then the previous series, with different database & auth solutions, Loot Goblin: • How to start a NEW app from your late...
🚀 Click around the app yourself: https://culture-stock.com/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/culture-s...
— 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? Suggesting vs Searching?
✅ Fullstack: Returning hardcoded `suggestions`!
✅ Backend: Filter `suggestions` based on `searchParams`: https://developer.mozilla.org/en-US/d...
✅ Frontend: Vanilla HTML Search with `search` & `form` elements!
✅ Refactoring to use a shadcn Command Palette: https://shadcn-svelte.com/docs/compon... & https://www.cmdk-sv.com/
— BONUS —
✅ Let’s hit a real API! What’s IGDB? https://www.igdb.com/
✅ Authenticating with IGDB: https://api-docs.igdb.com/?javascript...
✅ Searching for video games! https://api-docs.igdb.com/?javascript...
✅ What happens when a user selects a `suggestion`?!
[ ] Intercepting requests with Mock Service Worker
[ ] UI to Vote / rate activities
[ ] Backend logic for voting!
[ ] `trending` vs `suggestion` results?
[ ] What’s our architecture & infra look like? What about THE EDGE?
— 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/
Tailwind: https://tailwindcss.com/
Superforms: https://superforms.rocks/
`shadcn-svelte`: https://shadcn-svelte.com/
IGDB: https://www.igdb.com/
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 105!
—
TIMESTAMPS
—
00:00 - What are we doing today? Suggesting vs Searching?
4:35 - Fullstack: Fetching & rendering hardcoded `suggestions`!
10:35 - Backend: Filter `suggestions` based on `searchParams`
15:17 - Frontend: Vanilla HTML Search with `search` & `form` elements!
24:57 - Refactoring to use a shadcn Command Palette
41:50 - BREAK
44:00 - Manually filter Command results, by reading 😄 docs
49:55 - Auto-submit as the user types, `requestSubmit` gotcha!
1:01:10 - Throttle auto-submissions!
1:35:05 - Let’s hit a real API! What’s IGDB?
1:37:00 - Authenticating with IGDB
1:44:35 - Searching for video games!
1:53:30 - API search works 🥳 DEMO!
2:06:15 - Caching for performance, and to avoid rate limits!
2:17:50 - What happens when a user selects a `suggestion`?!
2:23:00 - Fetch video game from IGDB!
Watch video Search, Command Palettes & Autocomplete Lookups 🔎 Svelte 5, shadcn & Kit 🚀 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 456 once and liked it 16 people.