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.
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.
@@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.
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!
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.
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!
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 :)
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";
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.
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.
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.
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!
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.
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
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.
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?
**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.
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'?
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.
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?
@@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.
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! 💯
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?
@+- 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.
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 ?
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!!
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?
Thanks for putting together this video. Wondering if anyone else has hit an eslint error at 24:55? Unsafe member access .findMany on an `any` value. Unsafe member access .create on an `any` value.
after i deployed to the vercel i can't get the github page for authorization. But in development there is no such problem. it basically says 'can’t establish a connection to the server at localhost:3000'. Is there a problem about environment variables i couldn't figure it out. how can i solve this?
Yeah you gotta update the NEXTAUTH_URL environment variable in Vercel deployment to be the production value (that the prod OAUTH in your github is set up for). You'll need to push something to branch to get it to redeploy,
@@orang3hill Thanks for some clarification, but I am still really confused about this. We set it in the video to: localhost:3000/api/auth/callback/github. Do we change this on Github or change it on Vercel? Or just delete?
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!
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
Im using T3 with NextAuth and Auth0 for authentication. I couldn't figure out how to get the accessToken inside the router without adding it to the session.
Since we don’t have a dependency array in useQuery in this scenario, how do we achieve something like pagination? Or what’s the alternative for the dependency array here?
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 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
![Full Stack Tutorial - [Next.js, TRPC, T3, Typescript, Prisma, Tailwind, Zod]](http://i.ytimg.com/vi/S3k82XXCrBo/mqdefault.jpg)
This is the best implementation of an ad I've seen. Deeply integrated into the content.
Probably the first time I watched an ad instead of skipping it
Completely watched this ad. It was a great, non annoying ad. Great work!!
And best of all, seems like something that adds real value to the video itself
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.
Fair enough, my bad. Thank you community!
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.
@@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.
@@Winslow_Tech Sounds like in the future I will need more accurate attribution.
I appreciate you showing us how to deploy it as well. I feel like so many tutorials dont show how to deploy.
Finally this Stack gets more popular. It is so nice to work with it!
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!
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.
Higly recommending to avoid daisy tho 💀
@@JEsterCW why??
Condensed and so clearly articulated! Wonderful presenting and teaching skills. Thank you for your great work.
T3 video from the legend himself, and he got a sponsor too? Hell yeah
Having this type of content for free is really a blessing. Thank you so much! 🚀
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!
Thanks Jack...I just learnt about tRPC and was thinking about integrating in next.js...And at that moment your video dropped...Thanks again...
Jack are you reading my mind?? I was searching tutorial on exact tech stack and this came up!😀😀
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!
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 :)
Amazing setup Jack.
the background scene of your video is beautiful !
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
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";
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.
I wish that NestJS supports tRPC officially
That's really helpful to hear about keyboard shortcuts, tools and plugins along with tutorial.
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.
This is just incredible. Thanks for sharing Jack
Waiting for more and more amazing professional quality content.
Thank you Jack, for make a video on tRPC ☺️☺️
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.
This channel is incredible, you have a great teaching style. Very pleased to have found this channel, it has already been incredibly helpful.
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!
An interesting follow-up video might be to convert this app to allow for multiple users, each having access to only their own notes.
Scribe ! OMG what a great product and great AD Jack, such a master !
Great vid and stack I've been working in a personal project for 4 months and this is gold for it. Thanks!!!
Another excellent tutorial, cheers Jack
Love it. The generated typing is really nice. Wild that useState is already “Good ol’ useState 😂”. JS moves so quickly.
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.
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
The only ad I don't want to skip❤
this was an extraordinary primer on the combo. thanks!
Very well explain everything start to end of deployment. Thanks
Thank you very much! This is the best video to get you started with the t3-stack.
thank you for showing some love for pnpm
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
I would like also see more works like that 😊
Awesome tutorial 👍🏻👍🏻, also would be great if you could share the terminal theme and autocomplete package you are using 😊.
Mmm. I never had any idea on TRPC until I saw this quality video. Thanks Jack, thanks a ton
Been looking forwarding to this. Thanks Jack!
Overall really great project to start with T3 stack (tRPC under the hood😌) already loving this stack 🤩, thanks for bringing in
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.
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?
**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.
17:22 missed opportunity to show the new copy-paste env file into Vercel dashbaord
Yay!!! So glad to see you cover it!
Just finished watching the video.
Fullstack will never get easier than that!
Ty for making clear some things that not clear in my mind about how data flows UI to DB .
Thanks for the tutorial content Jack 😎🖖
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'?
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.
really valuable information, thank you jack
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?
Yeah, I probably should have used the invalidation stuff, whoops.
How does the invalidation work? Where can I read about it or see some examples?
@@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.
@@jherr Thank you!
Great content as always, learnt a lot. Thanks Jack
Very well explained, Thank you very much for this video,❤
Finally a video using a T3 Stack thanks
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! 💯
I watched yours first, and it was A+! It was my first intro to optimistic updates and it was great. Thanks!
@@arctiinae Thanks a lot! Glad you enjoyed :)
best tutorial for old idea but new tech stack. 🤟🤛🤜
Love your work ! Thanks for the video
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?
I guess useQuery has optimistic result. Try to config the request somehow.
I’d love to see a version of create-t3-app using the new server component app folder structure
Can you please do a tutorial how to professionally customize terminal to be exactly like that you have?
Foreign key constraint failed on the field: `Note_topicId_fkey (index)`
❌ tRPC failed on note.create:
Invalid `prisma.note.create()` invocation:😞
Thx, the best tutos I must say.
So many gems in this, thanks Jack!
A good channel for non-beginners.
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?
This is a very cool lesson! Thanks
You can copy/paste your environment variables on Vercel now!
yes! Thank you! This video should be a hit!
Super content. Thank u!
@+- 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.
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 ?
Hey Jack, the React Round-Up podcast link in the description is broken.
its really fun when sometimes I heard your high voice, ex: @40:11 , awesomeeeeeeeee 😝
I learned a bunch!
I can feel the difference that is there in the three months since the video released.
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!!
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?
It’s Arc browser
Great project, very interesting! 🤯
Even if I'm a little disappointed because I can't export my environment variables. 14:43
export GITHUB_CLIENT_ID="YOUR_ID_HERE"
export GITHUB_CLIENT_SECRET="YOUR_SECRET_HERE"
I'm use Arc browser too, it's really cool
Thanks for putting together this video. Wondering if anyone else has hit an eslint error at 24:55?
Unsafe member access .findMany on an `any` value.
Unsafe member access .create on an `any` value.
Just reload VS Code. Should do the trick
after i deployed to the vercel i can't get the github page for authorization. But in development there is no such problem. it basically says 'can’t establish a connection to the server at localhost:3000'. Is there a problem about environment variables i couldn't figure it out. how can i solve this?
Yeah you gotta update the NEXTAUTH_URL environment variable in Vercel deployment to be the production value (that the prod OAUTH in your github is set up for). You'll need to push something to branch to get it to redeploy,
@@orang3hill Thanks for some clarification, but I am still really confused about this. We set it in the video to: localhost:3000/api/auth/callback/github. Do we change this on Github or change it on Vercel? Or just delete?
Welcome to the pnpm gang!
26:35 -why do we need to check for enabled: user, if we are querying protectedRoute?
Hi, Jack! Great video, as always! Thanks. I have a question about Next Js. It is possible to do microfrontends with 13 version?
I mean, something similar to module federation? :)
I can't thank you enough!
If you have a problem with Unsafe return at 24:39, just restart ESLint server (Ctrl + shift + P => ESLint restart server)
Knew this video was coming!
t3 stack is my new go to
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!
damn, arc browser looks so cool🥵🥵
which plugin do you use to have "intellisense" for your zshell?
Fig
@@jherr Thanks.
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
what's name of the extention you're using e.g. in 39:55 to pin line 31 on the top of screen?
You mean the line src > pages > index > Content?
@@jherr No no, line: const Content: React.FC = () => {
@@jakubkurdziel2407 Got it, that's just a VS Code option now; editor.stickyScroll.enabled
@@jherr thank you!
Im using T3 with NextAuth and Auth0 for authentication.
I couldn't figure out how to get the accessToken inside the router without adding it to the session.
What setup you using in your vscode terminal? Looking to replicate TIA
Since we don’t have a dependency array in useQuery in this scenario, how do we achieve something like pagination? Or what’s the alternative for the dependency array here?
tanstack.com/query/v4/docs/react/guides/paginated-queries
Jack, is there a reason why you take the types from RouterOutputs instead of Prisma types?
It more accurately reflects what's coming back from the call.
@@jherr got it. I’d still prefer and use the Prisma types in my projects.
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?
What issues have you run into?
@@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
This was great!