Full Stack Tutorial: NextJS, TRPC, T3, TypeScript, Prisma, Tailwind, Zod

For a few years we have been talking about “Full stack type safety“. But to be honest the developer experience has not been great, especially for beginners. The setup has simply been too complex. Until now with TRPC! 🎉 The T3 stack will setup a boilerplate that integrates TRPC with fully typed React query and mutation hooks. And optionally Prisma which can handle types and CRUD at the database layer. Good times! 🌈 In this Full stack tutorial i build a complete authenticated todo list app. I bootstrap the application with the T3 stack boilerplate. Then I set up email magic link authentication with next-auth. I create all the TRPC backend routes to create, read, update and delete todos. I implement the corresponding functionality on the frontend side using the TRPC query and mutation hooks and add some tailwind styling. Lastly I ensure a really snappy user experience by adding optimistic updates to the frontend. Happy watching! If you want to code along here is a start branch: And the finished code: Twitter: Github: Instagram: TikTok: @barelycoding LinkedIn: Timestamps 0:00 Intro 0:56 T3 Boilerplate 2:10 Overview 3:30 Prisma Database Setup 8:30 next-auth Email Magiclink 13:07 Backend TRPC Router 23:27 Frontend Login 26:07 Frontend TRPC Querying 35:24 Frontend TRPC Mutations 47:18 Frontend Optimistic updates 1:00:19 Final touches 1:02:36 TRPC thoughts CREDITS: Please subscribe to Daniel’s YouTube channel at: @danielbark