Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod
Вставка
- Опубліковано 6 лип 2024
- Repository: github.com/TomDoesTech/trpc-t...
tRPC docs: trpc.io/
In this video, we will build a blog with the T3 stack, tRPC, TypeScript, Next.js, Prisma & Zod. The blog will include a basic one-time password authentication strategy, and the ability to create blog posts.
0:00 Introduction
4:17 Demo
5:53 Code walk-through
20:18 Boostrap app
21:13 Register user
51:29 Login
1:32:28 Create post
1:45:25 View post
1:47:29 List posts
1:49:43 Outro
For creating T3 applications, using create-t3-app is the easiest way to get started.
create-t3-app: github.com/nexxeln/create-t3-app
docker-compose repo: github.com/tomanagle/awesome-...
🌎 Follow me here:
Discord: / discord
Twitter: / tomdoes_tech
Facebook: / tomdoestech
Instagram: / tomdoestech
TikTok: / tomdoes_tech
☕ Buy me a coffee: www.buymeacoffee.com/tomn - Розваги
❤️❤️❤️
Today I thought to myself "maybe I should use trpc" and then I see this video on my recommendations
Let me know what you think of it!
Really concise and right to the point, these kinds of videos are pure gold. Keep up the good work!
Thank you for making this!!! It's super helpful. Can't wait to try it out :D
I have been watching Theo's videos on UA-cam to learn more about front-end development and ended up learning more about back-end development and found out about tRPC, he shared this video on his page so that's how I got here. :D
Most comprehensive and easy-to-understand tRPC tutorial ever! I was struggling to understand the main features, and You made it super easy :)
This looked so overwhelming and terrifying when I looked at other people reviewing trpc, you made it so simple to understand. Thanks Tom!
Thanks for this amazing video! UA-cam rarely recommends super great videos like these :)
Tom, your style and method for making videos is top notch. I'm glad that you do things your own way, like the format for the intro and the way you organize you videos, and even how you have all your commands ready to share as in at @13:20. Your ways are really the best I've seen, and I think other creators will begin to follow your style. So, keep it up, and continue to be a leader! :)
Totally agreed. I've only seen 3 videos in this channel and the way Tom laid out his content is incredible. I'd say it's a bit beyond the junior level, so the views might not blow up that fast. But surely, this is gold!
If I had the chance to work with you I'd be over the moon because you sound like that wholesome mentor/team lead who really likes their job and teaching the youngins. Keep it up man.
That's so kind of you, I really appreciate it!
This is the best trpc tutorial you can find on UA-cam , thanks a lot!
Wow, thanks!
Insane Tutorial. You just made trpc go mainstream.
Awsome as always Tom
Mesmerizing to watch. I'm certain I'll be referencing this video for many times to come.
i can't wait to run-into this!! thank you tom!
Hope you like it!
Really like your content, unlike other tutorial, I get to learn good architecture, code quality, advanced topics. Great works.
Awesome, thank you!
new favorite channel!
Thank you... It's very useful seeing trpc be setup from scratch
This is really sofisticated, but well explained. Thanks, Tom, I feel a little bit a better developer now :D
always gold videos from teacher Tom!!😍 thank you !! thank you so much Tom😭
Woo. tRPC is amazing. It's my current go-to.
Amazing effort and details put into this! Never stop being great!
Great way to show how fast you can spin up a full stack app. Thanks!
My brain is full of concepts and things that I need to read up on from this tutorial, I'm new to backend and all the stuff you covered is what has been confusing me :DDD
Whit this stack, I have to see this tutorial 😊 Great idea to build a blog✌🏻
Very very very concise and comprehensive! I really enjoy your videos so much!!!
Sometimes the google algorithm does wonders. You had me after 2 sentences. Such a pleasant voice and dialect to listen to on top of great content.
Oh wow, didn't expect a compliment like that, thank you. I do put a bit of effort into trying to pronounce words clearly because not everyone speaks native English, so I'm glad it is appreciated.
This content is amazing,!!! im looking forward for more
My man Tom, you gotta cover more on TRPC, especially the subscription. omg this is very very good
This is the most comprehensive course about trpc, thanks tom i hope your doing more videos about trpc.
More to come!
great video man, really appreciated it, this video opens my eye to what should i learn next, thanks a lot
Great tutorial!
it is really make easy to understand thank you Tom really helped
Great content bro
Cool, I'm exploring for stacks and tech and this looks good
Great tutorial
Ok you sold me on this... gonna try use it in my personal project right now 😁
You must be following Theo! :D Thanks for all your great videos Tom! Keep up the great work!
Thank you so much for this
Dude, you explain everything so well that even my feeble self understood it. Cheers, man.
Theo gang haha love your videos keep it up!
awesome vide, I've learned a lot with this video, thanks so much
5 coffees for this one, exactly what I need, what a coincedence, it's gona save me some time to do my job in monday :-D 👋
You shouldn't have! Matt did all the work but thank you, I really appreciate it
One of the best tutorials about Next and tRPC with Prisma!!!! Really clean code and also very well explanation. Thx so much for sharing
Thank you so much 😊
Awesome
The infer RouterOutputs from trpc is awesome!
Amazing tutorial. Thanks to this I cleaned up my code quite a bit!
Holy shit this is such a good video!!
Got stuck at the 32:49 "Please make sure to provide valid database credentials for the database server at `localhost`." I've never used docker the package you suggested allows me to spin up something but I don't even know if that's what you're using
Really great tutorial, Tom! I have to admit I got stuck for two hour debugging an "error" because I added an extra space when encoding my token SMH. This is why I usually stick to the frontend, but tRPC might make a backend developer out of me.
The other t is missing which is tailwind :D, I mean it's not needed for this tutorial but I think it would be cool for you to use, login and blog templates looks pretty cool and would help new comers to bootstrap a good looking portfolio project.
I wanted to keep tRPC the focus of the video and I find adding CSS adds a lot of time doing stuff that the viewer doesn't really need me to show them. The create-t3-app has it all included if anyone wants to bootstrap an app :)
@@TomDoesTech It's a free content and your channel mate, do whatever you want. Cheers. Great tutorial
Thanks Tom, that was definitely a great tutorial, and with out any doubt, a really powerful Stack. Now I have a little question... Why do we need jotai? I mean, it's a nice state manager and all, but i haven't seen any atoms created around the code...
Great video, waiting for more T3 Stack tutorials. It would be nice if you could create example showing some production ready error response handling with internationalization. Im wondering if it would be better to translate api response messages on the frontend or on the backend?
Your API should return correct errors and responses, then on the frontend you can match those errors to strings. However, be carful to not leak any sensitive data in your error messages from the server.
Like most devs, I have watch probably thousands of tutorials over the years. But I can hands down say that the few of yours I've watched so far are up there with the best, thank you!
Also, would you consider doing a tutorial for TRPC with Fastify? :)
Hey just wanted to ask if the code still works fine if you have followed the tutorial?
@@yunomi26 yeah I followed it today and works perfectly
Great content! Do you have any video on how to deploy/host an application built with this stack?
Hi Tom thanks for such an awesome tutorial on trpc wiht nextjs, i noticed that when creating a user you add createInputSchema. why did you choose create your own input schemas instead of using input schemas generated by prisma?
This is a Zod schema. You can generate Zod schemas from Prisma with a plugin but I'd manually create them tbh. Whatever you add in your schema, the user is going to be able to send to the server so I'd want to make sure I have fine-grained control over that.
@@TomDoesTech Oky i get you there. Tom thank you very much.
great tutorial, as always thanks for the content
i wanted to know if you have any course about the related tools you use in this video
Nah, I don't have any courses but I will make some in the future
Is this or simply using nextjs good for building something like a finance app, productivity app etc. where a lot goes on in the Ui but I also rely heavily on database and the api?
Tutorial from a fresh project starts at 12:30, incase someone is wondering
22:32 router from trpc/router seems to be completely deprecated for version 10 and above,
is there some workarounds on that?
You could make a "enough trpc to be productive" to help beginners understand things that might be obvious to others
That's a good idea!
Hi tom
Can you doing the logic behind nested comments, in some of your next tutorial
Hey tom very great video!
When Will you stream agian?
I want to stream again. I'd been sick lately so I haven't been doing much. Hopefully later this week.
@@TomDoesTech get well soon. Looking forward to more tRPC. Can you stream on how it can be use in express?
Great video! Although, you're mixing up forward slash with backslash.
huh?
@@TomDoesTech every time you say backslash in the video, you're talking about '/', which isn't a backslash, it's just a regular slash. '\' is a backslash
tom,recenlty i get task that they need to use next js with next-auth,mongodb and express,their need is to login with email and password with jwt token and ,login with oAuth(google) and Autho,with these 3 login method with next -auth,would appriciate if you can do a video for this.so once user register with email and password he should able to login to the system with used email(oauth) and also with Autho,Please consider this,if you can use typescript that would be great.using next-auth
@TomDoesTech I would love to follow along, but I'm having trouble getting started with the tutorial. It seems trpc and react-query have several breaking changes in their latest releases. Is there any way you can push the starter folder to GitHub so we can `yarn install` and get going?
I cloned the repo and run yarn and it worked fine. What error are you getting?
It seems the trpc version is updated from v9 to v10
@@TomDoesTech This method doesn't work with the v10 trpc changes
At 42:26 why do we say instanceOf instead of typeOf? What is the practical difference between an instanced object of a type and checking the type? Is it because the typeOf could return other types in the composition?
instanceOf and typeOf are fairly different. typeOf returns a string for the object or primitive that proceeds the typeOf keyword, where instanceOf returns a boolean if the left object was created with the constructor on the right. There are lots of docs on this online, including mdn
Hi Tom, great work! I was wondering, How can I implement logout functionality properly?
You'd remove the cookie and if you like, add it to a blacklist.
Does this also solve overfetch and underfetch problem like GraphQL?
Awesome as always. Can you provide some guidance on how to structure tRPC queries and mutations on a separate files for code organization to prevent bloat?
You could use the controller/services pattern if you're familiar with it. Here is a repo using it. github.com/kittrgg/kittr/tree/migration/apps/web/src/server
@@adamtak3128 thank you so much.
@@adamtak3128 ty broo..
What do you recommend we do if we want to use MongoDB instead of an SQL database? In express, app.listen() takes care of connecting with the database with mongoose, but what do you recommend if I still want to use trpc instead of express in a Next.js project? is prisma a good choice to work with NoSQL DB's or should I stick with Mongoose? If yes, then how?
You can use MongoDB with prisma now
Is it possible to have use trpc with different backend and frontend codes? Most development scenarios are like backend team managing express server code and frontend team managing UI library or framework code.
From the looks of it, it doesn't seem to be possible for trpc to work like that.
That's a negative. tRPC is build for monorepos
@@TomDoesTech Thanks.
Shouldnt there be a way to ensure that the zod schema matches the prisma schema>
for instance;
export const createPostSchema = z.object({
title: z.string().max(256, 'Max title length is 356'),
body: z.string().min(10),
})
when using yup I normally would do something like this for instance, but in your case you are using the zod schema as the source of truth for the type as opposed to the prisma generated type. Is this best practice?
export const createPostSchema = z.object({
title: z.string().max(256, 'Max title length is 356'),
body: z.string().min(10),
})
Would it be possible to do a series on T3 by using small projects? It's hard to find tutorials on it.Thank you!
Yeah, thinking of making a Twitter clone with it
Whats the reason why you don't want to store verification token in browser history? Query params seems to be a good place for this token, if its a one time use token then i think its nothing wrong with letting it sit in the history
It's not a very nice UX, when the user comes back to your website they have a massive URL in their history.
I also wanted to show that if you do have something you don't want in browser history, you can use the #, everyone knows about query strings so was just to add something different.
When I'm opening the link from the ethereal email, I get this error:
"Error: Hydration failed because the initial UI does not match what was rendered on the server."
I'm also running into this error. I'm a little confused by it because I thought we turned server side rendering off towards the beginning of the video. I got it working by storing the hash in state and then using useEffect to set the hash... I would like to know the correct way to handle this though because currently the Login Form is rendered briefly before it renders "Verifying..."
@@mitchrosenlund9199 Were you using the t3 stack, or just Next.js configured manually?
I am going to share the shit out of this video
Thank you :)
Hello, I have an issue with the login. When clicking the login url from the email preview, it loads the login form, it does not redirect me directly to the '/'. But if I click on other browser tab and come back to it, it redirects me to root instantly.
I have token properly working, but the redirection to root after clicking the url doesn't work right away. Can you please help?
router.push doesn't seem to render the page at first visit but it changes the url
[EDIT]: I solved the redirect issue more easily by replacing `useUserContext` in index.tsx with `const { data: user, isLoading } = trpc.useQuery(['users.me'])` -- then check is user exists and render the content if it does :)
I have the same issue!
It seems to be an issue with SSR and the way the user is passed into context. I fixed it by packing the auth logic into getServerSideProps and redirect from there. But without this, it does not recognize the user is logged in without refreshing the page.
Any ideas whats going on @TomDoesTech ?
Been seeing Theo promote the T3 stack. I'm really curious at how it'll compare with GQL so I'm gonna give it a try with a small project.
would you always manually create the zod schemas?
Yeah
You didn't link the Awesome Docker Compose repo in the bio. Trying to find it now. Otherwise, awesome vid!
Oh yeah, sorry github.com/tomanagle/awesome-docker-compose
Hey Tom, to your knowledge is there any way of leveraging tRPC as backend to both a web and mobile application without using a monorepo?
Let's say your API starts getting complex for whatever reason, is Next JS still suitable as opposed to creating an API separately with a framework like Nest JS, I hope this question makes sense, thanks!
Technically there is no reason why you couldn't use Next.js for a complicated app but there are so many factors that go into it, like so you want to split parts of your app into their own services, does your backend do some CPU intensive task that you need to scale out into several instances ect...
Can anyone guide me how to deploy this docker composer and prisma schema? and make this up and running
I have a video on deployed an app with docker-compose and caddy
@@TomDoesTech Okay, I will refer that. I had also one doubt, what if in this tutorial, I want to fetch all posts at the build time. For that I need to fetch/get all posts inside getStaticProps right? but I can't able to use trpc.useQuery() hook inside this function(getStaticProps). Is there any other work around or I am missing something here!
Any ideas on how to implement an infinite scroll using this stack?
Use an Infinite Query trpc.io/docs/useInfiniteQuery
Thanks for your answer. And also thanks for a really nice vídeo. It was really informative.
How or can I use curl or postman to send a body request to the endpoint?
You can copy the curl and put it in postman, otherwise just hit copy the endpoint and send it a request
@@TomDoesTech For sending a post to the endpoint.
.../api/trpc/user.test
The endpoint needs an input, say an object. { name: string }
But whenever I send a postman post with that object inside the json body, the api ( mutation input ) does not receive anything, its just undefined
@@raymartpamplona9122 Make sure you have the correct Content-Type header set, probably application/json
Im confused, if you used the t3 stack the entire bootstrap is done for you, no?
Yeah, if you use create-t3-app
Why use Nextjs if we turn off SSR? I thought the whole point of Nextjs was for ssr?
There is so many good reasons to use Next.js, SSR isn't even at the top of the list
1:40:15
Why did you not used nextauth?
A few of reasons. Firstly, I wanted to make tRPC the start of the show in this video. Secondly, I don't know much about next-auth and I don't really talking about tech that I don't know much about just to make a video and lastly, I like to teach principals more than libraries and frameworks. So if I'm going to add auth, I also want to add in some principals around how different auth strategies function and next-auth abstracts a lot of that away.
7:03
createReactQueryHooks deprecated...
doesn't t3 include next auth? why so complex?
What's complicated?
Can I use tRPC with Flutter while benefiting from the type safe APIs.?
I'm not 100% sure but I assume not. You might be able to convert the types to whatever type system Flutter uses but I'm not sure tbh
You need SSR in a blog.
1.10.43
Hey where's zustland
Wanted to keep tRPC the start of the show
Angular nestjs
Probably my 2 least favourite ways to make an app
@@TomDoesTech ………. 👌
@@TomDoesTech it’s just funny how you have to do all these work arounds and libraries just to do what angular already does
why all talk about tRPC rn? Is it better to learn it instead of GraphQL?
To be a good software developer, you can't skip the non-trendy stuff. GraphQl is going no where, and we should learn it.
It really depends what your goals are and what kind of tech you want to work with. I'd try learn a bit of both, but most companies are going to be using GraphQL right now.
I agree but it's funny because when I was learning GraphQL, it was the trendy thing :)
I never understood people doing tutorials and saying, like, "And now I'm going to write this,.... and this. After that we're going to write that...".
What you are going to write is already seen on screen, so there is no need to say just that and nothing else.
Just please elaborate a little bit more on WHY you writing that...
Often people are following along while coding their own project, so being able to listen and follow along is beneficial
@@TomDoesTech “being able to listen” - that is literally what I was saying, because in such moments there is nothing to “listen” to, because they are just saying what they are typing, nothing more lol
@@NezNez Yeah, so they can listen to what I am typing so they don't have to look back at the screen so much. If you don't like the video that's fine, but a lot of people tell me my teaching style has helped them a lot. Go find someone who matches your learning style
@@TomDoesTech I didn’t meant to be mean or something! So far it is best tutorial about trpc afaik. I just tell you my point, so you could improve your technique. People don’t usually do it, they just silently go to another video…
anyone running across an issue with something along the lines of "Error: Cannot find module '../../../node_modules/use-sync-external-store/shim/index.js'"
go to your package.json and make sure react-query is not v4. I used: "react-query": "^3.39.2". restart the server and you should be good to go
Thank you! This should be higher up