Pagination and Search

Goal

This snapshot advances Wavelength Daily by teaching you to paginate and search the public story feed.

Each numbered folder is a complete app. Run it independently and compare adjacent snapshots to isolate the new responsibility.

Prerequisites

Use Node.js 20 or newer, npm, and a terminal. Basic TypeScript, HTML, and CSS familiarity will help.

The development server uses port 5173. Database snapshots also need Docker and the Supabase CLI.

• Node.js and npm
• A code editor
• Docker from part 4 onward

Concepts

PostgREST range queries bound work, exact counts calculate pages, and filtered queries preserve the search term.

SvelteKit keeps route UI, server loading, and form actions close together while preserving a clear browser/server boundary.

Walkthrough

Clamp page input, search title and excerpt, preserve q in pager links, and invalidate the feed on realtime changes.

Trace the example from request to rendered page, then inspect the complete matching snapshot for types, validation, and failure handling.

query.or(`title.ilike.%${q}%,excerpt.ilike.%${q}%`).range(from, to);

Run and verify

Enter 10-Pagination-And-Search, install dependencies, and start the app. Supabase stages must start the local stack and copy the printed anon key into .env.

Open http://localhost:5173 and keep the terminal visible so browser actions can be matched to server errors.

git clone https://github.com/michaeldunga1/fcc-sveltekit-blog.git
cd fcc-sveltekit-blog/10-Pagination-And-Search
npm install
npx supabase start
cp .env.example .env
npm run dev

Troubleshooting

Use the same search filter for rows and count or the page total will be wrong.

A missing package usually means npm install ran in another snapshot. After changing environment variables, restart the SvelteKit process.

• Read the first error first
• Check the current snapshot path
• Never commit .env or node_modules

Try this

Seed enough stories for three pages and search for a phrase from one excerpt.

Test one happy path and one invalid or unauthorized path before moving on.

• Make one focused change
• Verify it in the browser
• Compare with the next snapshot after it works