Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Kitchen Sink Wishlist

See original GitHub issue

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 - (#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

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

Issue Analytics

State:
Created 2 years ago
Reactions:16
Comments:16 (6 by maintainers)

Top GitHub Comments

4reactions

merelinguistcommented, Nov 30, 2021

Copy to clipboard closed by https://github.com/trpc/examples-kitchen-sink/pull/3

I’m working on codesandbox links and almost done.

3reactions

ShiftySlothecommented, Jan 25, 2022

I’m working on basic examples of:

User auth with next-auth
Suspense examples
Error handling

Top Results From Across the Web

320 Kitchen remodel wish list ideas in 2022 - Pinterest

Apr 20, 2022 - Explore Susan Quinteros's board "Kitchen remodel wish list" on Pinterest. See more ideas about kitchen remodel, kitchen design, kitchen...

Top Kitchen Wishlist Features For Buyers - Bloom Realty

Most double sinks can't fit large pots and pans, so deep single sinks have become an important feature for buyers. Storage Space. Last,...

What Should Be On Your Dream Kitchen Wishlist?

1. Quartz Counters. · 2. Custom Cabinets. · 3. A (True) Counter-depth Fridge. · 4. Deep Sink. · 5. Touch-Activated Faucets. · 6....

A Designer Shares Her Kitchen-Remodel Wish List - Houzz

The extra space really eases tight spots, especially around the sink and major appliances. But bigger isn't always better.

Kitchen Sinks and Faucets | Nebraska Furniture Mart

Shop Kitchen Sinks and Faucets now. Find the perfect hardware, fixtures and more to update your kitchen at NFM.com.