Write a walkthrough tutorial for an Electric web app

[KyleAMathews]

It should cover

• setting up a local dev environment
• defining shapes
• optimize app speed by preloading
• writes
• auth
• securing the production deployment

[thruflo]

optimize app speed by preloading

I think this is one strategy to optimise app speed by fetching ahead. I think we could also cover basic shape patterns like:

• fetching one shape as an index and then syncing one or more shapes using the content of it (e.g.: get all project IDs for user, then sync projects)
• changing a shape -- how this works, how this works with a raw shape/shapestream and with useShape
• cleanup on component unmount

I also think we should demonstrate what you can sync into. The tutorial is a perfect flow for syncing first into memory, then binding to a component, then syncing into a DB and binding using a liveQuery.

[thruflo]

This should be half-way between the existing quickstart (which is the "basic getting started", hence edited title) and the more detailed guides. So walkthrough the steps of more realistic e2e app development with Electric but also links out to guides for the full details.

[KyleAMathews]

Generally for a tutorial you want to keep it as simple as possible with just the narrowest possible pathway connecting the key areas. They're for beginners who know absolutely nothing about what we're doing so we want to avoid presenting options or complexity beyond the minimum needed to get something basic working. Every branch in the explanation loses a lot of people.

Guides are a better place for detailed looks at complex patterns or comparing tradeoffs of syncing into memory vs. db. etc.

E.g. https://danielsieger.com/blog/2023/04/24/framework-for-better-documentation.html