T3: TRPC, Prisma and NextAuth Done Right

[@fev4]

This is the best implementation of an ad I've seen. Deeply integrated into the content.

[@arjundureja]

Probably the first time I watched an ad instead of skipping it

[@gerelltroche]

Completely watched this ad. It was a great, non annoying ad. Great work!!

[@KronosaurusRex]

And best of all, seems like something that adds real value to the video itself

[@alalalal291]

Great introduction and love how well the ad was presented. One small thing to mention though is that even though T3 stack is popularized by Theo, he has actually not created Create T3 App, it's created by the community.

[@jherr]

Fair enough, my bad. Thank you community!

[@ToddDunning]

You know that has confused me too. I mean it says all over the place it's created by him, and then it says the community elsewhere. I think Theo is not exactly what we'd call shy and self-effacing.

[@huge_letters]

@@ToddDunning I believe the idea is Theo is creator of T3 stack(the idea of using typescript, tailwind, trpcs etc), but not the creator of create-t3-app which is a utility to bootstrap a t3 stack project.

[@jherr]

@@Winslow_Tech Sounds like in the future I will need more accurate attribution.

[@hunterbertoson156]

I appreciate you showing us how to deploy it as well. I feel like so many tutorials dont show how to deploy.

[@nazar1744]

Finally this Stack gets more popular. It is so nice to work with it!

[@stefankudla809]

Not only did this example make it easy to understand the T3 stack, but it looks stunning with Daisy UI! Enjoyed being able to focus on the functionality more than the styling.

[@JEsterCW]

Higly recommending to avoid daisy tho 💀

[@compton8301]

@@JEsterCW why??

[@pedromenezes4013]

Just starting as a developer and even though I don't get exactly how every tiny bit works under the hood I can appreciate and understand a lot of what was explained. Amazing and super rich content. Thanks again Jack!

[@exokristian]

Condensed and so clearly articulated! Wonderful presenting and teaching skills. Thank you for your great work.

[@jakubkurdziel2407]

Amazing video, Thank You Jack.👏🏼 in 32:57 instead of creating the Topic type You can inport this like that: import type { Topic } from "@prisma/client";

[@jherr]

True in this case. But if the TRPC layer weren't a straight pass-thru, and instead were doing some type of permutation, then you would not have proper sync between the client and the server. Because the client is talking to the server, and not to prisma directly.

[@infisspablo8602]

Banger video! Definitely helpful stuff for people who are just starting with T3 stack but also for folks who played with it for a bit

[@dhavall08]

That's really helpful to hear about keyboard shortcuts, tools and plugins along with tutorial.

[@codewithguillaume]

Amazing setup Jack.

[@metacarpo10]

Omg this couldnt be more perfect in time! I was actually just posting a stack overflow question because I was not able to refresh the page after mutation, I tried a lot of things yesterday, read a ton of documentation but somehow I couldnt and went to sleep angry lol, I guess I missed the onSucess inside the useMutation hook Idk I thought Id alteady tried it. Thanks!

[@appuser]

This was 😘👌 Just needed a quick intro to T3 to see if it'll work for my next project, but got a lot of bonus exposure to the likes of DaisyUI, CodeMirror, react-markdown etc.

[@kszyh_]

I wish that NestJS supports tRPC officially

[@jaany]

T3 video from the legend himself, and he got a sponsor too? Hell yeah

[@reveillegaming]

Will be watching this later. I've actually started a generic blog project using the stack. Enjoying it so far. Will see how much I enjoy on something more complex though.

[@TheFourthPrince]

Thanks Jack...I just learnt about tRPC and was thinking about integrating in next.js...And at that moment your video dropped...Thanks again...

[@ismi-abbas]

I've been searching all day long how to quickly get into this t3app, and for me this is the most quick and precise tutorial. Thanks Jack!

[@nishatsayyed8326]

This is just incredible. Thanks for sharing Jack Waiting for more and more amazing professional quality content.

[@riccardopellegrino5447]

Having this type of content for free is really a blessing. Thank you so much! 🚀

[@samyogdhital]

Jack are you reading my mind?? I was searching tutorial on exact tech stack and this came up!😀😀

[@CaleMcCollough]

Thank you so much for this tutorial. It's not super long. You have no idea how much you helped me, except that the tutorial you don't pause after you input code and that makes it crazy hard to follow it. I had to drop the speed down to 0.25x to catch the code you entered before it went off screen and that still too multiple tries. The instructions aren't 100% complete for Windows, you must put the API keys in the .env folder, and you need to add the correct API keys for the production GitHub OAuth app. Other than that it's nice to have a short tutorial that doesn't combine a bunch of the same stuff that takes so much time and has nothing to do with my app. Everyone's app is different and none of these tutorials have been good for me due to the bloat.

[@crowdozer]

tRPC is amazing. When I saw Theo's video I got motivated to port the entire stack over to svelte lol The tRPC part was pretty easy to set up, it feels like magic to use lol

[@deathmachine808]

Another excellent tutorial, cheers Jack

[@darelbvcr687]

can you make more of these? just started learning t3 stack and its amazing so far, just need to grasp few more concepts regarding trpc

[@bigboylkjh]

I would like also see more works like that 😊

[@nated0g745]

Love it. The generated typing is really nice. Wild that useState is already “Good ol’ useState 😂”. JS moves so quickly.

[@SanjuKumar-hk8yy]

Thank you Jack, for make a video on tRPC ☺️☺️

[@thecodecatalyst]

Great vid and stack I've been working in a personal project for 4 months and this is gold for it. Thanks!!!

[@ergusto]

This channel is incredible, you have a great teaching style. Very pleased to have found this channel, it has already been incredibly helpful.

[@albert3120]

Hey thanks a lot for this content. I remember doing a project alongside your video and kind of forgot about it. Now I was stuck again with the .query .mutation procedures and I just remembered somewhere in my head about your videos and ta-da... you put me back in track in no time. Thanks, really :)

[@clarkhinchcliff7824]

Great video, Jack. Really helped me get ramped up quickly with a CRUD application in a single day. One minor question, Why use RouterOutputs["modelName"]["getAll"][0] against pulling the type directly from '@prisma/client'?

[@jherr]

Because what I'm actually doing is calling TRPC, and not Prisma directly, so IMHO I should rely on the TRPC types because the TRPC layer could (but isn't in this case) be doing a little something extra with the Prisma output.

[@jjrise]

this type of content is the best, I really enjoy the code walkthroughs. T3 can be a bit confusing when new, especially relating to trpc and nextauth. One thing I did notice different is using refetch instead of .invalidation. Is there a difference between those two approaches for the onSuccess part of your mutations?

[@jherr]

Yeah, I probably should have used the invalidation stuff, whoops.

[@szluganaware]

How does the invalidation work? Where can I read about it or see some examples?

[@jherr]

@@szluganaware tanstack.com/query/v4/docs/react/guides/query-invalidation It's super nice, basically you can say; when this query succeeds then refetch this other query automagically.

[@szluganaware]

@@jherr Thank you!

[@arhamsc9097]

Awesome tutorial 👍🏻👍🏻, also would be great if you could share the terminal theme and autocomplete package you are using 😊.

[@small_norweg_]

The only ad I don't want to skip❤

[@bassam.2023]

What can I say? 🤔 The most comprehensive tRPC tutorial out there! 🙌🏻 🙏🏻 Thank you so much! 😁 PS Thanks for bringing attention to daisyUI, a life saver for those of us who are a bit behind on the CSS side of things!

[@bassam.2023]

An interesting follow-up video might be to convert this app to allow for multiple users, each having access to only their own notes.

[@faizanahmed9304]

**THE BEST** Tutorial on T3 stack! But sir I struggle with prisma, I think I must see a tutorial on it. Coming from mongoose I think it is overwhelming.

[@volkan8583]

Ty for making clear some things that not clear in my mind about how data flows UI to DB .

[@yanrussell2015]

the background scene of your video is beautiful !

[@SuperShivammm]

Very well explain everything start to end of deployment. Thanks

[@laous]

Thank you very much! This is the best video to get you started with the t3-stack.

[@aghileslounis]

Scribe ! OMG what a great product and great AD Jack, such a master !

[@VincentFulco]

this was an extraordinary primer on the combo. thanks!

[@hunterbertoson156]

Been looking forwarding to this. Thanks Jack!

[@repe0]

thank you for showing some love for pnpm

[@laroikin]

Yay!!! So glad to see you cover it!

[@laroikin]

Just finished watching the video. Fullstack will never get easier than that!

[@abhishekvishwakarma9045]

Overall really great project to start with T3 stack (tRPC under the hood😌) already loving this stack 🤩, thanks for bringing in

[@senkasim]

Thanks for the tutorial content Jack 😎🖖

[@BensTechLab]

You win best sponsor integration! I was all ready to fast forward an off-topic irrelevant product shout out… but this was spot on. Hope you can keep up the sponsor alignment as you continue to grow.

[@levantos]

So many gems in this, thanks Jack!

[@07Weka]

This is a super cool and clear tutorial. One thing I noticed when experimenting with this is that there is a significant lag following saving of a topic or note before they display in the list, as it needs to first save and refetch from the database. There are probably many solutions, but what would be the best approach to displaying a newly added tag in the list before syncing it to the database? Does trpc support optimistic updates?

[@НаильШайхинуров-п7л]

I guess useQuery has optimistic result. Try to config the request somehow.

[@devagr]

17:22 missed opportunity to show the new copy-paste env file into Vercel dashbaord

[@sphesihlemanuel2933]

Finally a video using a T3 Stack thanks

[@danielbark]

Great video Jack! I published almost the exact same video last week :P I also tried out some optimistic UI updates on the tRPC mutation hook if that would be interesting to anyone here. But definitely finish this video first! 💯

[@arctiinae]

I watched yours first, and it was A+! It was my first intro to optimistic updates and it was great. Thanks!

[@danielbark]

@@arctiinae Thanks a lot! Glad you enjoyed :)

[@pointman3352]

Great content as always, learnt a lot. Thanks Jack

[@blue_berry_pie64]

best tutorial for old idea but new tech stack. 🤟🤛🤜

[@sujithgnth]

Mmm. I never had any idea on TRPC until I saw this quality video. Thanks Jack, thanks a ton

[@Michael-Martell]

yes! Thank you! This video should be a hit!

[@hbela1000]

Thx, the best tutos I must say.

[@vrmatt]

really valuable information, thank you jack

[@manoj-k]

Very well explained, Thank you very much for this video,❤

[@brianfarley2723]

@+- 25minutes. If your on page top.ts if the .topic is underlined with red showing error, restart your ide. Or CTRL + SHIFT + P then type: restart TS Server Not sure why you need to do this, but it works.

[@hwj8640]

A good channel for non-beginners.

[@shozdott]

I'm pretty new, can you elaborate on which env variables were set when deploying to vercel? you sorta just skipped right through them ty :) I know the database , did you change the next-auth url from localhost etc?

[@Ellenox147]

Love your work ! Thanks for the video

[@AstralHorse_UA]

Could you please share you configuration for chrome, I like your right tab bar, that’s looking awesome. Also good to see more great extensions. What do you use for creating user friendly diagrams?

[@yoz0__]

It’s Arc browser

[@tiagoclarenc9911]

Hi Jack and thanks a lot for the great content ! I followed along until adding new topics and refetching them on the page. Although it works great in localhost I get a 401 unauthorized in vercel prod environment when trying to create a topic. Any idea what could be causing the discrepancy in prod ?

[@zombiefacesupreme]

You can copy/paste your environment variables on Vercel now!

[@elenakiseljova2493]

This is a very cool lesson! Thanks

[@beefykenny]

I learned a bunch!

[@ВладиславШутеев-ф1м]

Super content. Thank u!

[@cb73]

I’d love to see a version of create-t3-app using the new server component app folder structure

[@mariocarlosrocapenafiel8749]

I'm use Arc browser too, it's really cool

[@karenamicone6591]

Hi, Jack! Great video, as always! Thanks. I have a question about Next Js. It is possible to do microfrontends with 13 version?

[@karenamicone6591]

I mean, something similar to module federation? :)

[@seanlawton7681]

t3 stack is my new go to

[@Zechey]

Is this a whole lot different with Next 13.4? As it introduced a lot of new stuff, wondering if using TRPC is still a thing. Just got into Next and this looks like yet another great video to cover this but just want to make sure!

[@mohammed.haydar]

Can you please do a tutorial how to professionally customize terminal to be exactly like that you have?

[@alii4334]

I can't thank you enough!

[@Svish_]

19:56 Instead of excluding the whole `tailwind.config.cjs` file, I think you could also just add `// @ts-ignore` on the line above the error?

[@pananasik4317]

If you have a problem with Unsafe return at 24:39, just restart ESLint server (Ctrl + shift + P => ESLint restart server)

[@lsxu149]

damn, arc browser looks so cool🥵🥵

[@Ikakoo2410]

Thank you sir!

[@piyushaggarwal5207]

I can feel the difference that is there in the three months since the video released.

[@albertosilvaus6417]

Thank you!

[@muaddib3515]

Knew this video was coming!

[@realbigsquid]

This was great!

[@bendevweb89]

Great project, very interesting! 🤯 Even if I'm a little disappointed because I can't export my environment variables. 14:43

[@octaviusbytes]

export GITHUB_CLIENT_ID="YOUR_ID_HERE" export GITHUB_CLIENT_SECRET="YOUR_SECRET_HERE"

[@greggord-hume3979]

Thanks for the video. Could you share the plugins you use in vscode that help with the autocomplete of code? Your t3 experience seems so much better then mine!

[@jherr]

GitHub Copilot is the primary one. Sorry you've had a rougher time of it.

[@realitydesigners]

wow this is cool

[@haack79]

Why are you migrating to pnpm ? I am too but would love your input as to benefits of it, probalby have a video ? haha

[@jherr]

It definitely seems faster to me.

[@blue_berry_pie64]

its really fun when sometimes I heard your high voice, ex: @40:11 , awesomeeeeeeeee 😝

[@kroucher3286]

Welcome to the pnpm gang!

[@GustavoLemes121213]

Hello and thank you for this amazing tutorial! I have a small question the app doing SSR on the pages for the fetched data? I tried to check the source code on the browser and it does not seem to be rendering the fetched content on the server side. Is there a simple way of doing this while preserving the react-query cache? Thanks!!

[@souravukil4120]

ty

[@mrSargi7]

33:37 VS Code auto imported Topic type for me from prisma client hah

[@angelcorzo3613]

awesome, wondering how can i add two different methods of providers in the same project as I am struggling a bit with it, is there any video I can see from your net?

[@jherr]

What issues have you run into?

[@angelcorzo3613]

@@jherr when adding github and google. when it is redirecting to github page, then an error for not a valir GET HTTP message is displayed, that's about the only issue so far. Google works fine but I cant get github to work

[@malachiconstant2756]

Been wanting to try T3 for a while now. How does it compare with Blitz (their Next implementation, since now Blitz is “agnostic”)? On the surface they seem quite similar except for Next Auth. They both use Prisma, and Blitz’s RPC is similar to TRPC with less boilerplate

[@rpWeb3]

Foreign key constraint failed on the field: `Note_topicId_fkey (index)` ❌ tRPC failed on note.create: Invalid `prisma.note.create()` invocation:😞

[@yasinkavakli]

Jack, is there a reason why you take the types from RouterOutputs instead of Prisma types?

[@jherr]

It more accurately reflects what's coming back from the call.

[@yasinkavakli]

@@jherr got it. I’d still prefer and use the Prisma types in my projects.

[@TheJobCompany]

I love this stack, though I'm super curious to see it work with app directory, one day...

[@Thorax232]

Everything this sets up works with app directory. Although tRPC isn't necessary as a Next plugin in that environment. (Maybe as a standalone server.) There's also a PR out right now to pass server functions to the client as a reference. Which will be a much easier interface that having tRPC gen endpoints. Everything t3 sets up for you is really straightforward by itself.

[@TheJobCompany]

@@Thorax232 true, that is actually the part that I've been craving; right now setting up tRPC is not as straight forward in server components, as it is in pages, which is my biggest complaint; that and the beta status of the apis

[@Thorax232]

@@TheJobCompany I guess I should mention that the PR to call server functions from the client is on React. Not Next or tRPC. Sebastian Markbage is the one who submitted it. So this is something that will be available to other React frameworks. I think what this means is, by looking at the examples on that PR, we'll be able to have button click and form submissions reference server functions that are called and processed on the server. There's still a security consideration there, you have to explicitly allow a server component to accept this functionality. But the point being, things like tRPC built into Next will probably not be necessary at all in appDir. Because the features will be baked in. If you wanted tRPC as a standalone server that doesn't run at the edge, it's still a good option for medium sized apps imo.

[@denissorn]

Great content. Did you think about creating similar, longer course, with more 'realistic' complete application? I have seen such courses doing pretty well on Udemy for example.

[@jherr]

Maybe on the content idea. But I’d rather it be free. Free doesn’t mean bad. It just means free.

[@denissorn]

@@jherr I definitely wouldn't mind a free course! What I meant is there seem to be a huge interest in such content.

[@jherr]

@@denissorn Definitely, lots of interest in NextJS and TRPC.