Full Stack Tutorial – [Next.js, 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:
https://github.com/danba340/full-stack-t3-tutorial/tree/start

And the finished code:
https://github.com/danba340/full-stack-t3-tutorial

Twitter: https://twitter.com/BarelyDaniel
Github: https://github.com/danba340
Instagram: https://www.instagram.com/barelycoding
TikTok: https://www.tiktok.com/@barelycoding
LinkedIn: https://www.linkedin.com/in/daniel-bark

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