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
77

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
23
Funding and Hiring Contributors
Avatar for Brian Douglas bdougie
0
38
Unconventional Metrics in OSS
Avatar for Brian Douglas bdougie
0
130
Success in Open Source
Avatar for Brian Douglas bdougie
0
90
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
41
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
67
How to get your PR reviewed
Avatar for Brian Douglas bdougie
0
120
Automation w/GitHub Actions
Avatar for Brian Douglas bdougie
0
110
Getting Traction with Actions (2021)
Avatar for Brian Douglas bdougie
1
110

Other Decks in Technology

See All in Technology
広告の効果検証を題材にした因果推論の精度検証について
Avatar for ZOZO Developers zozotech
PRO
0
150
Azure Durable Functions で作った NL2SQL Agent の精度向上に取り組んだ話/jat08
Avatar for TonyTonyKun thara0402
0
160
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
500
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
440
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
210
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
1
120
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
920
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
140
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k
Amazon Bedrock Knowledge Basesチャンキング解説！
Avatar for 野口碧生 aoinoguchi
0
130
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
Avatar for AEON aeonpeople
1
200
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
420

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
410
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
64
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
210
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
63
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
230
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k

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