Building full stack projects with tRPC

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
38. opensauced.pizza @bdougieYO 38 youtube.com/opensauced
39. opensauced.pizza @bdougieYO 39 youtube.com/opensauced
40. Michael Jordan of open-source @bdougieYO