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
57

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
34
Unconventional Metrics in OSS
Avatar for Brian Douglas bdougie
0
120
Success in Open Source
Avatar for Brian Douglas bdougie
0
76
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
40
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
56
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 Ikki Miyazaki ikkimiyazaki
0
580
Pythonによる契約プログラミング入門 / PyCon JP 2025
Avatar for 7pairs 7pairs
5
2.5k
Windows で省エネ
Avatar for Murachi Akira murachiakira
0
160
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
Avatar for mtskhs matsu0228
6
2k
BtoBプロダクト開発の深層
Avatar for 16bit_idol 16bitidol
0
180
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
6
3.1k
Oracle Cloud Infrastructure：2025年9月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
370
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
150
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
Avatar for Koji Miyata miyatakoji
0
130
動画データのポテンシャルを引き出す！ Databricks と AI活用への奮闘記（現在進行形）
Avatar for Databricks Japan databricksjapan
0
140
実装で解き明かす並行処理の歴史
Avatar for ZOZO Developers zozotech
PRO
1
310
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
Avatar for BrainPad brainpadpr
23
16k

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
19
1.2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
25k
Making Projects Easy
Avatar for Brett Harned brettharned
119
6.4k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k

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