3 SvelteKit Mini‑Apps

Below are copy‑paste ready product pages for Gumroad: Budget Snapshot (50/30/20), Task Tracker (CRUDLite), and Reading List Dashboard. Each section includes a one‑line Summary and a full Description with highlights, what’s inside, requirements, license, and FAQ.

1) Budget Snapshot (50/30/20)

Summary (for Gumroad listing)
A clean SvelteKit mini‑app that turns monthly income into 50/30/20 targets with sliders, autosave, and print‑friendly output.

Description
Take the guesswork out of budgeting. Budget Snapshot is a tiny, production‑minded SvelteKit app that converts your monthly take‑home income into clear 50/30/20 targets. Adjust the sliders—the total always stays at 100%—and your numbers autosave to localStorage. Hit Print for a fridge‑ready summary.

Who it’s for

• Solo creators, students, and busy families who want fast clarity—not a giant spreadsheet
• Coaches and educators who need a simple, portable 50/30/20 demo
• Devs who want a clean Svelte 5 runes example to reuse

Highlights

• Instant targets: Needs/Wants/Savings from any income
• Smart sliders: Percentages normalize to 100% automatically
• Autosave: Persists to localStorage
• Accessible: Labels + aria-live updates
• Print‑ready: Share or pin your plan anywhere
• Tiny test: Vitest math sanity check
• Deploy‑fast: Works on Vercel/Netlify in minutes

What’s inside

• Full SvelteKit route: src/routes/budget/+page.svelte
• Utility/test file for percentage math
• Getting‑started & deploy notes

Requirements

• Node 18+ and pnpm/npm
• SvelteKit 2 (Svelte 5 runes)

License

• Personal & Commercial in your own projects/products.
• Don’t resell or redistribute the source as‑is.

FAQ

Does it store my data online?
No—values live in your browser (localStorage).

Can I change the percentages?
Yes. The sliders are fully adjustable and will keep the total at 100%.

Can I bundle this in a course?
Yes, as part of a larger product. Please don’t resell the source by itself.

2) Task Tracker (CRUDLite)

Summary (for Gumroad listing)
A progressive‑enhancement SvelteKit todo app with server actions, URL‑based filters/search, and an optional SQLite swap for persistence.

Description
CRUDLite is a tiny, robust todo manager that shows how to build production‑friendly server actions in SvelteKit. Add tasks, mark them done, delete, and clear completed. Filters (All/Active/Done) and search live in the URL so you can share views. Start with a safe in‑memory store or switch to SQLite in minutes.

Who it’s for

• Devs who want a clean reference for SvelteKit server actions
• Teams teaching progressive enhancement with use:enhance
• Makers who need a simple, no‑auth task list they fully control

Highlights

• Server actions: Add/Toggle/Delete/Clear
• Shareable state: Filters + search via query params
• Progressive enhancement: Works with/without JS on the client
• A11y: aria-pressed toggles + live counts
• SQLite option: Drop‑in replacement module for persistence

What’s inside

• Full route: src/routes/tasks (+ server actions)
• In‑memory server store and SQLite variant
• Optional Vitest for CRUD sanity checks
• Troubleshooting guide

Requirements

• Node 18+ and pnpm/npm
• SvelteKit 2

License

• Personal & Commercial in your own projects/products.
• Don’t resell or redistribute the source as‑is.

FAQ

Will tasks survive a restart?
Use the SQLite variant for persistence (included). The in‑memory store is for learning.

Can I deploy to Vercel/Netlify?
Yes—works out of the box. For SQLite on serverless, use a compatible adapter or hosted DB.

3) Reading List Dashboard

Summary (for Gumroad listing)
A SvelteKit reading dashboard with search, pagination, favorites (localStorage), and a server endpoint that proxies Open Library—no API key needed.

Description
Search books, star favorites, and page through results with a fast, accessible UI. The page calls your /api/books endpoint, which proxies Open Library and returns a clean, stable shape—so your UI code stays simple and portable. Favorites are stored locally; no accounts, no keys.

Who it’s for

• Readers and bloggers who want a lightweight personal library
• Devs who need a clear example of server‑proxied API calls
• Educators teaching URL‑based search/pagination and loading states

Highlights

• /api/books endpoint: Shapes results + adds light caching
• URL search & pagination: Share/bookmark queries
• Favorites: Star/unstarr via localStorage
• Skeletons: Smooth perceived performance during navigation
• A11y: Labels, alt text, aria-live result counts

What’s inside

• API route: src/routes/api/books/+server.ts
• Page load + UI with skeletons and prefetch
• Optional Vitest for the mapping function
• Deploy notes for Vercel/Netlify

Requirements

• Node 18+ and pnpm/npm
• SvelteKit 2

License

• Personal & Commercial in your own projects/products.
• Don’t resell or redistribute the source as‑is.

FAQ

Do I need API keys?
No. It uses Open Library’s public search endpoint via your server.

Can I add ratings or a Favorites tab?
Yes—extend the store/UI; a Favorites‑only view is a quick addition.