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!
Смотрите видео Search, Command Palettes & Autocomplete Lookups 🔎 Svelte 5, shadcn & Kit 🚀 LIVE Coding & Chill 🔴 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 456 раз и оно понравилось 16 людям.