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
89
0

Building full stack projects with tRPC

Avatar for Brian Douglas

Brian Douglas

November 10, 2022

More Decks by Brian Douglas

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

Other Decks in Technology

See All in Technology
インシデント事例と
パッケージの全量解析に学ぶ
ソフトウェアサプライチェーンの守り方 / supply-chain-attack-defense
Avatar for GMO Flatt Security flatt_security
0
850
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする～デザインシステム運用に学ぶ組織レバレッジ～ 渡辺 凌央
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
1
280
設計レビューとAIハーネスで向き合う AIが生み出した新しいボトルネックの対処法 / Design Reviews and AI Harnesses Against New Bottlenecks Created by AI
Avatar for Nstock nstock
3
400
SREとQA　二人三脚で進めるSLO運用/sre-qa-slo
Avatar for sugitak sugitak
0
1.2k
第67回コンピュータビジョン勉強会CVPR2026読会前編
Avatar for TSUKAMOTO Kenji tsukamotokenji
0
160
Making sense of Google’s agentic dev tools
Avatar for Guillaume Laforge glaforge
1
300
GoでCコンパイラを作った話
Avatar for repunit11 repunit
0
150
壊して学ぶAWS CDK: そのcdk deployで消えるもの、残るもの
Avatar for Kazuki Adachi k_adachi_01
1
460
Playwright × AI Agent でE2Eテストはどう変わるか AI駆動テストの可能性と実用検証の結果
Avatar for Taiga Oyu taiga7543
2
760
発表と総括 / Presentations and Summary
Avatar for Kenji Saito ks91
PRO
0
180
副作用のある Lambda でも Lambda Power Tuning は使えるのか / lambda-power-tuning-side-effects
Avatar for koukihosaka koukihosaka
1
130
そのドキュメント、自動化しませんか？
Avatar for yuk yuksew
1
400

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
45k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
730
Design in an AI World
Avatar for tapps tapps
1
260
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
470
Scaling GitHub
Avatar for Zach Holman holman
464
140k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k

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