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:

And the finished code:

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

[YunusEmre-efos]

To be honest, this video made me happy. Every step was too important for me, thank you.

[Billiam]

Best tutorial I've ever come across for the t3-stack. Finally I feel like I have the knowledge to start building something with it. 🥳

[ryanriddell]

Super helpful. Thank you! A very nice compliment to Theo's video.

[baybay]

Awesome tutorial! I’m always interested in learning the T3 stack! What’s holding me back is figuring out how to implement file/image/video uploads with this stack. It’d be great if you can expand on this topic in the future😊

[Duge]

Great tutorial, definitely the best one i have seen thus far for the t3 stack.

Feedback regarding the video:
- Clear voice, great articulation
- Great placement of your face, nothing important on the screen was covered, it was not distracting
- There was a vibrating phone near the mic, found that a bit distracting.

Thanks once again, great video. Keep up the good work

[georgimilev]

This is the tutorial that I have been waiting for… Highly appreciated and thank you for sharing this tutorial!!

[AndreasFroyland]

Thank you for teaching me about the optimistic updates. Very helpful - Cheers, friend.

[bahaeddine]

Great tutorial, hope to see more in depth tutorials in T3-stack thank you!

[chiragchhajed]

Amazing, I just needed a tutorial on T3 Stack and this was perfect.

[lowrimordecai]

This was a great tutorial thank you so much, really simple to understand and focused on the exact areas i needed instead of wasting time on lots of styling. The delivery was a good pace and I didn't have any issues throughout the whole tutorial! I look forward to more content :)

[peter-novak-m]

Hi Daniel! Thanks a lot for a very nice video! I have been playing around with the T3 stack a bit and learnt a lot from you regarding the optimistic updates and how you used the power of trpc in your type definitions in particular. Just subscribed to your channel in hope of more T3 content in the future. :)

[whowhatwhyhow]

Great video man, also I love to see more people adopting the t3 stack!

One thing that I think you’re missing out is defining the env variables in the schema on the env folder and using throughout the app.

This way you have type safety and it prevents you from building the app with missing env.

[kunalbhardwaj]

Hats off man ! loved your explanation of optimistic updates.

[dsttny]

Great video, took me around 4 hours to re-build it myself.

Echoing the request to add credentials using username/password

[starlordjs]

We need more t3 stack! Thanks for making this awesome tutorial <3

[saharilarshad]

Very good tutorial.. Please make a video T3 Stack with NextAuth included register, login and role base page access with the Credential JWT access token !.. looking for it.. Thanks for the nice shared.😊👍

[raymondmichael]

I can't like this enough ; much appreciated brother.
Keep up the good work.
How can we add roles to users

[wassup]

Great stuff man! Liked the addition of optimistic updates. But can you tell how do we implement SSR or SSG with t3 stack?

[hugo_dev]

This is such an amazing tutorial on the t3 stack app. Btw, Can I ask for your vscode theme?

[GRANATE]

6:27 how do you setup that it autocompletes on save? I installed the prisma addon but it is not doing this. Unbelievable that this is the most annoying thing for me ever.. also the linting on one pc it's formated differently as on the other and everytime I have a lot of changes on git which are just formattings... it makes me sooo angry!