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
56

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
72
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
38
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
99

Other Decks in Technology

See All in Technology
MySQL HeatWave：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
3
1.6k
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
Avatar for mai miya maimyyym
0
140
MCPサーバーを活用したAWSコスト管理
Avatar for Kaisei Arimura arie0703
0
110
ユーザー課題を愛し抜く――AI時代のPdM価値
Avatar for KAKEHASHI kakehashi
PRO
1
130
テストを実行してSorbetのsigを書こう！
Avatar for SansanTech sansantech
PRO
1
130
Cloud WANの基礎から応用～少しだけDeep Dive～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
120
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
Avatar for Riku INADA inariku
3
400
事業特性から逆算したインフラ設計
Avatar for UPSIDER, Inc. Tech&Product div. upsider_tech
0
210
LTに影響を受けてテンプレリポジトリを作った話
Avatar for Horikawa hol1kgmg
0
380
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
Avatar for oracle4engineer oracle4engineer
PRO
0
120
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
Avatar for nanachi nanachi
1
770
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか？ / SRE Lounge #18
Avatar for Hajime KOSHIRO kossykinto
0
230

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
460
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.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