Svelte Nobel Prize Demo

Search & filter demo with Svelte v5 & SvelteKit, filter local JSON data 🧙

Demo: https://svelte-nobel-prize-demo.pages.dev

Static site generation via adapter-static.

See SikandarJODD/youva - Pagination | Debounce Search | Sort & Filters for an example with SSR.

Data sources

• http://api.nobelprize.org/v1/prize.json

Resources

Thanks very much to https://simplecss.org/ and the Svelte Community for answering questions!

Notes and discussions

• Svelte 5: Share state between components (for Dummies) (dev.to)
• Feedback regarding $effect and URL params (Bluesky)
• Help with simple pagination and $state (Discord)
• Import shared $state and use bind=group for checkboxes inside of components (v5)? (Discord)
• How to properly update query param on text input without losing focus/lag? (Discord)
• What's the simplest most battle-tested way to communicate events/data across components in svelte5?

Further resources

• SikandarJODD/youva - Pagination | Debounce Search | Sort & Filters
• Lets Build A Filtering System with Svelte 5 , Sveltekit 2, Tailwind, Upstash (2024) - Lawal Adebola

TODOs

• scroll to results after pagination click (where is the best place for this logic?)
• improve pagination (styling and page count)