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

Building full stack projects with tRPC

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Brian Douglas Brian Douglas
November 10, 2022
Technology
0
76

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
89
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
開発メンバーが語るFindy Conferenceの裏側とこれから
Avatar for sontixyou sontixyou
2
260
AI時代のPMに求められるのは 「Ops」と「Enablement」
Avatar for Yutaro Shimoda shimotaroo
1
340
AWS監視を「もっと楽する」ために
Avatar for Uechi Shingo uechishingo
0
430
BPaaSオペレーション・kubell社内 n8n活用による効率化検証事例紹介
Avatar for kubell kubell_hr
0
280
AI開発をスケールさせるデータ中心の仕組みづくり
Avatar for Kazuyuki Miyazawa kzykmyzw
0
170
ビジュアルプログラミングIoTLT vol.22
Avatar for 1ft-seabass 1ftseabass
PRO
0
140
クラウドセキュリティの進化 — AWSの20年を振り返る
Avatar for kei4eva4 kei4eva4
0
160
「AIでできますか?」から「Agentを作ってみました」へ ~「理論上わかる」と「やってみる」の隔たりを埋める方法
Avatar for Michiru Kato applism118
7
5.5k
日本語テキストと音楽の対照学習の技術とその応用
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
290
セキュリティ はじめの一歩
Avatar for nikinusu nikinusu
0
420
Security Hub と出会ってから 1年半が過ぎました
Avatar for rch850 rch850
0
190
Claude in Chromeで始める自律的フロントエンド開発
Avatar for morimorikochan diggymo
1
280

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
150
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
1
100
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
320
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
90
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
7.8k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
560
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k

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