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
52

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
64
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
37
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
53
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
95

Other Decks in Technology

See All in Technology
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
120
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
110
“社内”だけで完結していた私が、AWS Community Builder になるまで
Avatar for nagisa_53 nagisa53
1
400
rubygem開発で鍛える設計力
Avatar for Tomohiro Hashidate joker1007
2
210
Agentic Workflowという選択肢を考える
Avatar for takuya kikuchi tkikuchi1002
1
530
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
Avatar for upamune / Yu SERIZAWA upamune
5
3.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
Avatar for you（@youtoy） you
PRO
0
120
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
Avatar for Lamoda Tech lamodatech
0
350
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
Avatar for Yuya Takeyama yuyatakeyama
3
1.3k
解析の定理証明実践＠Lean 4
Avatar for H Segawa dec9ue
0
180
第9回情シス転職ミートアップ_テックタッチ株式会社
Avatar for forester3003 forester3003
0
240
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
26k

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
930
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
694
190k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
5
220
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
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