SvelteKit E-Commerce Demo

A modern e-commerce demo built with SvelteKit, showcasing SSR, server-side data fetching, and URL-driven state management.

Tech Stack

• SvelteKit — File-based routing, SSR, server-side data fetching
• Svelte 5 — Runes ($props, $bindable), snippet-based rendering
• TypeScript
• Tailwind CSS v4
• shadcn-svelte — UI component library
• DummyJSON API — Product data

Features

• Server-side data fetching (+page.server.ts)
• Category-based filtering
• Product search
• Max price filter
• Filter state preserved via URL search params
• Data preloading on hover
• SEO-friendly SSR

SvelteKit Features & Advantages

File-Based Routing

Pages are defined by the file system structure (src/routes/). No need to manually configure a router — the folder hierarchy is the routing. This keeps the project organized and self-documenting.

Server-Side Data Fetching (+page.server.ts)

Data is fetched on the server before the page is rendered. This means:

• No CORS issues — API requests are made from the server, not the browser
• API keys stay hidden — Sensitive credentials never reach the client
• Faster initial load — HTML arrives fully rendered with data

SSR (Server-Side Rendering)

Pages are rendered on the server and sent as HTML to the browser. This provides:

• Better SEO — Search engines can crawl the fully rendered content
• Faster First Contentful Paint — Users see content before JavaScript loads

URL-Based State Management

Filter state (category, search, price) is stored in URL search params. This means:

• Shareable URLs — Users can share a filtered view directly
• Browser back/forward works — Native navigation behavior preserved
• No client-side state library needed — The URL is the single source of truth

Data Preloading (data-sveltekit-preload-data="hover")

When a user hovers over a link, SvelteKit starts fetching the data for that page in the background. By the time they click, the page loads almost instantly.

Server-Side Redirects (redirect())

Redirects are handled on the server with proper HTTP status codes (302), ensuring correct behavior for both browsers and crawlers.

Error Handling (error())

SvelteKit provides built-in error throwing from server load functions with proper HTTP status codes, making error handling clean and consistent.

Svelte 5 Runes

• $props() — Replaces export let with a more explicit, type-safe way to declare component props
• $bindable() — Clearly marks which props support two-way binding
• {@render children()} — Replaces slots with a more flexible snippet-based composition model

Zero-Config Development

SvelteKit comes with Vite under the hood, providing HMR (Hot Module Replacement), TypeScript support, and optimized builds out of the box — no webpack config needed.

Setup

npm install

Development

npm run dev

Build

npm run build

Preview the production build:

npm run preview