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
44

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
14
Funding and Hiring Contributors
Avatar for Brian Douglas bdougie
0
29
Unconventional Metrics in OSS
Avatar for Brian Douglas bdougie
0
96
Success in Open Source
Avatar for Brian Douglas bdougie
0
59
Measuring Success in Open Source
Avatar for Brian Douglas bdougie
0
30
The Secret Sauce is Open Source
Avatar for Brian Douglas bdougie
0
49
How to get your PR reviewed
Avatar for Brian Douglas bdougie
0
93
Automation w/GitHub Actions
Avatar for Brian Douglas bdougie
0
100
Getting Traction with Actions (2021)
Avatar for Brian Douglas bdougie
1
87

Other Decks in Technology

See All in Technology
3D生成AIのための画像生成
Avatar for 伊藤光祐 kosukeito
2
590
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
Avatar for coconala_engineer coconala_engineer
0
190
Twelve-Factor-Appから学ぶECS設計プラクティス/ECS practice for Twelve-Factor-App
Avatar for k-ozawa ozawa
3
160
勝手に！深堀り！Cloud Run worker pools / Deep dive Cloud Run worker pools
Avatar for iselegant iselegant
4
620
ドキュメント管理の理想と現実
Avatar for Ohara Kazuhiro kazuhe
3
310
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
Avatar for 株式会社カミナシ kaminashi
12
9.1k
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
Avatar for Kihara, Takuya tacck
PRO
1
300
Part1　GitHubってなんだろう？その１
Avatar for tomokusaba tomokusaba
1
140
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
1
620
Simplify! 10 ways to reduce complexity in software development
Avatar for Uwe Friedrichsen ufried
1
200
AI-in-the-Enterprise｜OpenAIが公開した「AI導入7つの教訓」——ChatGPTで変わる企業の未来とは？
Avatar for CUSTOMER CLOUD CORP. customercloud
PRO
0
120
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか？
Avatar for BrainPad brainpadpr
4
230

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
38
1.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
129
19k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.3k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
690
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
590
Visualization
Avatar for Eitan Lees eitanlees
146
16k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
54
5.5k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k

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