Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building full stack projects with tRPC

Avatar for Brian Douglas Brian Douglas
November 10, 2022
Technology
0
65

Building full stack projects with tRPC

Avatar for Brian Douglas

Brian Douglas

November 10, 2022
Tweet

More Decks by Brian Douglas

See All by Brian Douglas
 Funding & Hiring Contributors
Avatar for Brian Douglas bdougie
0
17
Funding and Hiring Contributors
Avatar for Brian Douglas bdougie
0
35
Unconventional Metrics in OSS
Avatar for Brian Douglas bdougie
0
120
Success in Open Source
Avatar for Brian Douglas bdougie
0
79
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
40
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
60
How to get your PR reviewed
Avatar for Brian Douglas bdougie
0
110
Automation w/GitHub Actions
Avatar for Brian Douglas bdougie
0
110
Getting Traction with Actions (2021)
Avatar for Brian Douglas bdougie
1
100

Other Decks in Technology

See All in Technology
クレジットカードの不正を防止する技術
Avatar for Yuta Horii yutadayo
17
7.6k
Progressive Deliveryで支える！スケールする衛星コンステレーションの地上システム運用 / Ground Station Operation for Scalable Satellite Constellation by Progressive Delivery
Avatar for iselegant iselegant
1
170
ABEJA FIRST GUIDE for Software Engineers
Avatar for ABEJA abeja
0
3.2k
明日から真似してOk！NOT A HOTELで実践している入社手続きの自動化
Avatar for kajinari nkajihara
1
760
第65回コンピュータビジョン勉強会
Avatar for TSUKAMOTO Kenji tsukamotokenji
0
150
やり方は一つだけじゃない、正解だけを目指さず寄り道やその先まで自分流に楽しむ趣味プログラミングの探求 2025-11-15 YAPC::Fukuoka
Avatar for すぎゃーん sugyan
2
800
Redux → Recoil → Zustand → useSyncExternalStore： 状態管理の10年とReact本来の姿
Avatar for ZOZO Developers zozotech
PRO
16
8.4k
自己的售票系統自己做！
Avatar for 高見龍 eddie
0
460
LINEスキマニ/LINEバイトにおけるバックエンド開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
190
AIを前提に、業務を”再構築”せよ IVRyの9ヶ月にわたる挑戦と未来の働き方 (BTCONJP2025)
Avatar for chama yueda256
1
750
[mercari GEARS 2025] Keynote
Avatar for mercari mercari
PRO
1
280
ABEMAのCM配信を支えるスケーラブルな分散カウンタの実装
Avatar for Honoka Toda hono0130
3
510

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k

Transcript

  1. @bdougieYO Building full stack projects with tRPC opensauced.pizza 1

  2. Brian Douglas youtube.com/ilikerobot Work fl ow Automation By leveraging the

    GitHub API The Last Dance Michael Jordan of content

  3. opensauced.pizza @bdougieYO 3 Statistically proven Area 31

  4. opensauced.pizza @bdougieYO 4 1 5 2 3 4 Triangle Offense

    (framework)

  5. Picking tech is hard

  6. Choose a framework

  7. Michael Jordan of open-source Brian Douglas

  8. opensauced.pizza @bdougie 8 OpenSauced: 
 “Open Source Insights, by the

    slice” . Image of the platform serving Digital Ocean’s Hacktoberfest 2022 insights for 95k. repos

  9. We chose Next.js

  10. opensauced.pizza @bdougie 10 Building Modern APIs

  11. opensauced.pizza @bdougie Building Modern APIs 11 Server Client GraphQL Or

    Swagger

  12. opensauced.pizza @bdougie 12 tRPC? TypeScript Remote Procedure Call

  13. opensauced.pizza @bdougie tRPC Setup 13 tRPC-server tRPC-client tRPC router

  14. opensauced.pizza @bdougie tRPC 14 Server Client Function Remote Calls

  15. https://beta.create.t3.gg/

  16. TypeScript Tailwind tRPC

  17. t3-app decisions made TypeScript Tailwind tRPC next-auth prisma

  18. opensauced.pizza @bdougie 18 Jamstack DEMO

  19. opensauced.pizza @bdougie 19 Jamstack

  20. localhost:3000

  21. opensauced.pizza @bdougie tRPC Setup 21 tRPC-server tRPC-client tRPC router

  22. opensauced.pizza @bdougie 22 tRPC-server tRPC-client tRPC Setup tRPC router

  23. opensauced.pizza @bdougie 23 tRPC-server tRPC-client tRPC Setup tRPC router

  24. opensauced.pizza @bdougie 24 tRPC-server pages create-t3-app setup tRPC router

  25. opensauced.pizza @bdougie 25 Backend

  26. server/example.ts tRPC Schema-less API development.

  27. opensauced.pizza @bdougie 27 Frontend

  28. localhost:3000

  29. pages/index.tsx react-query Powerful React state management

  30. pages/index.tsx react-query Powerful React state management

  31. pages/index.tsx react-query Powerful React state management

  32. tRPC router bene fi ts Caching Distribution JSON Magic

  33. opensauced.pizza @bdougie tRPC benefits Lowers the barrier for building. 33

    T3 Stack • focused on simplicity, modularity, and full-stack typesafety. It consists of: • Next.js, tRPC, Tailwind, CSS, TypeScript, Prisma, NextAuth.js

  34. opensauced.pizza @bdougie tRPC Lowers the barrier for building. 34

  35. opensauced.pizza @bdougieYO 35 1 5 2 3 4 create-t3-app (framework)

  36. hot.opensauced.pizza

  37. None

  38. opensauced.pizza @bdougieYO 38 youtube.com/opensauced

  39. opensauced.pizza @bdougieYO 39 youtube.com/opensauced

  40. Michael Jordan of open-source @bdougieYO