Full Stack Tutorial - [Next.js, TRPC, T3, Typescript, Prisma, Tailwind, Zod]

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 ... https://www.youtube.com/watch?v=S3k82XXCrBo