Zod Validation in React (Complete Tutorial)

Summary

Highlights

• Zod enhances data validation by integrating directly into your React applications. 🌟
• Schema validation with Zod prevents invalid data with clear, verbose error messaging. 🛠️
• Integrating Zod with React Hook Form simplifies the process of handling form data. ✨
• Use Zod's safeParse function to handle validation errors without crashing your app. 🚀
• Extract TypeScript types from Zod schemas for type-safe coding practices across projects. 🤖
• Utilize Zod in backend processes for a unified data validation strategy. 🔁

Key Takeaways

• Zod is a TypeScript-first schema validation library that works well with both TypeScript and JavaScript. 📜
• Zod can create and validate schemas with a variety of properties like strings, numbers, and booleans. 🎨
• The library supports modifiers for validations, such as checking if emails or URLs are valid. 🏷️
• Zod schemas can be integrated with React Hook Form to automate form validation. 🧙‍♂️
• Using safeParse prevents your application from crashing by handling validation errors smoothly. 🛡️
• Environment variables can be validated at runtime using Zod to ensure security and type safety. 🌍

Overview

Chapters

• 00:00 - 00:30: Introduction and Course Promotion In this chapter, the focus is on introducing the subject of data validation using Zot within a React application. Additionally, there's a promotion for the instructor's course, Project React, which promises comprehensive guidance in building complex React applications.
• 00:30 - 01:00: Introduction to Zod Validation The chapter introduces Zot validation in React, highlighting its unique application through a custom platform called Project React, which students have found valuable. The focus then shifts to Zot.dev, the official homepage, where Zot is described as a TypeScript-first schema validation library.
• 01:00 - 05:00: Basic Schema Definition The chapter discusses the use of a static type inference library for schema validation. It explains how you can create a schema, define property types, and validate data against this schema, with error notifications for invalid data. The library supports TypeScript, allowing automatic inference of types from the schema for application-wide use. It also clarifies that even though TypeScript is supported, the library works efficiently with JavaScript as well.
• 05:00 - 09:00: Advanced Schema Features The chapter delves into advanced schema features with a focus on using Zot for data validation. The author emphasizes the importance of combining Zot with TypeScript for optimal performance and compatibility. Since Zot supports TypeScript effectively, the guide suggests configuring TypeScript with strict mode enabled in the tsconfig.json file to ensure thorough validation and type-checking, which is typically the default setting in most TypeScript configurations.
• 09:00 - 12:00: Integrating Zod with TypeScript The chapter "Integrating Zod with TypeScript" focuses on the installation and basic setup of Zod in a TypeScript project. It begins with ensuring that strict mode is enabled in the tsconfig.json file. The speaker then demonstrates how to install Zod using the package manager pnpm. After installation, they rerun the development server using pnpm dev. The chapter aims to provide an understanding of the initial steps needed to integrate Zod with a TypeScript project before diving into more detailed aspects or usage of Zod.
• 12:00 - 29:00: Real World Applications of Zod in React The chapter introduces the concept of defining a schema and individual properties using Zot in a React application. It explores the practical application of Zot schemas in React development, emphasizing the importance of understanding where it's logical to use them. The chapter also discusses the scenarios in which validation is necessary within React projects and highlights the common uses of schemas. It provides insight into what React developers typically encounter when working on real-world projects in companies or teams. The chapter starts with a review of Zot basics before delving into specific applications within React.
• 29:00 - 30:00: Conclusion and Call to Action In this chapter, the focus is on setting up a schema for an application by using the library Zot. The chapter begins with the instructor showing how to import the necessary component, identified as 'Z', from Zot, which will be utilized for schema creation. The chapter proceeds by guiding the reader through the process of defining a simple user schema that represents a user within an application, using the imported 'Z' component. This chapter is crafted as a foundational step in understanding how to structure user data within an application context.

Zod Validation in React (Complete Tutorial) Transcription

• 00:00 - 00:30 In this video, I'm going to teach you everything  that you need to know about validating your data   with Zot in the context of a React application.  But before we get into that, I just want to   quickly mention that if you enjoy the way that I  teach in my videos, and you're also serious about   learning React, you should definitely check  out my course Project React, which is going   to teach you everything that you need to be able  to be a great React developer. You are going to   be building a built in complex application with  a lot of moving parts, and you're going to be   taught and showed how to do it every single step  of the way. It's a course that is totally unique.
• 00:30 - 01:00 There's like a custom application that you get  to work with that I haven't seen anyone else do.   And all the students that have been on the course  have been enjoying it, and they haven't regretted   it. And I wish the same for you. If that sounds  interesting, it's called Project React, and it's   going to be the first link in the description.  Cool. With that being said, now let's talk about   Zot validation in React. All right, so let's  begin. So over here, we have Zot.dev, which is   the official homepage of Zot. So what is Zot? Zot  is, as here, you can see a TypeScript first schema
• 01:00 - 01:30 validation with static type inference library.  So essentially, you're able to create a schema,   define what types of properties your schema has,  and Zot is going to be able to validate any data   that you pass against that schema and throw errors  if it's not valid. And also it has TypeScript for   support, which means that you can automatically  infer all of the types directly from your schema   to be able to use across your entire application.  Now, it's important to note that you don't need   to use TypeScript to be able to work with Zot. Zot  also supports and works very well with JavaScript.
• 01:30 - 02:00 However, if you're going through the lengths  of actually using Zot to validate your data,   I would personally recommend that you also use  TypeScript. And for the rest of this video, we   are going to be working in TypeScript because it  just makes sense and Zot supports it really well.   So the first step for us to do is to come here and  actually go to the installation. So we're going to   click here. And let's see, it's going to take us  to the installation. And then the only thing that   you have to make sure is that if you are working  in TypeScript, you have to enable the strict mode   in tsconfig.json, which for the most part should  already be enabled because most configurations
• 02:00 - 02:30 have strict mode enabled by default. But  if it's not checking your tsconfig.json,   and just enable it. And then we're going to come  here. And we're going to take our command pnpm add   Zot. And I'm going to come here into my editor,  where is it, open up the terminal, cancel this,   and we're just going to install Zot inside of  our project. Now that we have Zot installed,   I'm just going to rerun the dev server in case  that we need it. So we're going to pnpm dev. And   then we have here a working file, which I'm going  to start by first showing you the basics of Zot,
• 02:30 - 03:00 right? So how to define a schema, how to define  individual properties. And then I'm going to   show you how you would actually use that in  the context of a React application. So where   does it make sense as a React developer who's  working in building in React to have Zot schemas,   right? What should you validate? What should  you have a schema for? And what is most commonly   used? And what are you most likely to see if you  work in React in a real project at a company or   some sort of team. So let's begin by just going  over the basics of Zot. So over here at the top,
• 03:00 - 03:30 I'm going to make a new line. And then outside  of the component, I'm just going to import here,   I'm going to import Z from Zot like this Z  is going to be what we're going to be used   to be able to create a schema. And then here, I'm  going to come here and start defining my schema,   we're going to keep things simple, we're just  going to do a user schema to represent a user that   we would have in our application. So let's come  here and we're going to do const user schema. And   here we're going to do z. And then if I push dot  over here, you're going to see all of the options
• 03:30 - 04:00 that we can actually add with z. And there's a lot  of them, this might seem intimidating, you don't   have to know all of them. So don't worry about  that. But one that we're going to use right now,   as you can see here, we have no we have nullable,  we have number we have object, we're going to use   the object property, because we're going to  define an object to represent our user schema,   which is pretty typical. So we're going to select  object over here. And then we're going to call it   with a parenthesis. And then we have to give it  here the shape of the object. As you can see here,   this is a Zot raw shape, this is going to define  what properties is our user schema going to have,
• 04:00 - 04:30 right? What properties is our user going to have.  So this is going to be an object over here. And   we can come here. And we can start defining some  properties. Now before we do that, look at this   code right here. This is the basics of Zot, we  created a user schema, usually you call it schema,   because that's usually related to Zod. And then  you define an object, if your schema is an object,   which in most cases, it is going to be, it  doesn't mean that it's always going to be. But   in our case, a user is going to have properties,  so an object makes sense. And then inside of here,   you also use z dot something to define  the individual properties of your schema,
• 04:30 - 05:00 which in our case, again, is an object. So for  example, since we have a user, what we can do   is we can do something like first name, right, and  this is going to be z. And now instead of string,   I'm going to instead of object, sorry, I'm going  to do a string like this, right, we can call this   as a string. And now we've defined that our user  schema is going to have a first name property,   which is going to be of type string, which means  that we're going to be able to use this schema   and pass any object into it as data. And then it's  going to validate and check that that object has
• 05:00 - 05:30 a first name property, and that we're passing a  string as a first name property, right. So that's   how that works. So for example, we can come here  and we can define our user. So we can do const   user. And we can make this equal to an object  over here. So now remember, I'm doing all of this   outside of the component, because we're just going  over the basics here. Afterwards, I'm going to   integrate all of this with react specifically. And  here we're going to do something we're going to do   first name, and we're going to pass it here that  is like this, which is my actual real first name.
• 05:30 - 06:00 And then if we want to actually check that this  user that this object over here is valid against   the user schema, we have to validate and we have  to pass the schema to Zod and we have to parse it.   And this is how that works. So we can come here  and we can do something like console dot log. And   here we can do user schema. And we can do dot  parse, this is the parse function over here. And   then we can pass here our user object like this,  what this is going to do is this is going to take   our user object, pass it to the user schema, parse  it and Zod is going to automatically validate our
• 06:00 - 06:30 schema against all of these properties here. So  for now, it's only going to check that it has a   first name, and that this is a type string. That's  all it's going to check. And because our user here   has a first name property with a value of values,  which is a string, this should pass and we should   get our actual validation in our console. So let's  check. So here I have the application running,   we can see cause and solutions over here. If I now  open up the console, we can see in our console, we   have an object. And if I look at this object here,  we have first name and then Darius, the reason
• 06:30 - 07:00 we're seeing this object is because our validation  past whatever the validation passes, Zod is   essentially just going to return the data that you  pass into it, and then we're console logging it.   So that's what we're seeing inside of the console.  If however, I came in here and instead of Darius,   I put a one over here, which is a number which no  longer matches string, we should get an error in   our console, which we can see if we come here, we  have let's just refresh, we have an actual error,   uncaught Zod error code, invalid type, expected  string and received number instead, and the path
• 07:00 - 07:30 is first name. So these errors are very verbose,  but they actually tell you exactly what's wrong   with the schema, right? In this case, it told  us it expected a string, but it got a number.   And it expected that in the first name property,  which matches exactly what we've done over here.   So this is how schema validation works in Zod,  you take an object, take any piece of data, and   you validate it using the parse function against  any schema. And Zod takes care of everything. Now,   if you're using parse, this is actually going  to throw an error inside of your application.
• 07:30 - 08:00 As we've seen here, this is an actual error. But  sometimes you don't want to have an error thrown,   you actually want to have and just know if  the parse has been successful or not. And in   that case, you would use a different function,  you would use safe parse. So we'll come here,   we remove this and we do safe parse. And this is  going to do the same exact validation that we had   with Zod. But it's instead not going to throw an  error, it is going to return to us an object that   has a success property or an error property if  we have any errors. So let's come back here to
• 08:00 - 08:30 our application, let's reload. Let's make this a  little bit like this. And you see now we have an   object, we have a success property called false.  And then we have an error property over here,   which is a Zod error. And we have the same exact  error as we had it before. So it hasn't thrown any   error in terms of replication crashing or anything  like that. Instead, it just puts the error in an   object and then put success to false so that we  can handle the error at a later point in our code   without crashing our entire application. So if you  need that, if you want to safely parse something,   use the safe parse function. Now at the same time,  if I come back here, and I also reput this to a
• 08:30 - 09:00 string, so we do that use again, and we save this  and then come here and reload. Now you're going to   see that we have success true. And then instead  of an error over here, we have a data property,   which is our object that has been parsed. And then  we can use this to actually do something to it.   This is great, because now you can pass any sort  of data, any sort of value inside of any schema,   you can validate it, either throw an error and  crash the application or handle the error. Or   you can actually have Zod return to an object with  success true or false, and then handle the cases
• 09:00 - 09:30 success or not based off of that, this is really  cool. It's really flexible. And you can do a lot   with it. Now besides string, there's actually a  lot more properties that we can do. For example,   we can come here and we can do email like  this. And we can do z dot string as well,   we can also do string. But what I'm going to do  here is I'm going to put dot email like this, what   this is going to do is this is a modifier on the  existing string, which will also check not only   that it is a string, but also that it is a valid  email. So this is going to do probably some regex
• 09:30 - 10:00 checks to make sure that the email is actually  valid, right. So if I save this and go back here   to our console, we're going to see that we have  success false. And then the arrow over here,   it's going to tell us that we're missing something  because we did not provide our email inside of our   user. So if I come here and I do email like  this, and now if I do anything, for example,   contact caused in solutions.io, which is my public  email, and we do this, we are going to see that   we have success true or data is actually valid.  However, if I put something like let's runThis
• 10:00 - 10:30 is going to automatically validate this, because  we're going to see that this is not a valid email,   right? So the benefit of this is you can use email  like this, and you don't have to do all of the   validation yourself, you can just let Zot handle  it. We can also do something like profile URL,   right? And we can also do z.string, and then  pass it here a string. And instead of email,   we can do URL like this. And this is going to do  the exact same thing this is going to check that
• 10:30 - 11:00 the string is a valid URL. So for example, if I  come here and I do profile URL, and we're going   to put HTTPS Google.com like this, now you're  going to see that we have success because Oh,   we don't we have false. Why not? Let's see. Oh,  right, because our email is still invalid. Let's   fix our email.io. There we go. Now we have success  true, because we have an actual URL that matches   the URL parameter, right? Again, if I put this and  remove the.com, it is not going to be a valid URL.
• 11:00 - 11:30 I mean, I guess it is, I guess this is considered  technically a valid URL. But let's see if I just   remove this like this. There you go. Now it's  considered a not valid URL. And our success is   false, just like we could expect. So let's put  back to a valid URL. And now we can also do more   things than just strings. For example, we can do  h and here we can put instead of z dot string,   we can do z dot number like this. And now this  is going to check that our age is an actual   number. So if I put your age like this, and I  put your 18, we're going to check that our age,
• 11:30 - 12:00 this is not actually my real age, but that the age  is actually 18. Again, we're going to come here,   we see that success is true. This is validating,  we can also chain different things, just like we   change email over here to the actual strings, we  can do something with the numbers. For example,   we can do min like this. And we can have min  and here we can do one like this. So this is   going to check that the age is actually minimum  one, right. So if I come here, and I put 18,   this is still going to be success true. If  I come back here, and I put zero like this,   this is going to be success false, because the  minimum is no longer working, we can also do
• 12:00 - 12:30 other things. For example, we can do friends like  this. And we can have this bz dot array, right,   this is going to be an array type. And then we  can pass it here an array of z dot string. So   this is going to be an array of strings, right.  So now this friends property over here friends is   only going to be valid if we have friend one,  friend two, and then friend three, like this,   right, we go back here to our console. And then  we have success false, because again, we have to
• 12:30 - 13:00 put our age to 18. Right, so let's put our age to  18. And now we have success true. And again, we   validated that our data actually has a race. And  of course, we can also chain a min or max here. So   for example, we can do max like this, and we can  put max three, this should still validate because   we only have three entries in this array, which is  the maximum success true. But if we came here, and   we did max two like this, we're going to see that  we have success false, right. And the last thing   that I'm going to show you is the actual object  because you can nest objects within each other,
• 13:00 - 13:30 right. So we can do something like settings, z dot  object. And here we can pass another object and   we can be is subscribe. And then we can do z dot  Boolean, which is another property that we can do,   right. So now this expects a setting object with  a is subscribe property. So we can be here and we   can come settings like this. And we can do an  object is subscribe. And then we're gonna put,   well, I don't know what we're gonna put, are  you currently subscribed right now, because if   you're watching this video, you should definitely  subscribe to the channel, it's completely free,
• 13:30 - 14:00 and you're getting a ton of value. And you're  learning really cool things about react. So   hopefully, by now we can put subscribe to  true. And you are now subscribed. And now   if we validate the user schema, again, we're going  to see that we have success false. Let's see why,   because our array still expects three, again, I  keep forgetting about these, but that just goes   to show how Zod works. And it actually works. If  I come here, now we have success true, because   this object actually defines our shape correctly.  Now, the last thing that I'm going to show you in
• 14:00 - 14:30 terms of the schema is optionals, because right  now, every single property that we've defined   over here is actually required. So if I omit any  single property over here, it is going to throw   success false not valid, right, but we can change  that we can make this optional. For example, I can   come here on any property and I can do optional  like this and just make first name optional. And   then if I comment this out, we are not going to  see an error because the first name is optional,   we can also instead of optional, we can do noble,  which is actually going to make this instead of   not being there, it's going to throw an error.  But if we put the first name over here, and then
• 14:30 - 15:00 instead of this, we do know this is going to work  because we've set our first name to be nullable,   right, so we can do this. And you can also do  something called knowledge like this, which is   nullable, but it will also accept undefined like  this right in the cases where you want to check   and you're okay with undefined or null, you can  put knowledge and then that is going to validate   successfully even if it's undefined or null. So  now we covered our schema. And this is pretty much   enough to get you going. And if you want to look  more on the other things that you can do, just
• 15:00 - 15:30 play around with it, get a feel for it, or you're  welcome to check out these all documentation,   they have a lot more than I've shown in this  video, but I didn't want to overwhelm you with   all of these properties. These right here, what  we've shown here are pretty much the standard   and most of the ones that you're going to use when  you're working with this in your application. Now,   if you're working in TypeScript, there's something  really cool that you can do. Because as you can   see here, we have this user schema over here, we  have all of these types over here, which is great.   But we also have this user object over here that  is not typed, right, the type over here is just
• 15:30 - 16:00 inferred from the actual data that we have. But  what we can do is we can actually extract the type   of this user from the user schema to be able to  use across our application. And the way that we   do that is we can come here, if you're working in  TypeScript, of course, we can do type user. And   then we can make this equal to z dot infer. And  that is going to infer the type of user schema   like this, right. And now we have a user over  here, which is an actual TypeScript type that is   automatically inferred from our schema. As you can  see here, we have email profile URL age friends,
• 16:00 - 16:30 everything is properly typed, our settings object  or is subscribed, it's a Boolean, our first name,   which is optional string null or undefined,  right, everything is properly typed, which means   that here in our user, we can actually define  this as a user. And we're not going to have any   problems. If I remove the first name over here,  this is not going to give us any problems. If I   remove the email over here, now we get an actual  error, because the email is a required property   on our user object. And this is really cool. I'm  just going to put all of these back here. This is
• 16:30 - 17:00 really cool, because you can define this object,  the schema object anywhere in your application,   and then you can extract the type from it and  then export this type and use it across your   application. And the benefit of doing this is if  your back end is also written TypeScript, you can   actually share the user schema, you can use the  user schema on the front end and use the types on   the front end to define everything. And then on  the back end, you're also using the same schema   to validate all of the data that is received from  the front end in terms of the API request, right.
• 17:00 - 17:30 So this is really useful, this is versatile. And  it works really well on both the front end and the   back end. So now what we're going to do, because  now we understand how Zot works, I'm going to show   you the most typical ways that you would use this  schema in an actual real world React application.   So the first and probably the most common use case  that you're going to use this in your applications   is whenever you're dealing with forms and user  input data. So for this, what I'm going to do,   I'm going to come here, and actually, we're going  to install React hook form. And we're going to
• 17:30 - 18:00 install the hook from resolvers, because that is  going to be the thing that allows us to connect   Zot with React hook form. React hook form, if you  don't know, is a form library that makes it really   easy to build complex forms in React. It's not the  only form library that you can use with React to   build forms. But it's one that I prefer. And it's  the one that I use. And I teach my course project   react. And it's generally one that I recommend.  So that's the example that I'm going to show you   here. So what we need is we first need this  library over here. And we also need the react   hook from library. So I'm just going to come here  to the editor and actually come back here to VS
• 18:00 - 18:30 code. And we're going to cancel this and I'm  going to do pnpm add react hook form and then   hook from resolvers. And here we're not going to  install Zot because we already have Zot installed   inside of this project, then I'm going to come  back here to the application. And we're just   going to use the user schema, I'm not actually  going to build out an entire UI for the form,   I'm just going to use it, I'm just going to show  you how you would use this for an actual form,   right. So what we can do is we can actually remove  the user over here, we don't actually need this,   we can remove the console lock, we don't actually  need this, what we're going to do is we're just
• 18:30 - 19:00 going to set up our actual form. So we're going  to do is const form equals use form, we're going   to import this from react hook form, we're going  to pass it here our user type, which is going to   be the actual inferred type that we have here.  And then we're just going to call it like this,   at least for now, maybe here, we're just going  to rename this to user form schema, let's pretend   that we're editing the user form. So we're going  to do a form like this. And then user form schema   like this. And the last thing is past user form  schema like this. Now to connect the Zot, we're
• 19:00 - 19:30 going to be able to use exactly this form schema,  pass it to use form and actually validate our form   directly without having to do anything, we don't  have to check for knowledge, we don't have to   check for email react hook form is going to do  everything automatically through using Zot and   this validation schema. So for that, we're going  to have to come here pass an object and we're   going to have to pass resolver and we're going  to do Zot resolver. And we're going to import   this from hook form slash resolvers, the library  that we've installed. And here we're just going
• 19:30 - 20:00 to pass it user form schema like this, right. This  is a great example and a simple example of how you   would use an actual form schema in the context of  a react application, you have a form over here and   pretend that we have some UI that actually manages  the form. If you want a real example of this,   I have a bunch of videos and even have a whole  tutorial video dedicated to react hook forum where   we actually use Zot instead. So I'm not going  to do that again, here, I'm just going to show   you an illustrate the concept that you take the  form, and then you pass it your form.And then you
• 20:00 - 20:30 validate the schema, the actual data in your form  against that schema. Now, also, you don't have to   use React Hook Form. You can use something else.  You can do your own form validations as well. You   can use the parse function. Let's say that, for  example, you had a function handleSubmit. I'm   again, now just kind of mixing examples. But let's  say that you had handleSubmit with some data over   here that was of type user form. You can take the  data over here, and then you can do const success
• 20:30 - 21:00 and you can actually let's just do validation or  result. I think that's more accurate. And then you   can do user form schema dot safe, parse, and then  pass it the data like this, right? And then you   can do if result dot success, then handle success.  Otherwise, you would handle error. Right? This is   pseudocode of what you would actually do. You have  a handleSubmit function that gets called whenever   the form is submitted. And if you're doing this  manually, you just call the user from schema,
• 21:00 - 21:30 pass it the data, safe, parse it, and then do  something if it's successful, and do something   else if it's not successful. Now the benefit  of using React Hook Form is that it does all   of this for you automatically, just by this line  of code, you don't have to do all of this manually   yourself, right? So that's why I recommend using  something like React Hook Form, because you don't   have to validate things yourself. But if you  wanted to validate things yourself, then that's   a perfectly valid way to do it. And it's a simple  way using Zot as your validation library. Now   another example where you might use a form schema  like this from Zot actually validate data. Again,
• 21:30 - 22:00 any place that you would validate your data is a  place that makes sense to use something like Zot.   And that example is going to be here, an actual  API. So let's say that we had a folder over here,   let's call the API like this. And inside of here,  we had API dot yes. And we had some sort of form,   let's say export from async function, get  users. And this function would perhaps take in   some filters. Let's say for example, we have some  filters over here. So we're going to do const, get
• 22:00 - 22:30 users schema like this, that is going to be Z, we  can import this from Zot dot object, and we can do   something like limit z dot number, and then offset  z dot number like this, right? And we're going   to keep these things basic, right, then we're  going to do const, actually type users, filters,   that is going to be z dot infer. And we're  going to pass it here type of get users schema   like this. And now we have the user filters over  here, which we can do filters, users filters like
• 22:30 - 23:00 this. And now we can actually use the filters to  do something with the right, this is a perfectly   valid example, you have a schema over here that  you define, you then extract your type, this   type and gets here to the get users function, and  it's going to get inferred whenever the get users   function is actually used. And then you can take  the filters over here. And you can just again,   you can validate the filters, you can do something  like const result equals get users schema dot safe
• 23:00 - 23:30 parse, and you can pass filters like this. And  then you can do something with result, right,   if success true, you can do something if success  false. The benefit of doing this is that now the   front end gets access to the schema and this  type. So whenever you're designing the front   end to actually put everything together, you know  exactly what you're supposed to call this function   with. And also, you have the actual protection in  the back end, assume that this is running in the   back end, you have the actual protection that this  function is only going to work if it receives a
• 23:30 - 24:00 valid limit and a valid offset property, right,  this is security on the back end. And you would   use that for that, right. So again, great example  of using this in a react application. If you have   endpoints that you're going to call use a Zot  schema validate those endpoints. And then in   the front end, you have the types and you can just  build your UI to make sure that it validates the   schema. And finally, the last thing that I'm  going to show you with Zot in the context of a   react application is actually something that is  really cool and really useful that people don't   unfortunately talk about enough. And I'm going to  give it to you for free as a bonus, because you've
• 24:00 - 24:30 watched this far into the video. And that is  going to be using Zot to validate your environment   variables at runtime in your application.  This is something that is super simple,   but super useful. So you know how in any react  application, you can usually do something like   compute your actual root project and do something  like dot ENV over here. And then in here,   you would have environment variables, for example,  like secret key equals 123, right, something like   this, right. And then let's say that you would  want to use this inside of your application, it   doesn't necessarily have to be a react front end  application, but it could be but it can also be
• 24:30 - 25:00 in an OGS environment in your server in your back  end API, you have an environment and you want to   use that inside of your application, how would you  do that efficiently? And how would you use Zot to   make sure that your environment is correct and in  exactly the correct shape that you expect? Well,   let's say that you needed to use the secret key  inside of this API over here, let's say that you   had to use the secret key to be able to fetch some  data from your API or something else. Usually what   you would do is you would do something like secret  key, for example, let's say fetch, right, we're   going to pass the function, I'm just making some  pseudocode slash API over here. And then we're
• 25:00 - 25:30 going to do headers like this. And we're going to  do authorization bearer. And then we're going to   do here the secret key. And now you would usually  do something like env dot process, actually   process dot env dot secret key like this, and you  would pass the secret key here. Now the problem   with this is that there's nothing guaranteeing  you that the secret key is actually available,   you're just assuming that it is available,  right? And if you then run this function,
• 25:30 - 26:00 and you don't have process dot env dot secret key,  this is going to throw an error, and it's actually   going to land on the user, the user is going  to see an error. And they're going to be like,   why do I have an error, it's going to be hard to  catch, because there's nothing preventing you from   actually not having a secret key over here. So now  if we do it with Zot, we can actually prevent that   and get type safety inside of our environment  variables. Because again, here, there's no type   safety about any of these environment variables,  they're all string or undefined, which means that   they could be strings, or they could also not  be there, we're not guaranteed. So in that case,
• 26:00 - 26:30 what I would do is I would come here inside of  SRC, I would make a new folder over here called   the details, which is one of the let's spell it  correctly, utils like this, which is one of the   most underrated folders generally in react. And  inside of here, I'm going to do in v.ts. And here,   I'm going to use Zot to actually parse the  environment at runtime, and then export it   and then make sure that the environment is exactly  in the shape that I expect. So we can do our usual   const and schema like this. And we can do z  import this from Zot dot object. And here we
• 26:30 - 27:00 can pass it secret key, we can say this is going  to be a string. So z dot string like this. And   now we're going to do export const in V equals  n schema dot parse, and then process dot in V,   like this, right. So what this is going to do  is this is going to export for us an environment   variable that we can use, which is going to  be the result of parsing our process dot in V
• 27:00 - 27:30 against our environment schema, this is going to  make sure that we have a secret key over here that   we can actually use it in a react application.  And then we're going to get access to it here   from this in V variable. If you want to make it  easier, you can sometimes do in V like this to   just make it more obvious, right? I don't like  to do this, I just do in V like this. It's just   simpler for me. And then here in the API, instead  of doing process dot in V secret key, we just do   here in V. And we import this from utils slash in  V. And now the benefit of this is that now we're
• 27:30 - 28:00 guaranteed that the secret key here is going to  be a string. And we also know its type because the   environment has been validated at runtime against  the schema over here. So if we have an environment   where we actually don't have a secret key, or  it's not in the right shape that we expect,   our application is going to crash at runtime, and  we'll know about it. And the user will never have   to see that specific error. This is a great use  case. And this is something that a lot of people   don't talk about. But I pretty much do this  in every single one of my applications. And
• 28:00 - 28:30 we also do this in project react, which again is a  great pattern that I try to teach, which also goes   to show that I really try to teach everything  about good patterns, design patterns and best   practices in my courses and also in my videos. So  if you haven't checked out project react, again,   I highly, highly recommend it. And with this,  honestly, you're good to go, you're set up to be   able to validate your data with Zot in the context  of a react application, you know how to create a   schema, how to define different properties for  the schema of different types, you can work with   objects, you can work with strings, you can work  with numbers, booleans, objects, and all those,
• 28:30 - 29:00 you know how to also convert those to actual  TypeScript types, and then use those types in your   application, which is cool. And you also have seen  some common and popular use cases for using these   in an actual react application. The first example  was a form example, this is what that looks like,   at least the pseudocode of it. The second example  was inside of an API function, again, very common   example, pseudocode as well, right, we're not  actually fetching anything. And then the third   example inside of an environment, which again, is  a very common use case. And something that again,
• 29:00 - 29:30 a lot of people don't talk about. And I hope  that now you would apply this inside of your   own applications. So now you're good to go,  you know, Zot, you know, react, and you can   use them together and become hopefully a better  developer. If you want to play around with this,   you're actually going to be able to find  the codes for this inside of a repository,   it's going to be linked in the description,  take this code, play around with it,   get a feel for Zot, and then start integrated into  your react applications. I really hope that you've   enjoyed this video. And I really hope that you've  learned something. If you've enjoyed this video,   make sure to leave this video a big thumbs up.  You can also click here to subscribe. Or you
• 29:30 - 30:00 can click here to watch a different video of  mine that YouTube seems to think that you're   really going to enjoy. And with that being said,  my name has been Darius Cosden. This is Cosden   Solutions. Thank you so much for watching, and  I will see you in the next video. Ciao, ciao.