How to use tRPC with ExpressJS and React, including Prisma and tailwind css
Vložit
- čas přidán 28. 07. 2024
- This is a complete beginners tutorial about tRPC. We will be building a #fullstack application using #expressjs and #react . I would be using #prisma as the #database orm alongside with #zod schema validation. For the #ui I will be using #tailwindcss.
Github: github.com/trulymittal/t3-app...
--------------------------------------------------------------------------
📦FREE $100 credit @Digital Ocean: m.do.co/c/3208f08b3324
--------------------------------------------------------------------------
Subscribe: czcams.com/users/yourstruly2...
--------------------------------------------------------------------------
💵Support the channel:
Paypal: www.paypal.me/trulymittal
Patreon: / trulymittal
--------------------------------------------------------------------------
0:00 Introduction
0:13 What is tRPC
2:26 What is a monorepo
3:15 structure of application
7:20 initTRPC trpc/server
10:00 query trpc/server
14:35 mutation in trpc/server
17:06 appRouter - merging routes
18:33 trpc middleware for express
21:13 React @trpc/client
23:30 exporting type AppRouter from server to client,
26:33 creating tRPC client
31:10 tRPC query - listing TODO’s using
36:03 tRPC mutation - adding a Todo
39:17 tRPC context - invalidate data
40:47 mutation to delete a TODO
45:08 mutation to update a TODO
48:04 Context for Authentication in trpc
53:04 Error handling
======================
✔ Other useful Playlists
======================
#RestAPI (#NodeJS and MongoDB): • REST API using NodeJS ...
#API Authentication using #JWT: • NodeJS API Authenticat...
#Firebase: • Firebase | Build a Not...
Docker: • Docker
MongoDB: • Learn MongoDB in 50 mi...
Html/Css/Js: • HTML / CSS / JS
Android: • Android
Challenges: • Challenges
#yoursTRULY #tutorial #howto #nodejs #android #mafiacodes
Man I wish all tutors were like you. focusing on the main topic without wavering in irrelevant stuff. loved it when you said "this is not a prisma tutorial that's why i won't explain prisma code"
Thanks Bhaiya , much needed
Great explanations,
Helped me out quite a bit!
Thanks
Great to hear!
U doing gooood job in those thumbnail bruv They really look good lets say that they are the main reasing i subed and I think that your tuts are good too
Good job!
Yours was one of the best, the only thing I think I could say that may be useful feedback is that this is mostly a good tutorial for someone who is a stronger developer (I'm decent) and they need sort of a tour of the tooling, but not to learn too much. If someone is junior or lower intermediate then I think my advice is possibly very valid in my last statement.
For more context, I think for example that when you are setting up your front and backend you could/should stop and take a moment periodically to explain why and how that works. Even draw backs would be good or how it is different than x common JS tech stack. This gives some openings for more junior people to recognize questions they need to ask and some idea how to go about searching for that knowledge too. Also destructuring is another area that IMO I generally think is a bad choice because destructuring ({ input }) abstracts away what is happening and reduces clarity for newbies and newer devs, which I think this video was mostly geared towards. For me it was a little off putting, but I know how to resolve my question in about 5seconds and I also know the question to ask myself when I see that. This is non-obvious to others IMO.
Let me end by saying my feedback is not a tear down. I have taken the time to give this feedback only as a way to pay forward your gift to me by creating this video and other than a Like I have no other way of truly being supportive. This is my way as a viewer of thanking you for doing such a great job from which I have benefitted and I really appreciate your efforts.
Oh one last thing. I really found your pace was good and your clarity of enunciation/clarity when speaking is top notch.
Thanks for awesome content, could you please make a video for deployment of trpc app?
Very Nice sir,
Please make a new tool using react js. your projects are amazing and also very helpful for resume
How can I deploy this project? Please also make a video about deploying.
took around 5 hours to successfully complete this project
Welldone for the good job, please how can we connect tRPC with NextJS 13.2 (using the new app directory)
Very nice video man, thank you. But how can we put this in production? Its prossible to put in vercel? or a shared host like hostinger?
Looks like trpc works only with npm version 7.24.2 and above only since npm workspaces are introduced then
when you fetch the list of todos and mapping directly through it, should n't we use state to save the response and map through that state in react?
can you please make video on how to import 1 million data export with few aggregation pipelines with nodejs
for some reasons, server is not running getting error on frontend; just cloned the repo- starter
I'm using a windows machine and i'm not able to run the `npm run dev` command in the root package.json. Its is only running the first command from the script
can we use react native instead of vite?
It's private mode for your repository. To look at the basic codes structure, could you kindly open as public?
Sorry I made it public now: github.com/trulymittal/t3-app-with-express-react-vite-trpc-prisma
Can you please share your coding journey with us?
sure I would
Can we connect this tRPC server to Next Js app?
I am having hard time connecting tRPC server with express adapter to Nextjs. I followed the documentation and Next js is not accepting AppRouter.
I am also facing similar problem. Any solution bro
*Promo sm*