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
84
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
29
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
99
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
「決め方」の渡し方 / How to hand over the "decision-making process"
Avatar for Pauli pauli
7
1.2k
遊びで始めたNew Relic MCP、​気づいたらChatOpsな​オブザーバビリティボットができてました/From New Relic MCP to a ChatOps Observability Bot
Avatar for AEON aeonpeople
1
170
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.1k
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
Avatar for hiro@miraito hirodragon112
1
190
スクラムを支える内部品質の話
Avatar for IIJ_PR iij_pr
0
270
ZOZOTOWNリプレイスでのSkills導入までの流れとこれから
Avatar for ZOZO Developers zozotech
PRO
4
2.5k
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.3k
Kubernetes基盤における開発者体験 とセキュリティの両⽴ / Balancing developer experience and security in a Kubernetes-based environment
Avatar for mekka chmikata
0
170
Babylon.js Japan Activities (2026/4)
Avatar for Limes2018 limes2018
0
180
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
240
Cursor Subagentsはいいぞ
Avatar for Yuji Yamaguchi yug1224
2
140
あるアーキテクチャ決定と その結果/architecture-decision-and-its-result
Avatar for Ryo Tomidokoro hanhan1978
2
380

Featured

See All Featured
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
110
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
790
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
470
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
700
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
730
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
91
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
210
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
120
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
160

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