KZhead

Zod Tutorial - All 10 places for Zod in your React / Next.js app

ByteGrad
2024 ж. 17 Мам.
71 092 Рет қаралды
Жүктеу

Hi, I'm Wesley. I'm a brand ambassador for Kinde.
👉 NEW React & Next.js course released at any moment to email subscribers: email.bytegrad.com
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
⏱️ Timestamps:
0:00 Intro
0:32 Full-Stack Overview
1:27 Front end: number 1 - 5
4:13 Example 1 - 2: API requests
19:16 Example 3: Form data
24:24 Example 4: localStorage
28:23 Example 5: URL
30:56 Back end: number 6 - 10
36:06 Example 6 - 8: back-end API
41:24 Example 9: environment variables
43:23 Example 10: file system
44:27 BONUS Example 11: URL (back end)
46:12 BONUS Example 12: Database (ORM)
48:48 Important
#webdevelopment #programming #coding

Пікірлер

  • Sorry for light mode everyone haha. Will use Eraser's dark mode next time. :) My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

    @ByteGrad@ByteGrad7 ай бұрын

    • proper psycho vibes ❤

      @CookingForAlba-qh8nq@CookingForAlba-qh8nq7 ай бұрын

    • Light mode has better contrast for me

      @motehpro@motehpro6 ай бұрын

    • It took me sometime & adjusting the settings to watch but thank you for the nice content... like always :)

      @felicytatomaszewska2934@felicytatomaszewska29346 ай бұрын

    • Dutch Man Hi I am Roy boy geurts

      @RoyGeurts-mh3fl@RoyGeurts-mh3fl5 ай бұрын

    • Good night beautiful I'm going to bed hope you sleep well and wake up refreshed I like your little sidekick Smile

      @RoyGeurts-mh3fl@RoyGeurts-mh3fl5 ай бұрын

  • Thank you sir, that is so great you covered everything we should know about zod with real life examples. You are legend.

    @danielwang4518@danielwang451810 күн бұрын

  • I really like your voice/tone. Its really calming and informative. Thank you.

    @henryhwhap@henryhwhap7 ай бұрын

  • Amazing coverage of Zod use cases, and along the way, an amazing overview of the myriad data-flow possibilities in Next.js!!!

    @bklynpeter@bklynpeter7 ай бұрын

    • Thanks!

      @ByteGrad@ByteGrad7 ай бұрын

  • Sir, your explanations are cleanest I've seen. Please make more ts + reactjs videos. İf possible, about mapped types and keyof keyword

    @nurlanshukurov3864@nurlanshukurov38647 ай бұрын

  • I will watch this tomorrow because the white background is murdering my eyes but can tell this is gonna be awesome.

    @Kay8B@Kay8B7 ай бұрын

  • Amazing, you are a real best reference to seniors before juniors ❤ keep it up 🎉

    @HusamNasrullah@HusamNasrullah7 ай бұрын

  • ok this vid is better thatnt 99% of any zod pay tutorial that i have seen. awesome work!

    @RobertoDuransh@RobertoDuransh7 ай бұрын

    • Thanks!

      @ByteGrad@ByteGrad7 ай бұрын

  • I've not even watched this video but I know it's going to be an absolute blast, I recently went through your ultimate css course and it was also a blast, your previous video on Typescript was awesome and the Generics concepts doesn't look so strange anymore was actually quite confusing before I saw the video

    @olusanyaolamide9764@olusanyaolamide97647 ай бұрын

  • Thanks for sharing your knowledge with us. You're the best!

    @dougfbf@dougfbf7 ай бұрын

  • Yup, another well explained concept, great stuff. I try to watch all you videos, even if on stuff I tthink I already know. Thank you so much! 🔥

    @segunkonibire5433@segunkonibire54336 ай бұрын

  • I need a video like this with hexagonal architecture! Nice video i love it!

    @r4k4210@r4k42107 ай бұрын

  • Thanks for video. I wonder something about recording settings :) do you use OBS for screen recording, if yes what is your output settings because quality is so good

    @berkaycirak@berkaycirak7 ай бұрын

  • You are a hero.. I wish I could turn back and re-work on those projects again using Zod

    @SovitTamrakar@SovitTamrakar7 ай бұрын

  • that's great content, I've been waiting to this video specifically

    @doronsages983@doronsages9837 ай бұрын

  • Thanks for sharing knowledge sir.

    @prashlovessamosa@prashlovessamosa7 ай бұрын

  • This is some very high quality content. You know your stuff!

    @shash0_0@shash0_04 ай бұрын

  • Thanks for sharing your knowledge with us. It's really helpful. One thing want to know, When you will publish your react and next.js project-based course? We are waiting for this.

    @sohrabhossain5115@sohrabhossain51157 ай бұрын

  • I love the flowchart of external data he made i wish i could had this before when i was learning javascript 6 years ago. This flow diagram every beginner of javascript should know

    @zunairullah@zunairullah5 ай бұрын

  • Awesome content

    @bappybd@bappybd7 ай бұрын

  • Thanks a ton! Didn't realize how flexible tool Zod really is. The tip about env variables was especially welcomed! Didn't mind the repetition, as they say it's the mother of learning 😁

    @joonatontti8398@joonatontti83982 ай бұрын

  • Loved your tutorial. THank you for this great content!!!

    @rangerboi9715@rangerboi97156 ай бұрын

  • Yes , these types of techniques can make our app bug free. Helpful content.

    @SumitSingh-wz3wt@SumitSingh-wz3wt6 ай бұрын

  • awesome man. plz make a real based project in react native

    @ShortCodeDev@ShortCodeDev7 ай бұрын

  • Extremely useful video. Thanks a lot

    @abyshekhar@abyshekhar2 ай бұрын

  • Great video! But Where was this a few weeks ago when I was stuck with API bug after bug.

    @pfcokelly@pfcokelly7 ай бұрын

  • He's back.

    @user-ru8hn9hb5c@user-ru8hn9hb5c7 ай бұрын

  • Thanks for tutorial, even if I am a blind person now because of light mode, I learnt lots of things from the video.

    @cangorkemgunes@cangorkemgunesАй бұрын

  • Beautiful work!

    @aleksandarspasov6815@aleksandarspasov68156 ай бұрын

  • pls create trpc in-depth tutorials, thanks for the awesome content

    @anversadutt@anversadutt7 ай бұрын

  • Very nice!

    @swagfinger@swagfinger7 ай бұрын

  • Thanks, very nice explanation!

    @gmagats@gmagats26 күн бұрын

  • what zod version were you using in this example?

    @uzainmubarak9735@uzainmubarak97357 ай бұрын

  • Although the video was a bit stretched by being too repetitive imo, the core info (the list of things where to use it) was really helpful. Thanks a lot!

    @froxx93@froxx932 ай бұрын

  • You can use zod for validate state and forms. I didnt watch the entire video but i assumed you covered that. Zod is runtime library so he knows what are your data in production, typescript work in build time and doesnt even goes outside development, so your code is blind. Based on zod, you can do astonishing process of data validation and build things on top of it, like formik, react hook form, data fetching, filtering, etc, etc. I using Zod in node and i am so in love with it, so clean and easy. The best node js library ever made.

    @zlackbiro@zlackbiro7 ай бұрын

  • Awesome video

    @abdelhameedhamdy@abdelhameedhamdy7 ай бұрын

  • Hi! Thanks for the video, it was really helpful! Also, what is that autocomplete gray code strings in your video? Is it github copilot or some analog? I'm new to vscode, still learning.

    @knownartist@knownartist7 ай бұрын

  • aah, simply the best thank you and subbed :)

    @a_maxed_out_handle_of_30_chars@a_maxed_out_handle_of_30_chars7 ай бұрын

  • Would love to watch this if it was in dark mode! Will wait til day time tomorrow maybe haha

    @ryan.connaughton@ryan.connaughton7 ай бұрын

  • Thank you very much. your channel content is Pure Diamond

    @mohammedelmoutaouakkil@mohammedelmoutaouakkil7 ай бұрын

  • thank you!

    @ElliottTheUnicorn@ElliottTheUnicorn7 ай бұрын

  • your content is awesome man

    @alirabiei2344@alirabiei23447 ай бұрын

  • would like to request advanced MERN(can be next) + redux + Typescript project.

    @regilearn2138@regilearn21387 ай бұрын

  • Great content, thank you for this. Just a word of advice, compare your audio volume to others on youtube, you might want to turn it up a bit.

    @pedropaternostro9917@pedropaternostro99176 ай бұрын

    • OR as we say: I CANT HEAR YOU, YOU HAVE TO SPEAK LOUDER. Otherwise we cannot hear that damn valuable information you are sharing with us.

      @bambydeluxe@bambydeluxe5 ай бұрын

  • Thank you for your awesome content. Request you to make a long course for TRPC. if possible, please include prisma and NextAuth as well.

    @teetanrobotics5363@teetanrobotics53634 ай бұрын

  • thank you once again

    @27sosite73@27sosite737 ай бұрын

  • I enjoy your concepts.

    @RaulCarrasco-jd9sq@RaulCarrasco-jd9sq7 ай бұрын

  • Just came from Typescript Generics! Amazing video!! Don't actually know what Zod is, though like first~

    @wlancer8826@wlancer88266 ай бұрын

  • Excellent. thanks a lot on this zod video.

    @gmjitendra@gmjitendra2 ай бұрын

  • great vid ty mate

    @27sosite73@27sosite737 ай бұрын

  • already been using Zod lately & just wanted to watch this video to see if I was using it in a logical way, but.. I didn’t realise it had an enum type & I never thought about using it for env vars! I was using a separate library for that, for absolutely no reason, it turns out. Great video, thank you ☺️

    @everyhandletaken@everyhandletaken7 ай бұрын

    • Fwiw, it’s still a good idea to use a library for the env variables, the way I showed in this video is just an example - has some downsides in practice

      @ByteGrad@ByteGrad7 ай бұрын

    • @@ByteGrad it looked to provide what I am using (I think it is env-var lib) for at the moment, just basic checks & I would love to get rid of another dependency 🤔 My checks were basically mandatory, type (string or int, generally) & maybe positive/negative for int

      @everyhandletaken@everyhandletaken7 ай бұрын

  • Great course.

    @Elmasinsanodeminecraft@Elmasinsanodeminecraft7 ай бұрын

  • Nice, thanks! QQ: Did u measured performance for React application, with Zod validation all over the place?

    @sbogdaniuk@sbogdaniuk4 ай бұрын

  • Subscribing you and notification to all ❤🎉

    @sulaimanshabbir@sulaimanshabbir5 ай бұрын

  • Thanks for your videos

    @OlegKvyatkovsky@OlegKvyatkovsky7 ай бұрын

  • Great great GREAT content. Clean coder always care about it.

    @Leofmoura87@Leofmoura876 ай бұрын

  • Hi @bytegrad. When is your nextjs course coming You said 30 september, not came till now

    @pranavrajveer3767@pranavrajveer37677 ай бұрын

  • Brillant!

    @mariolazzari@mariolazzari26 күн бұрын

  • This channel is the best find on KZhead of 2023 for me. This video is an excellent example of why. Brilliant - this video fills in many gaps that resulted in me failing a technical interview.

    @fluntimes@fluntimes4 ай бұрын

  • amazing!

    @dennisgonzales9521@dennisgonzales95214 ай бұрын

  • Do one video on soft skills for React and/or Fullstack developers!

    @Fanaro@Fanaro7 ай бұрын

  • Very good content.

    @user-mb7vg4be8e@user-mb7vg4be8e7 ай бұрын

  • thank you boss!

    @jellyfish1772@jellyfish17726 ай бұрын

  • if I remember anything from this video is "in shape we expect it to be" :P

    @DamirSecki@DamirSecki7 ай бұрын

  • 13:47 After Zod successfuly parse the product variable, this variable is sade to use, since the shape is valid, it could contain additional keys but the same is valid. But in the end I agree with you, it's better to use the validatedProduct variable, since Zod returns the data with the typing so you don't need Product type anymore, using Zod with simply don't need to create TS types manually but you still have typings, this a game changer

    @DanielRios549@DanielRios5494 ай бұрын

  • I'm enjoying you bro....

    @oabdulazeez@oabdulazeez5 ай бұрын

  • Say if I am getting the data from an excel file , and assume it sends all fields as a string , and I know that some fields can be converted to number , so how can zod help me here?(will it parse automatically that string field to number if I use z.number() for the field)

    @yuvarajyuvi9691@yuvarajyuvi96917 ай бұрын

  • Is using zod in big project good practice? Zod also impact performace

    @user-if8cf5ni3y@user-if8cf5ni3y5 ай бұрын

  • I can't use zod schema in two separated Backend and Frontend deployed to vercel (MEVN ) . So how can I access that zod schema in production ? Should I use mono repo ?

    @ThanHtutZaw3@ThanHtutZaw32 ай бұрын

  • Please, I have a question. I am Front End and I worked on real projects in Next JS with Back End people, and I want to enter the field of Back End. Do you advise me to learn C# or javascript, it's a busy frame, I'm very confused, and people distract me Thank you

    @lp26197@lp261977 ай бұрын

  • thank you so mutch i didnt know that its possible to tell zod that string could be a number😅 so basicly i have boilerplate code to do that

    @r34221@r342216 ай бұрын

  • what theme do you use? And can you teach us some system design or OOP or dsa anything as your teaching method is so good

    @gmd2171@gmd21717 ай бұрын

    • One Monokai

      @maurvick6777@maurvick67777 ай бұрын

  • one comment, regarding optional chaining, you could also use it on a function call, and that way to avoid crash when the function itself doesnt exist: product?.price?.toFixed?.(2) but yea, that wont be the best solution i guess

    @doronsages983@doronsages9837 ай бұрын

    • Ah yea good point

      @ByteGrad@ByteGrad7 ай бұрын

  • What theme are you using in VSCode?

    @albinopepegas8391@albinopepegas83914 ай бұрын

  • these days I am curiously waiting for your emails

    @zunnoorainrafi5985@zunnoorainrafi59857 ай бұрын

  • As cool as all of this is, I think it's kind of insane that JS is such a flawed language that it requires an absolute mountain of plugins and transpilers and validators to make it safe to work with. Looking forward to the NextJS course!

    @toastrecon@toastrecon7 ай бұрын

    • Every language that interacts with the external world will require this care

      @Danielo515@Danielo5157 ай бұрын

    • @@Danielo515 but I think many languages have the features built in as part of the syntax?

      @toastrecon@toastrecon7 ай бұрын

    • The problem with that line of thinking is that there really isn't anything to compare Javascript with, in the sense of how wide JS adoption is. I do agree modern languages like Go or Rust are better, but if these two were used in a billion places then we might have some problems with them as well. The Javascript flaws are pretty well-known, but I wouldn't say custom solutions for certain problems are something unique to JS.

      @happy_thinking@happy_thinking7 ай бұрын

    • Domain specific validations will always be with us.

      @genovo@genovo7 ай бұрын

    • Everything you said is valid for the existence. Life is flawed and we need to learn how to make it “safe” for us.

      @omereker8824@omereker88247 ай бұрын

  • I registered for your email-subscription. With my real e-mail-address. I don't know how else to say, how much I like your content.

    @bambydeluxe@bambydeluxe5 ай бұрын

    • Haha awesome!

      @ByteGrad@ByteGrad5 ай бұрын

  • … we have API contracts and integration tests. I want zod too

    @ness-ee@ness-ee7 ай бұрын

  • What vscode theme are you using?

    @markhristov7171@markhristov71717 ай бұрын

    • One Monokai

      @maurvick6777@maurvick67777 ай бұрын

  • Hello new subscriber here. Btw what code assistant tool he using ?. Anyone ?

    @kgdjoking7822@kgdjoking78227 ай бұрын

    • copilot

      @antoniosgobio4190@antoniosgobio41907 ай бұрын

  • i usually dont use direct infered type from zod i have model and azod schema then i write a convertor class to convert the data in a zod type to my model this way my presenter layer uses my model and when a change happens in an api i simply have to edit my convertor class instead of entire app

    @r34221@r342216 ай бұрын

  • 👍

    @user-sn4mn3ku9e@user-sn4mn3ku9e7 ай бұрын

  • Lets say an API returns an unknown object where I dont know the possible components. How to extract the components and their types from an unknown object?

    @coolmind2476@coolmind2476Ай бұрын

  • Dear Dart 🤣🤣🤣

    @gofullstack@gofullstack7 ай бұрын

  • The solution to API response changes is not using "whatever" library or using a bunch of if statements. The solution is communication between product manager, backend and frontend and establish clear tasks that bring changes. Using these types of techniques, you only sugar coating the problem and possibly hidding it all together. Why should my frontend code look messy with tons of checkings if the backend fails to do their job or lack of communication or tasks mis-correlation ? 3rd party Apis usually use versioning and are well documented when changed. Do not overcomplicate development

    @cristitoderita3620@cristitoderita36207 ай бұрын

  • Wish I would've found your content earlier.

    @user-ks8un9hw9v@user-ks8un9hw9v7 ай бұрын

  • What about yup?

    @sssrikanthhh@sssrikanthhh17 күн бұрын

  • Hi sir why you delayed your launch? One month delay is huge😢

    @cubeunicorn4055@cubeunicorn40557 ай бұрын

    • Just want to make it perfect haha :)

      @ByteGrad@ByteGrad7 ай бұрын

  • the issue actually was not solved. no typescript, with or with zod, you will get the error when data changed. instead use a ts schema generator or use create T3

    @archmad@archmad7 ай бұрын

  • we should use a new feature every year))) zod, TS, BS, WTFS 🤣🤣🤣

    @vitya.obolonsky@vitya.obolonsky6 ай бұрын

  • Valibot

    @artyomtaranenko2267@artyomtaranenko22677 ай бұрын

    • Basically its the same thing but you have to import all validators manually instead `z.`

      @juviess@juviess7 ай бұрын

  • editor tutorial HAHAHA

    @lirics5864@lirics58646 ай бұрын

  • Too quiet.

    @sillvvasensei@sillvvasensei7 ай бұрын

  • ATM Web development is such a bad sector to work. Less jobs, less benefits, fear of being laid off, and an ecosystem that requires so much studying and its so chaotic that it's impossible to keep up. And I havent evven mentioned AI.

    @Theokondak@Theokondak4 ай бұрын

    • True, it’s so over for most of us, junior devs especially 😢

      @siriusmain1763@siriusmain17632 ай бұрын

  • You. Are repetitive,

    @psmontte@psmontteАй бұрын
KZhead