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

  • Опубликовано: День назад

    ByteGradByteGrad
    подписчиков: 95 тыс.

    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

@ByteGrad +52
@ByteGrad

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: https://bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

4 месяца назад
@CookingForAlba-qh8nq
@CookingForAlba-qh8nq

proper psycho vibes ❤

4 месяца назад
@motehpro +1
@motehpro

Light mode has better contrast for me

3 месяца назад
@felicytatomaszewska2934 +1
@felicytatomaszewska2934

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

3 месяца назад
@RoyGeurts-mh3fl +1
@RoyGeurts-mh3fl

Dutch Man Hi I am Roy boy geurts

2 месяца назад
@RoyGeurts-mh3fl
@RoyGeurts-mh3fl

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

2 месяца назад
@henryhwhap +4
@henryhwhap

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

4 месяца назад
@bklynpeter +16
@bklynpeter

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

4 месяца назад
@ByteGrad
@ByteGrad

Thanks!

4 месяца назад
@RobertoDuransh +4
@RobertoDuransh

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

4 месяца назад
@ByteGrad
@ByteGrad

Thanks!

4 месяца назад
@HusamNasrullah +4
@HusamNasrullah

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

4 месяца назад
@olusanyaolamide9764 +14
@olusanyaolamide9764

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

4 месяца назад
@segunkonibire5433 +1
@segunkonibire5433

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! 🔥

3 месяца назад
@nurlanshukurov3864 +9
@nurlanshukurov3864

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

4 месяца назад
@zunairullah +3
@zunairullah

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

2 месяца назад
@SumitSingh-wz3wt +1
@SumitSingh-wz3wt

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

3 месяца назад
@shash0_0 +1
@shash0_0

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

2 месяца назад
@SovitTamrakar +1
@SovitTamrakar

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

4 месяца назад
@Kay8B +2
@Kay8B

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

4 месяца назад
@dougfbf +2
@dougfbf

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

4 месяца назад
@pedropaternostro9917 +9
@pedropaternostro9917

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.

3 месяца назад
@bambydeluxe
@bambydeluxe

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.

2 месяца назад
@berkaycirak +2
@berkaycirak

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

4 месяца назад
@teetanrobotics5363 +2
@teetanrobotics5363

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

2 месяца назад
@wlancer8826 +1
@wlancer8826

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

3 месяца назад
@anversadutt +1
@anversadutt

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

4 месяца назад
@r4k4210 +2
@r4k4210

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

4 месяца назад
@rangerboi9715 +1
@rangerboi9715

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

3 месяца назад
@everyhandletaken +2
@everyhandletaken

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 ☺️

4 месяца назад
@ByteGrad +3
@ByteGrad

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

4 месяца назад
@everyhandletaken
@everyhandletaken

@@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

4 месяца назад
@uzainmubarak9735 +2
@uzainmubarak9735

what zod version were you using in this example?

4 месяца назад
@sohrabhossain5115 +3
@sohrabhossain5115

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.

4 месяца назад
@a_maxed_out_handle_of_30_chars +2
@a_maxed_out_handle_of_30_chars

aah, simply the best thank you and subbed :)

4 месяца назад
@blackzerosrb +5
@blackzerosrb

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.

4 месяца назад
@doronsages983 +1
@doronsages983

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

4 месяца назад
@sbogdaniuk +1
@sbogdaniuk

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

Месяц назад
@user-if8cf5ni3y +1
@user-if8cf5ni3y

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

3 месяца назад
@user-mr6wi9kt1m +1
@user-mr6wi9kt1m

I like the way you present your work.

4 месяца назад
@mohammedelmoutaouakkil +1
@mohammedelmoutaouakkil

Thank you very much. your channel content is Pure Diamond

4 месяца назад
@knownartist
@knownartist

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.

4 месяца назад
@yuvarajyuvi9691 +1
@yuvarajyuvi9691

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)

4 месяца назад
@pfcokelly +2
@pfcokelly

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

4 месяца назад
@prashlovessamosa +2
@prashlovessamosa

Thanks for sharing knowledge sir.

4 месяца назад
@aleksandarspasov6815 +1
@aleksandarspasov6815

Beautiful work!

4 месяца назад
@Leofmoura87 +1
@Leofmoura87

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

3 месяца назад
@pranavrajveer3767 +1
@pranavrajveer3767

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

4 месяца назад
@Fanaro +1
@Fanaro

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

4 месяца назад
@RaulCarrasco-jd9sq +1
@RaulCarrasco-jd9sq

I enjoy your concepts.

4 месяца назад
@ShortCodeDev +2
@ShortCodeDev

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

4 месяца назад
@DanielRios549 +1
@DanielRios549

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

Месяц назад
@alirabiei2344
@alirabiei2344

your content is awesome man

4 месяца назад
@Elmasinsanodeminecraft +1
@Elmasinsanodeminecraft

Great course.

4 месяца назад
@albinopepegas8391
@albinopepegas8391

What theme are you using in VSCode?

Месяц назад
@r34221 +1
@r34221

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

3 месяца назад
@r34221
@r34221

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

3 месяца назад
@27sosite73 +1
@27sosite73

thank you once again

4 месяца назад
@ryan.connaughton +1
@ryan.connaughton

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

4 месяца назад
@sulaimanshabbir +1
@sulaimanshabbir

Subscribing you and notification to all ❤🎉

3 месяца назад
@gmd2171
@gmd2171

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

4 месяца назад
@maurvick6777 +1
@maurvick6777

One Monokai

4 месяца назад
@doronsages983 +1
@doronsages983

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

4 месяца назад
@ByteGrad
@ByteGrad

Ah yea good point

4 месяца назад
@bappybd +3
@bappybd

Awesome content

4 месяца назад
@fluntimes +1
@fluntimes

This channel is the best find on YouTube 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.

Месяц назад
@regilearn2138 +2
@regilearn2138

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

4 месяца назад
@cristitoderita3620
@cristitoderita3620

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

4 месяца назад
@toastrecon +6
@toastrecon

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!

4 месяца назад
@Danielo515 +9
@Danielo515

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

4 месяца назад
@toastrecon +1
@toastrecon

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

4 месяца назад
@happy_thinking +6
@happy_thinking

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.

4 месяца назад
@genovo +5
@genovo

Domain specific validations will always be with us.

4 месяца назад
@omereker8824 +4
@omereker8824

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

4 месяца назад
@lp26197
@lp26197

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

4 месяца назад
@27sosite73 +1
@27sosite73

great vid ty mate

4 месяца назад
@OlegKvyatkovsky +1
@OlegKvyatkovsky

Thanks for your videos

4 месяца назад
@user-ru8hn9hb5c +1
@user-ru8hn9hb5c

He's back.

4 месяца назад
@user-mb7vg4be8e +1
@user-mb7vg4be8e

Very good content.

4 месяца назад
@oabdulazeez +1
@oabdulazeez

I'm enjoying you bro....

2 месяца назад
@jellyfish1772 +1
@jellyfish1772

thank you boss!

3 месяца назад
@markhristov7171 +2
@markhristov7171

What vscode theme are you using?

4 месяца назад
@maurvick6777 +2
@maurvick6777

One Monokai

4 месяца назад
@ElliottTheUnicorn +1
@ElliottTheUnicorn

thank you!

4 месяца назад
@dennisgonzales9521 +1
@dennisgonzales9521

amazing!

Месяц назад
@DamirSecki +1
@DamirSecki

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

4 месяца назад
@abdelhameedhamdy +1
@abdelhameedhamdy

Awesome video

4 месяца назад
@swagfinger +1
@swagfinger

Very nice!

4 месяца назад
@kgdjoking7822 +1
@kgdjoking7822

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

4 месяца назад
@antoniosgobio4190
@antoniosgobio4190

copilot

4 месяца назад
@zunnoorainrafi5985 +1
@zunnoorainrafi5985

these days I am curiously waiting for your emails

4 месяца назад
@bambydeluxe +1
@bambydeluxe

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.

2 месяца назад
@ByteGrad
@ByteGrad

Haha awesome!

2 месяца назад
@ness-ee +1
@ness-ee

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

4 месяца назад
@archmad
@archmad

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

4 месяца назад
@gofullstack +1
@gofullstack

Dear Dart 🤣🤣🤣

4 месяца назад
@cubeunicorn4055 +1
@cubeunicorn4055

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

4 месяца назад
@ByteGrad +6
@ByteGrad

Just want to make it perfect haha :)

4 месяца назад
@user-sn4mn3ku9e +1
@user-sn4mn3ku9e

👍

4 месяца назад
@user-ks8un9hw9v +1
@user-ks8un9hw9v

Wish I would've found your content earlier.

4 месяца назад
@vitya.obolonsky
@vitya.obolonsky

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

3 месяца назад
@artyomtaranenko2267
@artyomtaranenko2267

Valibot

4 месяца назад
@juviess
@juviess

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

4 месяца назад
@lirics5864
@lirics5864

editor tutorial HAHAHA

4 месяца назад
@sillvvasensei
@sillvvasensei

Too quiet.

4 месяца назад
@Theokondak +1
@Theokondak

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.

Месяц назад

Далее

Zod для валидации API и форм

20:19

Zod для валидации API и форм

Михаил Непомнящий

Просмотров 10 тыс.

🎙ПОЮ твои ЛЮБИМЫЕ ПЕСНИ🌴

1:56:25

🎙ПОЮ твои ЛЮБИМЫЕ ПЕСНИ🌴

Саша Квашеная

Просмотров 1,3 млн

Zod + Generics is HEAVEN

4:41

Zod + Generics is HEAVEN

Matt Pocock

Просмотров 49 тыс.

Why use Type and not Interface in TypeScript

14:12

Why use Type and not Interface in TypeScript

ByteGrad

Просмотров 171 тыс.

Zod: Защищаем приложение от пользователя и нерадивых бекендеров

23:55

Why I don't use React-Query and tRPC anymore

18:58

Why I don't use React-Query and tRPC anymore

ByteGrad

Просмотров 46 тыс.

STOP using useState, instead put state in URL (in React & Next.js)

21:41

Deploy your Next.js app to a VPS (EASY!)

15:45

Deploy your Next.js app to a VPS (EASY!)

ByteGrad

Просмотров 19 тыс.

How Did I Not Know This TypeScript Trick Earlier??!

9:11

How Did I Not Know This TypeScript Trick Earlier??!

Josh tried coding

Просмотров 189 тыс.

10 common mistakes with the Next.js App Router

20:37

10 common mistakes with the Next.js App Router

Vercel

Просмотров 119 тыс.

🎙ПОЮ твои ЛЮБИМЫЕ ПЕСНИ🌴

1:56:25

🎙ПОЮ твои ЛЮБИМЫЕ ПЕСНИ🌴

Саша Квашеная

Просмотров 1,3 млн