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
50

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
32
Unconventional Metrics in OSS
Avatar for Brian Douglas bdougie
0
110
Success in Open Source
Avatar for Brian Douglas bdougie
0
63
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
33
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
53
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
92

Other Decks in Technology

See All in Technology
成立するElixirの再束縛（再代入）可という選択
Avatar for kubell kubell_hr
0
860
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
Avatar for kura kuralab
5
840
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
Avatar for Masato Ishigaki / 石垣雅人 i35_267
4
1.4k
UIテスト自動化サポート- Testbed for XCUIAutomation practice
Avatar for notoroid notoroid
0
110
VCpp Link and Library - C++ breaktime 2025 Summer
Avatar for Akiko Kawai harukasao
0
220
監視のこれまでとこれから/sakura monitoring seminar 2025
Avatar for FUJIWARA Shunichiro fujiwara3
10
2.9k
知識を整理して未来を作る 〜SKDとAI協業への助走〜
Avatar for yyoosshh yosh1995
0
140
Agentic DevOps時代の生存戦略
Avatar for KAMEGAWA Kazushi kkamegawa
0
950
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
Avatar for t-hiroto tiltmax3
0
220
Oracle Audit Vault and Database Firewall 20 概要
Avatar for oracle4engineer oracle4engineer
PRO
2
1.6k
A2Aのクライアントを自作する
Avatar for Ryunosuke Iwai rynsuke
1
150
本当に使える？AutoUpgrade の新機能を実践検証してみた
Avatar for oracle4engineer oracle4engineer
PRO
1
120

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
660
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
43
2.4k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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