Loading...
; + if (error) returnError: {error}
; + + return ( +Loading...
; + if (error) returnError: {error}
; + + return ( +Loading...
; + + return ( + + ); +}; + +export default <%= capitalize(name) %>EditForm; +Purpose: Provides a form for editing existing items. +Path: frontend/src/components/ +b. API Service Templates +frontend/service/new/api.ejs.t +Generates an API service for handling HTTP requests. + +ejs + +--- +to: frontend/src/services/<%= name %>Api.js +--- +import axios from 'axios'; + +const API_URL = '/api/<%= name %>s'; + +export const create<%= capitalize(name) %> = (data) => axios.post(API_URL, data); +export const fetch<%= capitalize(name) %>s = () => axios.get(API_URL); +export const update<%= capitalize(name) %> = (id, data) => axios.put(`${API_URL}/${id}`, data); +export const delete<%= capitalize(name) %> = (id) => axios.delete(`${API_URL}/${id}`); +Purpose: Centralizes API calls for CRUD operations. +Path: frontend/src/services/ +3. Additional Templates +a. Root Reducer Template +frontend/redux/module/new/rootReducer.ejs.t +Generates the root reducer by combining all module reducers. + +ejs + +--- +to: frontend/src/modules/rootReducer.js +--- +import { combineReducers } from 'redux'; +<% modules.forEach(module => { %> +import { <%= capitalize(module) %>Reducer } from './<%= module %>'; +<% }); %> + +const rootReducer = combineReducers({ + <% modules.forEach(module => { %> + <%= module %>: <%= capitalize(module) %>Reducer, + <% }); %> +}); + +export default rootReducer; +Purpose: Combines all module reducers into a single root reducer. +Path: frontend/src/modules/ +b. Store Configuration Template +frontend/redux/module/new/store.ejs.t +Generates the Redux store configuration. + +ejs + +--- +to: frontend/src/modules/store.js +--- +import { createStore, applyMiddleware, compose } from 'redux'; +import thunk from 'redux-thunk'; +import rootReducer from './rootReducer'; + +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; +const store = createStore( + rootReducer, + composeEnhancers(applyMiddleware(thunk)) +); + +export default store; +Purpose: Sets up the Redux store with middleware and DevTools integration. +Path: frontend/src/modules/ +Using the Templates +Hygen templates streamline the process of adding new routes, handlers, models, Redux modules, and React components. Here's how to utilize them effectively: + +1. Generating a New Backend Model +To create a new Mongoose model: + +bash + +$ hygen model new --name product +Parameters: + +--name: Name of the model (e.g., product, user, order). +What Happens: + +Generates a new model file in backend/models/. +2. Generating a New Backend Handler and Route +To create CRUD handlers and routes for a new entity: + +bash + +$ hygen handler new --name product +$ hygen route new --name product --method post +Parameters: + +--name: Name of the entity (e.g., product, user). +--method: HTTP methods as needed (e.g., post, get, put, delete). +What Happens: + +Generates handler methods in backend/app/handlers/. +Defines routes in backend/app/routes/. +Injects handlers and routes into respective configuration files. +3. Generating a New Redux Module +To create a Redux module for state management: + +bash + +$ hygen module new --name product +Parameters: + +--name: Name of the module (e.g., product, user). +What Happens: + +Generates actions.js, reducer.js, and index.js in frontend/src/modules/product/. +Injects the new reducer into the Redux store configuration. +4. Generating React Components +To create React components for listing and managing items: + +bash + +$ hygen component new --name productList +$ hygen component new --name productForm +$ hygen component new --name productEditForm +Parameters: + +--name: Name of the component (e.g., productList, productForm). +What Happens: + +Generates ProductList.js, ProductForm.js, and ProductEditForm.js in frontend/src/components/. +These components are ready to be integrated into the application. +5. Generating API Services +To create an API service for handling HTTP requests: + +bash + +$ hygen service new --name product +Parameters: + +--name: Name of the service (e.g., product, user). +What Happens: + +Generates productApi.js in frontend/src/services/. +Centralizes API calls for the specified entity. +Advantages of Using Comprehensive Hygen Templates +End-to-End Automation: Covers both backend and frontend components, ensuring seamless integration. +Consistency: Maintains a uniform structure across all parts of the application. +Scalability: Simplifies the addition of new features and entities as the application grows. +Efficiency: Reduces the time spent on repetitive tasks, allowing developers to focus on core functionalities. +Maintainability: Facilitates easier code management by enforcing standardized patterns. +Best Practices +Customize Templates: Adapt Hygen templates to align with your project's specific requirements and coding standards. +Version Control: Keep templates under version control to track changes and collaborate effectively with team members. +Regular Updates: Continuously refine and update templates to incorporate new practices and optimizations. +Comprehensive Documentation: Document how to use and modify templates to ensure all team members can utilize them effectively. +Modular Design: Structure templates to promote modularity, making it easier to manage and extend functionalities. +References +[[Hygen Documentation]] +[[Express.js Documentation]] +[[React Documentation]] +[[Redux Documentation]] +[[Zettelkasten Method]] +[[Ivy Lee Method]] +[[Progressive Summarization]] + + + + +You said: +hey everybody welcome back to a new +video on this channel and today we have +a look into BFF best friends forever yes +of course but let's see what BFF means +in the context of app development and +how to use that pattern right after the +intro let's +[Music] +go in last week's video we talked a lot +about using KNX with different backends +Last weeks video +which more or less meant using different +backends like hono Express and fastify +in the nodejs or like JavaScript +environment and then use h3's +compatibility layer to use them inside +knjs and lots of people said like hey +yeah that's great but I don't have like +a JavaScript back end I don't have +something I can integrate into KN so +External APIs make sense +instead I use something like d Jango or +laravel or spring boot or maybe some +bunch of third party apis as well which +is totally valid I mean you don't have +to write everything in JavaScript anyway +right if you have something that needs +hyper performance and machine learning +then maybe another language might be a +really good idea or your backend team +your dedicated backend team is just more +proficient in that so no problem with +that but let's see what the BFF part +means and how we can still improve the +usage of external like backend services +or third party apis in nox and with +Nitro so once again BFF yes best friends +What does BFF mean? +forever like KNX and you are of course +obviously but in this video it's more +about the backend for frontend +architectural pattern and now you might +wonder wait wait wait wait Alex back end +for front end like we we have a backend +and we have a front end so why do we +need anything in between let's have a +look commonly you have exactly that +setup a front end and a general back end +that serves all the data for the front +end but what if for example multiple +applications quarrying that back end and +of course your back end team doesn't +want to build routes for every single of +these applications to cater their needs +so let's say we have a front end and +that front end only needs a user's ID +username birth data and email but of +course the back end gives all the things +like tons of other unnecessary data +which kind of makes sense because in +other calls you might need them so now +you could start and say okay yeah we +have routes we have filters we have +things to improve that on the one hand +this increases the strain on your +backend team plus it's always a question +whether the back end should really focus +on what data needs to be served then +applying a general way of fetching data +and their needs and this is where the +back and for front and comes in right so +we really need something here in the +middle especially if we don't only have +a backend but maybe also data from other +services like headless CMS thirdparty +apis and maybe we can't even control the +back end at all and say hey this is the +data that we get that's it we have to do +the manipulation and transformation on +our own so let's see how it works with a +back end for front end and then how to +implement it with no Nitro and if we +move from this schematic all the way +over to the back and for front and one +you'll see okay there's not that much +happening except that the front end is +now calling the BFF the BFF is calling +the back end the back end is returning +data to BFF and the back end for front +end is returning the data to the front +end and in here the data transformation +will happen so we strip all the +unnecessary content +Benefits of a BFF +now you might say yeah come on for these +few Fields sure I get you but I've seen +projects where you have really like +kilobytes probably sometimes even +megabytes of data uh that you don't +really want to send at all because for +some requests you might just need a list +of names for example to preview some +articles or to yeah have a simple list +overview page and this is where the BFF +is really shining so if your general +backend doesn't allow that to do or +maybe you want to do some things on top +of it like caching for example right or +say oh yeah I have to enrich the data +with data from other apis then we really +need that kind of back end for front end +because you also don't necessarily want +to integrate all the third-party apis in +your general backend because if you want +to switch out a service well then you +have to do it for all the applications +and it will also increase the strain on +your back end while if you say oh yeah +in this case we want to use another +let's say image provider then why not +switching that out in the BFF that is +bound to your application and not the +back end so yeah this is definitely +something we can do and the best part is +we can just imagine the backend our case +as not under our control that makes +things a bit easier just saying like hey +dear backend Engineers can we Implement +that and then we have some big back and +forth um sometimes it's also totally +useful don't get me wrong but if we have +all the data in a way or another then we +can also fetch them so let's see what we +can do in knon Nitro to more or less +make the whole thing happen I will also +refer to some of the videos for example +about caching in Nitro and so on so on +so if you haven't seen these definitely +take a look in some more in-depth +content but let's get started all right +Setup of our Demo Application +folks our demo application is as minimal +as usual as you know already so we have +the compatibility date set I also made a +video if you don't know about that but +don't worry it won't do much for now we +have that little background color so it +will be dark in the background and white +text and then we have our future +compatibility version 4 to opt into the +KNX 4 break making changes whenever they +will be released as next 4 you're +already prepared also made a video about +that link in the description and then we +have an app app. view so we use the new +app folder the structure from Next 4 and +then in our app. view we just say we +have a user we fetch it from the very +simple Json placeholder typic cod.com +API and then we show the content and if +we go to the browser then this will look +like this okay nothing crazy so far +right we fetched some data and we're +good but what if we want to do more like +we said in the example maybe we just +want to strip everything except these +fields ID name username email so we want +to get rid of the rest because just +Remove data in the front end only? +imagine having a big user object not +only with these data but maybe with like +attach comments and this and that and +this will all be fetched by the back end +of course that's not really what we want +so maybe let's remove them and of course +now we could start saying yeah but you +can just do that in the front end you +can just say take the user object delete +the fields or like the structur it or +whatever and you're good but the problem +there is that then the data will still +be transmitted through wire which means +slower page speed right like we need to +S like get lots of data that we don't +even need and especially the bigger the +data the harder the thing is I've +already shown how to solve the problem +with use Fetch and use Asing data with +the transform function which we can just +showcase here real quick and then see +why this is the solution only half way +through and we might still need a BFF so +as mentioned we can use the transform +function here and say okay we have some +input we don't know what it is and then +we just say like okay you know what id +is input. ID can just type it as any +here for now um and then we had the uh +name is input name the same thing with +uh the username is also input the +username and last but not least we +wanted the email which is input email +and if we now eventually switch back to +the browser we'll see okay this is gone +that's great perfect the issue is like +sure if we take a look at the page +Source it's also only in there right +that works fine but if we now say okay +we would navigate on the client side +from A to B like the first request of +course happens on the server side so not +too much data is sent but if we then do +a client side request then we have the +data again because the original API will +be queried and no matter how you +transform your data it's still too much +because you can't just say hey API give +me less we're it's not under our control +in this example so instead we want to +Moving the transformation to the BFF +move the whole transformation over to +our back end for front end which we'll +build right now with Nitro and H3 in our +nox application also this of course can +be a standalone service you don't have +to bake it into KN and also if you use +something else you use Plain View feel +free to just spin up an Nitro server and +do the same but with NX it's a little +bit easier due to well end to end type +safety for example so let's get started +first of course we want to create a +server folder and in here we have a new +API and let's say we called users +similar to our uh example here and then +we have an ID and it's a typescript file +of course so then we create an event +handler uh and more or less we can copy +the code from here because we still have +to f fetch the original API right so we +what we want to do is we always want to +fetch that API but of course we can't +use transform here that's only for use +fetch uh and use Asing data so we have +const result is await the whole call and +now we can just say like okay we return +more or less uh what we did before here +and instead of input well we just say um +result and now of course also yes this +is unknown by default so we can just +type it as end +or you know what let's just do a record +string any and that will solve most of +the issues around that that's also fine +um and now we know okay things are in +there we can have way nicer types but +that's um that's for later of course so +one more thing we want to do is we want +to get the ID so it's say okay we want +to use get router pram here we say pass +in the event and get the ID if there is +no ID or if it's zero then we just throw +a new error created by create error just +saying uh all right no ID supplied uh +provided might be easier and then we of +course have the status code which is um +400 that's fine okay now we want to +insert that ID here and let's see if we +now call the whole thing if we now call +oops if we now call the whole um API +what it will return for that we move +back in the browser and we just use API +users one and here we see that's exactly +what we need right that's exactly the +data that was also shown here in our +page now the only thing it's left to do +is we actually have to call that API in +our very own application so to do this +we go into our app here and then we say +Okay instead of the whole code here we +can just say use fetch API users ID and +the best part is just say one here for +example this already gives us the +wonderful types safety even though we +don't have many types here um it will +eventually still help us when we have +them in place so that seems pretty good +let's see if it works let's go back to +the browser and go to our application +refresh it and it still works as it +should lovely okay so far so good now +Unlocked possibilities +this doesn't seem like a huge +Improvement but the best part is now we +can do a lot of things with that data so +first of all we can cach it which we'll +do next and then why not show all the +users that have been accessed like the +last I don't know two three four five +users uh throughout the whole page so if +someone clicks on a user well then uh +that user will be saved in some kind of +storage and all the other people on the +index page they will see oh yeah these +are the the users that were recently +shown this is kind of an inspirational +feature from a project I've worked on +already uh which basically looks like uh +looks like this so here we also have +like recently searched people and if I +search for more people they will just be +added here and I think that's pretty +helpful the best part is also here I +used the back end for front end mainly +because the data was not really under +our control um so yeah let's let's go +ahead with the caching and then with the +recent users and um last but not least +we can also show a few more tricks here +and there so let's get started the +Using BFF for Caching +caching part is quite interesting uh +I've also made a video about that +caching in Nitro and once again you +could think oh yeah we just use theine +cache demand Handler here but I would +suggest not to mainly because we also +want to implement the recent users +functionality soon so we rather don't +want to catch the whole API in point +because we still want to register +whether or not a user was requested +instead we could just say okay let's +create a function that is caching the +whole API call and the transformation so +basically this part here should be +cached and we can do that of course in +the same file but let's just say we have +server UTS users. TS and then in here we +could say export const uh get user then +this is uh a defined cached a defined +cached function and eventually we have +the ID here which can be a +string and eventually we want to do all +the things in here so let's just quickly +get this whole code over here paste it +in and this is already looking pretty +okay if we need an async to make sure +the await works we have this part in +place great one more thing to suggest +it's always nice to also provide the H3 +event especially if you deploy at some +point at the edge because um let's +quickly import that here H3 went from H3 +because if you for example use club for +workers I think that's even a better +example then you really want to make +sure that these are waiting for all the +calls that might happen and don't have +any dangling promises so uh with theine +cach function you can make sure that's +the case and even we don't need the +event here at all we can just provide it +and will still be considered and then +event at wait until will be called but +that's just as a tiny hit so we have to +get user function now and instead of +calling what we had here before we can +just use get user instead of the code +that we had back here we can just write +get user and then pass in the ID that we +have here we await it and say const user +is get user +wonderful we also need the event of +course that's what we passed in before +and from here we can even say okay later +on to do um make sure the user is added +as recent and then we're fine and of +course we want to return the user still +otherwise things might break okay so +last but not least we want to set up our +cached function because we have it here +but now we can say let's disable S SWR +and have a Max a age of I don't know 10 +or just say like straight away um yeah +let's let's do max age of it doesn't +matter much because the data is stale +anyway like it's it's not changing so we +can do that can even leave SWR on for +that example um and if you don't know +what all of these is definitely check +out the cashing uh in in Nitro video uh +where explained all these in Deb so if +we just open the da tools and refresh +the page then we'll see wow 8 +milliseconds response time that's pretty +decent that's rather clear that there is +a cach behind because in 8 milliseconds +you can't do any API call so we simply +decided to cach the data from our back +end without them being involved at all +it's all cach and also not for only for +the application if you are in another +application carying the same back end +well you can Define your own cach times +or even if you have a different route +and so on so on so you're fully +autonomous in your decision what to cash +Do more with the data +and for how long now last but least +let's implement the recent users thing +and then we're good to go with a very +simple example of back for front end and +for the recent users we still start once +again in our users. Ts for the UIL and +we have an export const here saying or +maybe let's just make a function +straight away get recent users so +somehow we want to get them right it is +probably async so we need this for sure +and then we also have an export async +function uh +that uh adds uh recent +user and then we need the user data here +so we say user user user we don't have a +type for that yet maybe time to finally +type things so say type user is ID +string name String username string and +email string what a surprise here +because we don't have any types here we +can just say as user and then we're fine +and in here we want to return a promise +with the +users and eventually here we can decide +uh to either ignore that and just say +okay this is void right this is also +fine or we say you know what um we want +to get the new users as well after +adding them so we can even say here okay +promise user that's really up to the +implementation detail but of course +nothing is in here so far so let's +improve that okay so first of all we +want to get all the users so let's say +const users or let's say const current +users equals um get users of +course get maybe get recent users is a +bit better +um we want to await the whole thing as +it async and then we have the users in +theory we also want to set uh a user +let's say recent user limit and we can +set it to three so now what we can do is +we want to actually add the user to the +array and eventually if the whole array +is too long well then we just decide to +uh remove the the last one so what we +can do is we can say current users do +push um you can also unshift it it +doesn't matter if it's the the front or +the end it's yeah it doesn't matter much +we can let's just do unshift for here +that's fine we add the user in here now +we say if current users length if it's +greater than the recent user limit well +then of course we want to make sure to +say current users. pop remove the last +one that was added to the list and we're +good and now we have to save the users +again so this this is will be a little +to do for us and same idea we can just +then say return current users uh and +then we fulfilled the contract we set up +with the types so how do we save the +users and how do we get the things well +this we'll figure out now first we need +a key for uh wherever this is stored so +we just say resend users that's fine and +now we use nitro's uh integration with +un storage so we use un storage under +the hood and the use storage function in +night also made a video about that link +in the description as usual so we'll +briefly go through that more details are +in the mentioned video and the first +thing we want to do is of course we want +to say const users equals use +storage then we can Define name here if +we want to um but we can just leave the +default for now get items or in this +case just get item uh we use the key we +just want this one item which is an +array saved in there uh and in here we +want to aade it as well and then just +say return users so now we also want to +make sure it is of the right type so we +don't want to type it key but we want to +type it +user and then we're good to go the only +thing is it could be null that's true so +worst worst case we just do this and +we're fine so in case this can't be +retrieved for whatever reason we just +make sure it will be an empty array and +now we can get the whole thing perfect +so last but not least we want to save +the users so to save the users we just +say a wait we use also use storage once +again and we want to say set item in the +same scenario with the same key and the +values will be current users so also +here we don't even need to type it +because of course it will be inferred by +the current users that I provided here +so then we save the users let's even +keep the comment I think it's pretty +nice and then we're good now the only +thing is we need to implement it somehow +right we need to call these things +somewhere so what we can now do is in +our idts here we know what kind of user +will be fetched so there we what we have +to do we can just say okay you know what +add user or add recent +user and then we just call uh this with +user we await it and we're good to go so +this will make sure that all users that +are fetched will be saved as recent +users users until uh there are three in +there then the the first one will be +removed and last but not least we +actually want to make sure this is also +possible to show in our application so +we need an API in point to show it and +we need to be able to fetch different +users so that's cool let's start with +Additional API endpoint +the API in point so instead of API uh +users idts we can just say uh API users +info resent for example and in here +that's also an event handler and we just +return +uh get uh recent users and that's all we +need to do luckily because we nicely +extracted it already so what we can do +as a test already is we can go back to +the browser in here we can refresh that +page and now we can say users info +recent and see if it's in there or not +and the answer is it is in there so if +we refresh this page a couple times and +then go back we see on resent user one +two and three all the same okay if we +now would say let's just take users two +and users five in here and now we go +back to info recent well then they're in +here as well perfect so our assignment +is kind of done now we just have to do +Front end logic +the front end part to make sure it's +changeable and then we're good to go so +let's get going to implement it I would +just say we do very very simple +variation of the whole thing we just say +we have a constant number here it's a +ref right we just start with a zero here +um then we have this wonderful use fetch +function where we say okay this will be +uh an A G function then could also be +computed that's also fine and in here we +want to use +number value uh we can move into a +template string to make it look a bit +nicer that's never hurts and now we want +to change that number based on well uh +whenever something changes so we could +just say let's have some buttons here uh +button V4 for n in five uh and then say +fetch user +n and add click we just say number +equals n and now you might wonder if +this actually works because it it looks +like black magic a little bit but yes it +does and also this was covered in our +use Asing data versus use fetch video so +let's have a look in the browser and see +if this is doing what it should and I +admit the buttons are not nice I'm not a +UI designer right and not not the point +of the video so if you click it it will +just magically work because use fetch is +watching The Ref and we're good and last +but not least what we also want to do is +refetch the data now whenever we change +something to see the recent users so +back to the code how do we do that well +we can just say we have another const uh +data recent users here and we say await +use fetch uh and then we just +say slash +API uses INF for recent and in here we +could uh just trigger the +watch and we watch user so in every user +changes recent users will also be +retched and now what we could do we +could uh do a UL in Li V4 maybe in h2v +before resend +users user in users uh users and recent +users and then we +just say user.name +here and maybe user. ID and then we're +good so let's see if this works and try +it out in the browser and here we are +clicking around and seeing things will +change and two is in 4 three one is out +five five okay multiple clicking on five +doesn't work because it doesn't refresh +the data that's also fine uh we could +even have a trigger if we want to but +that's okay because data is already +there why should we and this could also +be radio buttons instead of just buttons +of course semantic HTML would be better +Summary +but I think for the demo that's +sufficient and here we are we +implemented a little back and for front +and with some own functionality without +bothering any back and Def um it's fast +due to the caching it's all super close +we have the type safety and we're good +to go I think this is a very nice +capability of what KNX together with H3 +un storage Nitro and all the tools +around can do within yeah just a couple +minutes any questions let me know in the +comments please uh always always I +always check them out and answer I'm +back from vacation now so the videos we +seen were record a little bit ahead um +maybe seen the 10 I'm just kidding +anyway uh let me know if there's any +questions and uh next week next Friday +next video you got it talk to you soon +folks and happy hacking +[Music] +oh +[Music] + + +Get Started +Guide +API +Examples +Community +Introduction +Installation +Configuration +Views +Assets +Styling +Routing +SEO and Meta +Transitions +Data fetching +State Management +Error Handling +Server +Layers +Prerendering +Deployment +Testing + +Getting Started +Introduction +Installation +Theming +Structure +Content + +Components +Aside +AsideLinks +AuthForm +BlogList +BlogPost +ColorModeAvatar +ColorModeButton +ColorModeImage +ColorModeSelect +ColorModeToggle +ContentSearch +ContentSearchButton +ContentSurround +ContentToc +DashboardCard +DashboardLayout +DashboardModal +DashboardNavbar +DashboardNavbarToggle +DashboardPage +DashboardPanel +DashboardPanelContent +DashboardPanelHandle +DashboardSearch +DashboardSearchButton +DashboardSection +DashboardSidebar +DashboardSidebarLinks +DashboardSlideover +DashboardToolbar +Footer +FooterColumns +FooterLinks +Header +HeaderLinks +HeaderPopoverLinks +LandingCard +LandingCTA +LandingFAQ +LandingGrid +LandingHero +LandingLogos +LandingSection +LandingTestimonial +Main +NavigationAccordion +NavigationLinks +NavigationTree +Page +PageBody +PageCard +PageColumns +PageError +PageGrid +PageHeader +PageHero +PageLinks +PricingCard +PricingGrid +PricingToggle + +Prose +Callout +Card +CardGroup +CodeBlock +CodeGroup +Collapsible +Field +FieldGroup +Shortcut +Tabs + +Getting Started +Introduction +Installation +Theming +Shortcuts + +Components +Accordion +Alert +Avatar +Badge +Breadcrumb +Button +Card +Carousel +Checkbox +Chip +CommandPalette +Container +ContextMenu +DatePicker +Divider +Dropdown +Form +FormGroup +HorizontalNavigation +Icon +Input +InputMenu +Kbd +Link +Meter +Modal +Notification +Pagination +Popover +Progress +RadioGroup +Range +Select +SelectMenu +Skeleton +Slideover +Table +Tabs +Textarea +Toggle +Tooltip +VerticalNavigation + + +Form +GitHub +Collect and validate form data. +Usage +Use the Form component to validate form data using schema libraries such as Yup, Zod, Joi, Valibot, or your own validation logic. + +It works with the FormGroup component to display error messages around form elements automatically. + +The form component requires two props: + +state - a reactive object holding the form's state. +schema - a schema object from a validation library like Yup, Zod, Joi or Valibot. +Note that no validation library is included by default, so ensure you install the one you need. + +Yup + +Zod + +Joi + +Valibot +Email +Password +Submit + + + + +