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
54

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
15
Funding and Hiring Contributors
Avatar for Brian Douglas bdougie
0
33
Unconventional Metrics in OSS
Avatar for Brian Douglas bdougie
0
110
Success in Open Source
Avatar for Brian Douglas bdougie
0
67
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
37
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
55
How to get your PR reviewed
Avatar for Brian Douglas bdougie
0
100
Automation w/GitHub Actions
Avatar for Brian Douglas bdougie
0
100
Getting Traction with Actions (2021)
Avatar for Brian Douglas bdougie
1
97

Other Decks in Technology

See All in Technology
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
Avatar for Tatsuya Suzuki x_ttyszk
0
260
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
18k
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
Avatar for SMS tech sms_tech
1
760
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
Avatar for t-kikuchi tkikuchi
1
3.6k
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
13k
スプリントレビューを効果的にするために
Avatar for Miho Nagase miholovesq
4
1.1k
20250708オープンエンドな探索と知識発見
Avatar for Sakana AI sakana_ai
PRO
5
1.2k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
Avatar for Recruit recruitengineers
PRO
2
580
20250719_JAWS_kobe
Avatar for Takuya Yonezawa takuyay0ne
1
140
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
Avatar for karacoro / からころ tsukuha
1
940
Deep Security Conference 2025：生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
Avatar for Masayoshi Mizutani mizutani
5
3.6k
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.6k

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.8k
It's Worth the Effort
Avatar for 3n 3n
185
28k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k
Done Done
Avatar for chrislema chrislema
184
16k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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