Extending the demo app to have parameterized routes

Describe the problem

I’ve often wished the Sveltekit demo app was a little more full-featured. Right now it has 3 pages with fixed URLs and that’s it. I wish it had a route with path params in it, and even better, links between the same route using different params, to exercise afterNavigation.

Right now I’m dealing with a bug related to afterNavigation and live reload in the dev server, and having a more complete demo app would be a nice starting point for a repro case.

Describe the proposed solution

What if each TODO had its own detail page, and links to the previous and next todo.

Alternatives considered

Maybe instead of extending the existing TODO demo app, we should add a second “kitchen sink” demo app that exercises all the features?

Importance

nice to have

Additional Information

No response

[dummdidumm]

Coming back to this, I’m not sure if I’d want the demo app to become more fully-featured than it is now. Where would that end? How would we add them to the demo in a way that makes sense? At what point this is just overlap with the tutorial which will touch on all these parts? I’m thinking it’s better to instead update the realworld repo to the newest version once we are done with the other things, and possibly also making that movies app.

[luisgabrielm]

Hello @antony , I agree with you that adding a detailed page for the TODO app might be extending the demo more than it was originally intended.

I would like to bring my point of view to the discussion of a new demo app.

IMO a good demo project has 2 goals:

• Sell the framework and have people interested in studying it further;
• Be a good starting point / tutorial / cheat sheet for new users.

So I think in the case of SvelteKit that means the demo app should:

• Showcase the main features of the framework;
• Be clear, direct and easy to understand;
• Always be compatible with the latest stable version;
• Be plug and play (not require additional config or .env set up).

List of main Svelte/Sveltekit features that we might include in the demo app (not trying to be super detailed or complete here, just bringing some ideas):

• Reactivity / bindings (bind:vale etc.)
• layouts
• filesystem routing (and dynamic routes)
• stores
• lifecycle management (onMount etc.)
• svelte file syntax (including css scopes)
• animations / transitions
• typescript support
• hooks
• events (on:hover, on:click etc.)
• SSR
• pages vs endpoints
• accessibility support

An idea for a new app that comes to mind is to: Use a public API, that doesn’t require a key, to create a “showcase” website. E.g. use Nasa, The Met, PokeAPI to create a “planet explorer”, “art catalogue” or a “Pokedex”.

I thought about these APIs because they’re easy to use, public and not directly related to any big tech player like Microsoft or Google.

The demo could have a home page showing many items and a details page using dynamic routing, utilizing SSR, animations, stores etc.

A big downside to this approach is that if any of these APIs have a major change or starting using private keys the demo would need to be redone. Even though I don’t think that’ll happen it’s a possibility.

What are your thoughts about it? Cheers ✌️