Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building full stack projects with tRPC
Search
Brian Douglas
November 10, 2022
Technology
0
33
Building full stack projects with tRPC
Brian Douglas
November 10, 2022
Tweet
Share
More Decks by Brian Douglas
See All by Brian Douglas
Funding & Hiring Contributors
bdougie
0
8
Funding and Hiring Contributors
bdougie
0
22
Unconventional Metrics in OSS
bdougie
0
86
Success in Open Source
bdougie
0
55
Measuring Success in Open Source
bdougie
0
22
The Secret Sauce is Open Source
bdougie
0
46
How to get your PR reviewed
bdougie
0
86
Automation w/GitHub Actions
bdougie
0
95
Getting Traction with Actions (2021)
bdougie
1
79
Other Decks in Technology
See All in Technology
Next.js のページ遷移を全力で止める
ypresto
9
3.6k
20240912 JJUGナイトセミナー
mii1004
0
140
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
140
自作Cコンパイラ 8時間の奮闘
soukouki
0
850
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
210
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7.1k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.5k
QAに対する超個人的な解釈 / Personal Take on QA
toma_sm
1
150
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
210
フロントエンド開発事例③ Yahoo! JAPAN トップページ
lycorptech_jp
PRO
0
110
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
170
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
508
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Ruby is Unlike a Banana
tanoku
96
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Atom: Resistance is Futile
akmur
261
25k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Writing Fast Ruby
sferik
623
60k
What's in a price? How to price your products and services
michaelherold
242
11k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Transcript
@bdougieYO Building full stack projects with tRPC opensauced.pizza 1
Brian Douglas youtube.com/ilikerobot Work fl ow Automation By leveraging the
GitHub API The Last Dance Michael Jordan of content
opensauced.pizza @bdougieYO 3 Statistically proven Area 31
opensauced.pizza @bdougieYO 4 1 5 2 3 4 Triangle Offense
(framework)
Picking tech is hard
Choose a framework
Michael Jordan of open-source Brian Douglas
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
We chose Next.js
opensauced.pizza @bdougie 10 Building Modern APIs
opensauced.pizza @bdougie Building Modern APIs 11 Server Client GraphQL Or
Swagger
opensauced.pizza @bdougie 12 tRPC? TypeScript Remote Procedure Call
opensauced.pizza @bdougie tRPC Setup 13 tRPC-server tRPC-client tRPC router
opensauced.pizza @bdougie tRPC 14 Server Client Function Remote Calls
https://beta.create.t3.gg/
TypeScript Tailwind tRPC
t3-app decisions made TypeScript Tailwind tRPC next-auth prisma
opensauced.pizza @bdougie 18 Jamstack DEMO
opensauced.pizza @bdougie 19 Jamstack
localhost:3000
opensauced.pizza @bdougie tRPC Setup 21 tRPC-server tRPC-client tRPC router
opensauced.pizza @bdougie 22 tRPC-server tRPC-client tRPC Setup tRPC router
opensauced.pizza @bdougie 23 tRPC-server tRPC-client tRPC Setup tRPC router
opensauced.pizza @bdougie 24 tRPC-server pages create-t3-app setup tRPC router
opensauced.pizza @bdougie 25 Backend
server/example.ts tRPC Schema-less API development.
opensauced.pizza @bdougie 27 Frontend
localhost:3000
pages/index.tsx react-query Powerful React state management
pages/index.tsx react-query Powerful React state management
pages/index.tsx react-query Powerful React state management
tRPC router bene fi ts Caching Distribution JSON Magic
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
opensauced.pizza @bdougie tRPC Lowers the barrier for building. 34
opensauced.pizza @bdougieYO 35 1 5 2 3 4 create-t3-app (framework)
hot.opensauced.pizza
None
opensauced.pizza @bdougieYO 38 youtube.com/opensauced
opensauced.pizza @bdougieYO 39 youtube.com/opensauced
Michael Jordan of open-source @bdougieYO