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
86
0

Building full stack projects with tRPC

Avatar for Brian Douglas

Brian Douglas

November 10, 2022

More Decks by Brian Douglas

See All by Brian Douglas
 Funding & Hiring Contributors
Avatar for Brian Douglas bdougie
0
30
Funding and Hiring Contributors
Avatar for Brian Douglas bdougie
0
43
Unconventional Metrics in OSS
Avatar for Brian Douglas bdougie
0
140
Success in Open Source
Avatar for Brian Douglas bdougie
0
100
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
46
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
72
How to get your PR reviewed
Avatar for Brian Douglas bdougie
0
130
Automation w/GitHub Actions
Avatar for Brian Douglas bdougie
0
110
Getting Traction with Actions (2021)
Avatar for Brian Douglas bdougie
1
120

Other Decks in Technology

See All in Technology
EBS暗号化に失敗してEC2が動かなくなった話
Avatar for Moe Hamaguchi hamaguchimmm
1
120
Rapid Start: Faster Internet Connections, with Ruby's Help
Avatar for kazuho kazuho
1
110
JOAI2026講評会資料（近藤佐介）
Avatar for Sasuke Kondo element138
1
130
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
7.2k
実践ハーネスエンジニアリング：TAKTで実現するAIエージェント制御 / Practical Harness Engineering: AI Agent Control Enabled by TAKT
Avatar for nrs nrslib
9
2.6k
🀄️ on swiftc
Avatar for giginet giginet
PRO
0
380
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」ご紹介資料
Avatar for Sho Nakatani laysakura
0
3.1k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
74k
暗黙知について一歩踏み込んで考える - 暗黙知の４タイプと暗黙考・暗黙動へ
Avatar for Masaya Mori (森正弥) / CAIO (Chief AI Officer) masayamoriofficial
0
1.8k
AI時代にデータ基盤が持つべきCapabilityを考える + Snowflake Data Superheroやっていき宣言 / Considering the Capabilities Data Platforms Should Have in the AI Era + Declaration of Commitment as a Snowflake Data Superhero
Avatar for Civitaspo civitaspo
0
100
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
5
18k
自分のハンドルは自分で握れ！ ― 自分のケイパビリティを増やし、メンバーのケイパビリティ獲得を支援する ― / Take the wheel yourself
Avatar for TAKAKING22 takaking22
1
750

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
770
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
160
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.6k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
68
38k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
260

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