[TRP-62] Kitchen Sink Wishlist

[KATT]

Kitchen Sink

• Live Site: https://kitchen-sink.trpc.io/
• Source: https://github.com/trpc/examples-kitchen-sink

The goal of the Kitchen Sink is to provide a good collection of useful design patterns when working with tRPC. It should be easy to navigate kitchen-sink.trpc.io and have it as a reference site — the northern star would be the Tailwind Docs.

I will probably replace the main website with this site & I want to experiment with monetization. Maybe this could be the "tailwindui" of trpc.

Wishlist

Overall site improvements

• Nicer home page
• Nicer code example pages
• Interactive code examples with Monaco or similar
• Implement code syntax highlighter for source code
• Copy to clipboard
• Nicer view, sort of (preview/code tab bar?)
• Link / embed / generate codesandbox on each example?
• Maybe some nicer way of handling features? Some code generation to make it easier to work on one feature in isolation?
• Login with GitHub

Features

• getStaticProps 🎉 Implemented
  • Basic examples
  • Improve with splitting up into a "list" page and a [id].tsx page
• getServerSideProps
• Infinite queries
• Paginated pages
• Optimistic prefetching
• Good patterns with Suspense
• Error handling
• Integration with react-hook-form - 🎉 Implemented
  • Reusing validation schema server/client
  • Invalidate queries
• API response caching
• QueryCell pattern - (add query cell pattern #1734)
• Integration testing
• User auth
• ... + 🙏 ideas welcome!

Stretch goals

• Make this into the actual trpc.io main site?
• Potentially I'll limit view of examples to contributors & sponsors - maybe it's possible to make money off OSS?

How to contribute

Clone and start the Kitchen sink:

git clone git@github.com:trpc/trpc.git
cd trpc/examples/kitchen-sink
yarn && yarn dx

Adding an example

1. Create a new folder in src/feature/X by duplicating some of the existing ones
2. Update meta.tsx
3. Create a new page in src/pages/X and import the file
4. Import the router from your example in src/server/routers/_app.ts

_TRP-62

[KATT]

i like to work on home page redesign, is there any mockup or a design ?

Hey @G3root! Thanks so much for the offer -- I'll try to make a mockup this week :)

Do you have any example sites in mind ?

Sites I think are nice -- shows code and are quite interactive and clear

• http://prisma.io/
• https://blitzjs.com/
• https://planetscale.com/
• https://www.artillery.io/

[merelinguist]

Copy to clipboard closed by trpc/examples-kitchen-sink#3

I’m working on codesandbox links and almost done.

[ShiftySlothe]

I'm working on basic examples of:

• User auth with next-auth
• Suspense examples
• Error handling

[KATT]

I'm working on basic examples of:

• User auth with next-auth
• Suspense examples
• Error handling

Wow, thanks! Note that Suspense have a bug in combo with @trpc/next right now that I noticed yesterday (#1448)

[mrcampbell]

I'd love to contribute! I'm afk, but will check tonight.

But is there a way to do websockets with rooms/wildcard routes?

Like have a chatroom example where there are trpc routes like

chat.room.*.comments
Where this resolver would return the data based on specific rooms, like chat.room.room42.comments, where only those who can see room42 can pub/sub to that room, and concurrently, there could be room73, room99, etc.?

[KATT]

@mrcampbell

I'd love to contribute! I'm afk, but will check tonight.

🙏

But is there a way to do websockets with rooms/wildcard routes?

Please post these in the discussions or in discord as it's off-topic here, but I'll answer anyway :)

Like have a chatroom example where there are trpc routes like

chat.room.*.comments Where this resolver would return the data based on specific rooms, like chat.room.room42.comments, where only those who can see room42 can pub/sub to that room, and concurrently, there could be room73, room99, etc.?

You can do:

• chat.room.byId({ id: 1 }) for the room, and
• chat.comments.byRoomId({ id: 1 }) for the room comments
• chat.stream({ ....... }) if it's my own stream of whatever stuff I'm subscribed to

[mrcampbell]

Hahaha shortly after I posted, I realized that it probably wasn't the right place or time to ask! But that's legit!! I'll see about adding a feature or two!

…

On Sat, Jun 18, 2022, 1:43 PM Alex Johansson ***@***.***> wrote: @mrcampbell <https://github.com/mrcampbell> I'd love to contribute! I'm afk, but will check tonight. 🙏 But is there a way to do websockets with rooms/wildcard routes? Please post these in the discussions or in discord as it's off-topic here, but I'll answer anyway :) Like have a chatroom example where there are trpc routes like chat.room.*.comments Where this resolver would return the data based on specific rooms, like chat.room.room42.comments, where only those who can see room42 can pub/sub to that room, and concurrently, there could be room73, room99, etc.? You can do: - chat.room.byId({ id: 1 }) for the room, and - chat.comments.byRoomId({ id: 1 }) for the room comments — Reply to this email directly, view it on GitHub <#1254 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACE2K5M7NLHURVPFDHGCUA3VPYRHHANCNFSM5H44DIWQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[github-actions]

This issue has been locked because it had no new activity for 14 days. If you are running into a similar issue, please create a new issue. Thank you.