Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building full stack projects with tRPC

Brian Douglas
November 10, 2022
Technology
0
35

Building full stack projects with tRPC

Brian Douglas

November 10, 2022
Tweet

More Decks by Brian Douglas

See All by Brian Douglas
 Funding & Hiring Contributors
bdougie
0
10
Funding and Hiring Contributors
bdougie
0
25
Unconventional Metrics in OSS
bdougie
0
91
Success in Open Source
bdougie
0
55
Measuring Success in Open Source
bdougie
0
24
The Secret Sauce is Open Source
bdougie
0
47
How to get your PR reviewed
bdougie
0
87
Automation w/GitHub Actions
bdougie
0
95
Getting Traction with Actions (2021)
bdougie
1
81

Other Decks in Technology

See All in Technology
Redmine 6.0 新機能評価ガイド
vividtone
0
180
ZOZOTOWNのホーム画面をパーソナライズすることの難しさと裏話を語る
f6wbl6
1
430
Engineering at LY Corporation
lycorp_recruit_jp
0
170
Railsで4GBのデカ動画ファイルのアップロードと配信、どう実現する？
asflash8
1
150
マルチモーダルデータ基盤の課題と観点
neonankiti
1
100
信頼性に挑む中で拡張できる・得られる１人のスキルセットとは？
ken5scal
1
110
データ活用促進のためのデータ分析基盤の進化
takumakouno
2
130
フロントエンド メタフレームワーク 選定の際に考えたこと
yuppeeng
0
590
福岡新卒エンジニアの会
teba_eleven
1
180
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
170
Forget efficiency – Become more productive without the stress
ufried
0
230
Windows Autopilot Deployment by OSD Guy
tamaiyutaro
0
290

Featured

See All Featured
It's Worth the Effort
3n
183
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
69
Agile that works and the tools we love
rasmusluckow
327
21k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Being A Developer After 40
akosma
86
590k
The Invisible Side of Design
smashingmag
297
50k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to train your dragon (web standard)
notwaldorf
88
5.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