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.
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.
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!
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
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.
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 :)
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.
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.
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.
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!
**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.
@+- 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.
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.
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?
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?
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.
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.
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 ?
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! 💯
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?
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!
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?
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!!
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?
I ran into the TypeScript error in tailwind.config.cjs as well. I solved it by adding a path to the content array for Daisy. /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{js,ts,jsx,tsx}", "./node_modules/daisyui/dist/**/*.{js,ts,jsx,tsx}"], plugins: [require("daisyui")], theme: { extend: {}, }, };
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.
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.
T3 video from the legend himself, and he got a sponsor too? Hell yeah
That's really helpful to hear about keyboard shortcuts, tools and plugins along with tutorial.
Very well explain everything start to end of deployment. Thanks
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!
This is just incredible. Thanks for sharing Jack
Waiting for more and more amazing professional quality content.
Thanks Jack...I just learnt about tRPC and was thinking about integrating in next.js...And at that moment your video dropped...Thanks again...
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!
This channel is incredible, you have a great teaching style. Very pleased to have found this channel, it has already been incredibly helpful.
Another excellent tutorial, cheers Jack
the background scene of your video is beautiful !
The only ad I don't want to skip❤
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
Thank you very much! This is the best video to get you started with the t3-stack.
Great vid and stack I've been working in a personal project for 4 months and this is gold for it. Thanks!!!
I wish that NestJS supports tRPC officially
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.
this was an extraordinary primer on the combo. thanks!
Scribe ! OMG what a great product and great AD Jack, such a master !
Thank you Jack, for make a video on tRPC ☺️☺️
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 :)
thank you for showing some love for pnpm
Amazing setup Jack.
Jack are you reading my mind?? I was searching tutorial on exact tech stack and this came up!😀😀
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.
Been looking forwarding to this. Thanks Jack!
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.
17:22 missed opportunity to show the new copy-paste env file into Vercel dashbaord
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.
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 😊
Finally a video using a T3 Stack thanks
Ty for making clear some things that not clear in my mind about how data flows UI to DB .
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.
Great content as always, learnt a lot. Thanks Jack
Thanks for the tutorial content Jack 😎🖖
Love it. The generated typing is really nice. Wild that useState is already “Good ol’ useState 😂”. JS moves so quickly.
A good channel for non-beginners.
Yay!!! So glad to see you cover it!
Just finished watching the video.
Fullstack will never get easier than that!
yes! Thank you! This video should be a hit!
Mmm. I never had any idea on TRPC until I saw this quality video. Thanks Jack, thanks a ton
best tutorial for old idea but new tech stack. 🤟🤛🤜
Very well explained, Thank you very much for this video,❤
Love your work ! Thanks for the video
**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.
This is a very cool lesson! Thanks
Overall really great project to start with T3 stack (tRPC under the hood😌) already loving this stack 🤩, thanks for bringing in
If you have a problem with Unsafe return at 24:39, just restart ESLint server (Ctrl + shift + P => ESLint restart server)
really valuable information, thank you jack
Awesome tutorial 👍🏻👍🏻, also would be great if you could share the terminal theme and autocomplete package you are using 😊.
You can copy/paste your environment variables on Vercel now!
So many gems in this, thanks Jack!
33:37 VS Code auto imported Topic type for me from prisma client hah
Thx, the best tutos I must say.
I'm use Arc browser too, it's really cool
its really fun when sometimes I heard your high voice, ex: @40:11 , awesomeeeeeeeee 😝
@+- 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.
I’d love to see a version of create-t3-app using the new server component app folder structure
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!
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?
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?
Super content. Thank u!
t3 stack is my new go to
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.
Can you please do a tutorial how to professionally customize terminal to be exactly like that you have?
I learned a bunch!
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
Foreign key constraint failed on the field: `Note_topicId_fkey (index)`
❌ tRPC failed on note.create:
Invalid `prisma.note.create()` invocation:😞
I can't thank you enough!
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.
Knew this video was coming!
I can feel the difference that is there in the three months since the video released.
26:35 -why do we need to check for enabled: user, if we are querying protectedRoute?
Thank you sir!
damn, arc browser looks so cool🥵🥵
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 ?
how did you "looks for hinting" on 26:13?
Just love the tutorials and the effort that you put in to deliver such valuable content Jack . Thanks a lot sir.
Thank you!
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"
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 :)
Welcome to the pnpm gang!
This was great!
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
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!
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?
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!!
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!
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
2:05 if you select JavaScript the CLI says “Wrong answer, using TypeScript instead…” and sets the project up with TS 😂
What setup you using in your vscode terminal? Looking to replicate TIA
I ran into the TypeScript error in tailwind.config.cjs as well. I solved it by adding a path to the content array for Daisy.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}", "./node_modules/daisyui/dist/**/*.{js,ts,jsx,tsx}"],
plugins: [require("daisyui")],
theme: {
extend: {},
},
};