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
45

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
14
Funding and Hiring Contributors
Avatar for Brian Douglas bdougie
0
29
Unconventional Metrics in OSS
Avatar for Brian Douglas bdougie
0
100
Success in Open Source
Avatar for Brian Douglas bdougie
0
61
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
32
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
49
How to get your PR reviewed
Avatar for Brian Douglas bdougie
0
95
Automation w/GitHub Actions
Avatar for Brian Douglas bdougie
0
100
Getting Traction with Actions (2021)
Avatar for Brian Douglas bdougie
1
88

Other Decks in Technology

See All in Technology
mnt_data_とは？ChatGPTコード実行環境を深堀りしてみた
Avatar for Issei.Komori icck
0
210
継続戦闘能⼒
Avatar for SansanTech sansantech
PRO
0
220
GigaViewerにおけるMackerel APM導入の裏側
Avatar for koudenpa 7474
0
460
AIのための
オンボーディングドキュメントを整備する - hirotea
Avatar for hirotea hirotea
9
2.3k
データプレーンプログラミングとは？ DPU＆スイッチASICの開発経験から語る
Avatar for ebiken ebiken
PRO
1
270
オープンソースのハードウェアのコンテストに参加している話
Avatar for misoji engineer iotengineer22
0
660
KMP導⼊において、マネジャーとして考えた事
Avatar for SansanTech sansantech
PRO
1
210
AIの電力問題を概観する
Avatar for Ryuichi Maruyama rmaruy
1
220
Swiftは最高だよの話
Avatar for 野瀬田　裕樹 yuukiw00w
2
290
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
Avatar for uutan1108 ohmori_yusuke
2
120
ローカル環境でAIを動かそう！
Avatar for Michael Tedder falken
PRO
1
170
從開發到架構設計的可觀測性實踐
Avatar for philipz philipz
0
120

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
608
69k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
460
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.6k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6k

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