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
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
Avatar for Yoichiro Shimizu budougumi0617
4
1.2k
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
Avatar for ypresto ypresto
10
4.3k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
Avatar for GMO Flatt Security flatt_security
7
1.8k
「Verify with Wallet API」を アプリに導入するために
Avatar for hinakko hinakko
1
220
Windows で省エネ
Avatar for Murachi Akira murachiakira
0
160
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
150
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
Avatar for Sagara sagara
0
190
データエンジニアがこの先生きのこるには...?
Avatar for 10xinc 10xinc
0
440
タスクって今どうなってるの？3.14の新機能 asyncio ps と pstree でasyncioのデバッグを (PyCon JP 2025)
Avatar for Junya Fukuda jrfk
1
240
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
6
3k
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す：設計と活用事例
Avatar for Fumiya Sakai fumiyasac0921
0
130
Sidekiq その前に：Webアプリケーションにおける非同期ジョブ設計原則
Avatar for morihirok morihirok
17
7.2k

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Done Done
Avatar for chrislema chrislema
185
16k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
610
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6.1k

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