Building a SaaS from scratch Episode 1 - Setting Up Auth, Database & More...

for hey is anybody there if you could hear me type back in the chat this is my first time going live so I'm trying to test everything out I see thanks brother Hy boy hello anybody else there says five live viewers but I'm not 100% so if you're in the chat just type back um other than that pretty much what this live stream here is I'm just going to oh you hear me nice awesome so if anybody has any questions I'll answer those to start but other than that we're going to create an AI SAS chatbot so it's gonna be a widget that is on people's websites all they're going to do is if you're own a business or you have a website you're going to be able to pretty much sign up for our SAS you could create a SAS chatbot pretty much for your website simply by just filling out a few things like what forms you want the chatbot to be trained on what you want the chatot name to be your icon that you want the chatbot to see and so on and so forth um there's a lot of companies that do this already but I kind of want to show you guys an example example of what I have so this is my website let me move my screen real quick if you can see right there at the bottom right is a widget so this is what we're going to create for other people's sites so what we're going to need to do is we're going to need to actually create a script tag so that people can put inside of their code so a lot of people are going to be using Wordpress Wix um just the basic website Builders so we need to make sure we apply to all the audience so we definitely need to just give them a script tag very simple to use they could click and then this will be AI chap off for the website um before we start going and creating it I do want to go on I guess quote unquote like some competitors websites so to do that let's I think one of the sites is called it's not webflow man what is one of the sites if you guys know any of these sites in the chat that I'm talking about just list them and we could go to them real quick just so we can see an example of pricing other features they have so we could write and outline oh I'm getting these somebody said we hear you I'm getting them really late because I asked that question probably 5 minutes ago so I'm assuming you answered that about 5 minutes ago um one sec I think my chat is running a little behind let me see maybe not okay um let me go get one of those sites real quick so we can see an example of what we're going to create and this is day one so for day one mainly what we're going to do is we are going to work on the authenication we're going to use OJs version 5 that's in beta but honestly I don't care we're still going to do the beta one I think that's the way they're going so we might as well learn that syntax we're also going to hook up a database and we're going to use prism I know a lot of you guys make fun of me for mispronouncing the word prism but uh this is one of those sites if you could link one of those sites that'd be good for the live chat but we're going to be using Mong DB and prism and let me see I know I have it was [Music] called oh voice flow duh so voice flow is a very very popular site that a lot of people use it's a AI chatbot platform that meets your ambition I already have an account so all it does is pretty much gives you a widget like this at the bottom right so right here like I know my site and it allows you to very easily customize a chapot inside of their software so we're going to create something similar to this and obviously it's going to take us days to make but that's fine we're going to paste ourselves and when we actually code I actually like learning and actually knowing fully in depth what I'm doing so we're going to do that as well so we're not just going to code stuff and not know what's going on okay so yeah just this is their site this is how it looks this is obviously the dashboard with the sidebar you got some other stuff here you could easily create a AI assistant I mean there's a lot that goes to this and this is a probably a multi not probably it is a multi-million dollar company and it'll be nice obviously if we get a of the pie if you do create a sass like this but I'm just going to exit out this and let's actually start coding uh sir please create one video for the mer stack Google authentication and save Google authentication data in mongodb um heny boy I could do that let me write that down in my notes real quick because I do keep a list of um different video ideas that we could do I use notion I don't know if does anybody else use notion in the chat if you don't use notion I highly highly recommend using notion notion is amazing it's very easy to like keep track of everything and you could actually download a lot of templates um so what I'm going to do do here is for ideas or YouTube video projects I have a bunch of list here and what I could do is I could just add yours to the ideas list right now and then obviously I'll move it to the YouTube video projects but you said you want to do M authentic M Google authentication okay M Google authentication and while I'm doing this does anybody else have a recommendation for a video that you guys want to see in the future no is easy to use I like it click up is also cool I've never actually heard of clickup let me look that up is it the same thing clickup like same kind of thing is ocean why don't I have to replace them on all get everybody I'm just going to see how the interface looks and then obviously we'll move on and actually code some stuff which one do you prefer do you prefer an otion or click up okay that's the first time I've heard of that might have to change all my passwords 2024 coding road map maybe yeah do you mean like to get a job 2024 coding road map or just like the I'm assuming that's what you mean that is a very popular video though with other YouTubers 2024 coding road map let me just verify this clickup account and then I'll play around with it later I'll stream just got another message okay yeah I'll do that um do I have to answer these Now personal just me if I could give you a little code um who is it K is it Kad Kad that's how you said I'm assuming get a little you know percentage off that' be pretty cool if you send me a link to sign up if it was a Premium plan um I'm done finish okay okay so let's actually get started with the code I'm just going to exit out of this and is there a way to see how many people are in my chat right now give me one second and then we'll start with the code so let me exit move all of these up and let me see if I can see how many people are actually in here oh you use the free version I'm assuming they have a pro version I haven't even looked okay all right so let me start actually coding what we're going to do and feel free to always ask questions in the chat I have it up here on my other screen I do have multiple screens so I can see it right when you guys do actually type it so what I do is I usually just open up my terminal and by the way I am self-taught I have a degree in finance but I actually don't have a degree in computer science I'm self-taught through YouTube videos just trial and error coding stuff like that um will use turbo repo um turbo repel I don't know what that is so no I'm not going to use turbo repo and what's your computer specs I don't know but let me check and I could show it on screen let me pull it up just in case and by the way where you guys from just curious if you name I'm assuming it's worldwide because I am live at 12:30 a.m. I'm in Tampa Florida so just drop your country wherever you're from it's kind of cool seeing where people are from how long have you been coding uh on and off for about a year and a half now like I said I was doing uh just Finance stuff helping my brother with like a junk removal company I'm also the self-taught route I feel like most people in here are probably self-taught um I could be wrong but Texas for me nice yeah Texas and and Florida are probably I I feel like definitely by far the best states out there at least top five for sure um it's 141 here in South GAA South America nice 1:41 a.m. oh yeah you're not that far um off for my time that's cool though South America let me see one sec guys um I'm just trying to get the computer specs here and I'm trying to move a bunch of stuff on my screen I have so many tabs open right now anybody else in the chat where you from so we got South America Texas um Florida protect okay I don't want to keep wasting time let me just move this over and let's actually start to get to the code because I don't want to just um delay this process so what I do is I just open up the terminal real quick and we're going to create this using nextjs I think next is obviously right now one of the better ways to go I was doing the M Stack but I kind of stayed away from it lately and just been using NEX India nice yeah there I I feel like a lot of my people are definitely Indians from India that are my viewers as well so obviously the first step you do is if you're following along just kind of do what I do and if not you can just watch ask questions so we're gonna CD into whatever folder you want you got to spell right and then what we're just going to do is we're going to run npx create-- apppp and then at latest this is just going to pretty much create a borderer plate nextjs code for the latest version of next so what is your project name um we can name this right now for AI SAS um chatbot we're going to use typescript yes es lint yes Tailwind CSS yes the source directory no the app rter yes the import Alias no and then it'll install all the dependencies and then do you guys have an opinion on next do you guys like it hate it don't care okay just give this a little more about 15 more seconds and the first thing I kind of want to do with the project is I want to set up the authentication haven't tried it if you haven't tried it what do you use then M um you mostly use react with v yeah V V's good I'm pretty sure I'm saying right V I've used it a few times um pretty much the same thing honestly not much difference I mean this is a full stack framework but other than that we're going to code uh CD into the project name and then just do code Dot and and obviously it would open up your VSS code we could close the terminal I'm going to move over the VSS code and then I'm going to make sure you guys could actually see the code so I'm just going to zoom in real quick and I'm going to open up the code and before I continue guys just comment you pretty much M comment if you guys could see the code clearly so if you could see it clearly tell me if you can't let me know before I actually continue going on okay I'm assume you guys could kind of see I don't want to keep waiting but um so what we have I started learning it when the app router was introduced I never touched Pages router so it's been easy for me yeah clear it clears for me awesome okay so we have app directory um just quick overview app directory we had the page. TSX this is your homepage it does say a home function it doesn't have to be named home but it is your homepage we have the root layout which is whatever you put in here it's going to affect all your code essentially that's what it does and you could store your metadata metadata as well we have a global CSS file which we could remove lines 5 through 33 for now now keep the Tailwind because we're going to use Tailwind Tailwind is easy to use we have a fa favicon um this is just for your website browser tabs we'll change this later it's not a big deal it's just for metadata we have a public folder to keep all of our images um node modules obviously package Json um tail one config file TS config file all that good stuff but um the first thing I want to do is is like I said I want to be able to set up the authentication so we're going to have this on one side and we will have we will have the next off um docs on this side okay so like I said we're going to use version five and what we're going to do is the first thing you should do is just go to this uh link right here I'll put it in the chat that's the page I'm on right now it's upgraded version 5 let's install the package that's the first thing you should do open up the terminal copy and paste it install the package and now we could use all of the features we need in order to use the version five of nexo have I ever used clerk yes I've used clerk uh clerk seems easier to set up I feel like um I feel like OJs gives you more customization like very very free customization and um i' just been using it more so I feel more comfortable with it but cler clerk is a very good option and it's probably more popular than AU JS now but I feel like all JS you could do a lot of stuff with it like we could send a verification email we could easily we could do a bunch of stuff with it so we're just going to stick with this but clerk if you want to use that you could use that as well okay so the next thing we want to do is I want to scroll down here and we're going to set up the configuration of aujs the first thing we are going to do is create two separate files and the reason why is because we're using prism and prism isn't Edge compatible so if you actually read this paragraph here the reason if it's not Edge compatible if your orm is Edge compatible you have to set up two technically three configuration files and the first one we are going to set up is going to be the au. config dots file and that is going to be in the root layer of our whole application so we're going to click new file O.C [Music] config.yml as well so you could add a bunch of providers you could go through their providers list um right here and you can see what they offer but we're going to use those two so the first thing we want to do is we want to import a few packages so we have an import of NEX o config from next- O next package is the credentials provider so we could just name it credentials and this is from Nex o providers credentials and if you guys are curious my code is kind of like trying to autocomplete that's uh GitHub co-pilot if you guys don't have it I do recommend it it is uh premium monthly thing but I think it's definitely worth it um another import we're going to do is the Google provider uh you can name these whatever you want I'm just going to name this Google actually and this is from Nex o providers gooogle and then other than that I guess for now we are good to go and we can set up stuff what we need so we're going to do an export default and then this is going to be an object and what we're going to do is it's going to have to satisfy the next all config just like this and obviously we're getting a error because we have nothing in the object but we're going to add that stuff now what it accepts is the providers into an array like this and then we just have to Define what we're going to do so first one we could do is Google and what iss inside of it is a client ID and usually you OB I mean don't you usually you always keep this inside of EnV file NV file these are going to be your keys you don't want anybody to know what they are so make sure you create A.V file we will in a second and you're going to keep all of these keys inside of that file and I'll show you guys where to get the client ID and the client secret as well and then we're also going to set up the credentials provider and this credentials provider has an authorize function that accepts the credentials and it's just object just like that and so we could actually we're actually going to write code inside of this function and what this function does it pretty much allows us to do checks when a user tries to log in so for example we could check to see if the passwords match we can also make sure the fields are validated um just a bunch of stuff like that for now I might have to actually just comment this out because we're gonna have to come back to this later which is fine because we actually don't have everything we can for this file so we're going to keep this as an empty object for now so that is the al. config file and as you can see it's right here you create an al. config file with your config and then you export it so there's the code there you could copied and past it and they're doing the GitHub provider so next we want to create .ts file and we're going to add the adapter there together with the JWT session strategy so let's open up we're going to open up our side panel again and on the root layer of our whole project we are going to add a O.S file and what we are going to do with this off. TS file is you could either copy this and then obviously we're going to change a few things but for now let's type what we can that we have because we don't have prism set up so we can add prism and then we're also going to invoke prison in its own file in a global State because if you keep doing this every time you somebody tries to log in you're going to keep invoking prism instead of caching it through a global state so this way is good if you just want to run it quick but since we're actually creating an actual application the code's not going to look exactly like that so next thing we want to do we're going to import next AU from next o now we're going to import the Au config which is the file we just created and that's going to come just from the path of Al config.sys next we have to import the prism adapter we also have to import um where our database is and we don't have any of that as well so we're going to skip that for now but we're going to come to it real soon and we're going to do an export cons this is going to be an object and we have handlers and the handlers is going to be the we're going to do a get and post and the reason why we're doing a get and post request is because that is technically the only um HTTP request that we need with aujs so that's why it's only get impul the other thing we're going to have is we're going to have an Al variable and that is going to allow us to pretty much check the user that's logged in and use this variable instead of the use session hook so you can start using the Au instead we're going to have a sign in a sign out um that's pretty self-explanatory we're going to have an update function and this is going to equal next off and then it's going to be an object and what is going to be inside of this object is we're actually doing the spread syntax of everything in the off config that we did import at the top I SP Handler is wrong so that's why it's going to be an error and I'm going to remove update for now and then get it use it later another thing we have to Define please use orm that we can run on the edge except um prism oh uh do you guys know one that doesn't run on the edge or one that does run on the edge if you do know RM that runs on the edge let me know because if it does then you don't have to do these separate files you can actually do two files instead of one which is not a big deal like if it doesn't run on the edge it doesn't but I think prism in the future is going to start running on the edge I saw an article about it um but if you do type in in the chat and I'll look but I'm going to keep continuing the code um another thing we're going to do is we're going to do session and we have to Define the session and the strategy we're going to use is JWT so Json web token and let me see what else we can do for now uh drizzle orm but never used it I've used drizzle one time when I was following a project so um I don't know if I'm going to use it in this project just because I I'm not too familiar with it but I guess if most of the chat wants to use it we can look at it so if you guys do want to use drizzle just put like me or I and if you don't then I'm just going to keep continuing I honestly don't even know how many people are in here right now so we'll see how many votes we get um we can use database strategy right with prism um you can in version 4 but in version five if you are using um this pretty much way of configuration that we're using right here you can't use the database you only could use the JWT session but like I said in version four and version three I think version four is the one that everybody's using right now and that's one I have a few tutorials on my Channel with you could use database if you want and like I said version five right now this is in beta so if you don't want to use it you don't have to use it and like and I do have a bunch of tutorials of videos on version 4 okay so the other thing we can do inside of um the next off is where we will be defining pretty much asynchronous callbacks so these are very very important um the asynchronous callbacks pretty much run functions based on when a certain action happens so we could have the asynchronous JWT an asynchronous session call back we have an asynchronous signin call back a link account call back back we could also Define pages in here so the signin page and error page stuff like that well since I already use prism I wouldn't mind seeing drizzle all right so I'm assuming we got two votes for drizzle anybody else so we have two votes for drizzle if we get one more vote for drizzle I'll use drizzle because I think there's four of us in here but if we do do drizzle I'm going to have to like learn with you guys um the other thing we have to install package wise is this prism adapter I don't even know how to pull let me see let me do a pull real quick I'm using um OBS oh that was bad let me see please use database strategy as well as many people use JWT want to see a database strategy um I I could do that let me um let me see how I'm going to do that because for this project that I'm working on I'm I do want to do JWT but I I'm going to let me pull up my notion again for rjs okay I added it to the um YouTube video topic I need to record but I think overall I think the better S strategy to do is to JWT but I definitely will record a video on that as a um difference we could do okay and then the last file that we need to do for the configuration so we have .ts A.C config.sys and inside of the API folder we are going to have a off folder so this is version four so if you remember version 4 then we're going to have a catch all route inside of that and to do a catch all route inside of nextjs use bracket notation next o and then close the brackets and make sure you do the spread syntax and then inside of this we're going to have a route. TS um and I'll show you guys exactly why this path is like this because you understand it when we actually get in the browser um but if we want to show the user signed in sessions can we do that using JWT what do you mean by that the signed in sessions can we do if we want to show the user signed in sessions like how many times they signed in is that what you mean um if you could clarify I think I can answer but if uh just be a little more clear with the question I I'll be able to answer it okay so inside of this catch all route it is literally one line of code for version 5 so all we're doing is we're exporting the git and post HTTP request from not next o but from that folder at SLO and that is from this .ts folder uh where the user logged in like Windows Mac PC Etc huh like Gmail shows the user previous logged in sessions I actually don't know how to to do that injs I never really found a need to do it but I I know what you're talking about because I I'm actually on some apps where it says oh you logged in from this Windows computer at this location um I would have to look that up too let me the thing with coding is you're always constantly learning um just creating videos is a good way to learn and teach people as well because if you could teach somebody a topic that means you know the topic pretty good and it helps you get better with talking speaking in front of people but um let me so where user okay so I added that to the list I don't actually know how to even do that with the datas session if I'm assuming it's possible because obviously other stuff does it but for now we're GNA leave that as it but I just want to open up the development server real quick and what I want to show you guys real quick is the route so we created that API route clerk has the feature butt into it oh yeah they do actually clerk does have it I you're right how how useful do you guys think that feature is do you think it's like very very useful or it's just like whatever it's just like a nice add-on because I felt like I've never needed to do it but if you both were recommending it I haven't really pulled anybody on it Local Host 3000 okay so that route that we created which is the API off and then the catch all route so if you do for SL API for SL off SL there's a signin route like that you're going to get taken to their built-in signin page that's how OJs works the only reason why it's in this path is because of this path we created here so as you can see it does a get request and it shows our two providers that we provided which is the Google provider and the credentials provider so obviously the sign in fail check the details that you provided we aren't done with the codee so we're getting errors for that and then we also haven't provided any keys for the Google provider so we're going to get an error for that as well but you can see two the errors inside of your server console um cleck has has feature built in I think it gives the user a sense of security it's useful as we can log out from another computer or log in or yeah log out from another computer yeah yeah you guys are yeah I I mean I agree there's got to be a way to do it I wonder what it's called inside of the docks because they must have something for that what would you guys search right here if you guys had to do a search inside of their documents it's called um yeah next Au is hard to set up yeah I overall I think it is hard to set up it's not I think it's definitely harder than clerk clerk is very easy to set up clerk is like super super super super easy to set up I don't think NEX Al is hard to set up I just think it's harder than Clerk and it's just taking me longer because I have a mic right here which is kind of weird to me when I'm coding and then also I'm trying to you know interact with you guys explain stuff but next Al isn't crazy hard but if you guys do have a search term I search here for what you guys are talking about let me know and I'll search it okay so let's finish a few of the things let's install prism and like I said I'm going to use mongodb um you could use whatever database you want but I'm just so used to doing that and obviously I Only Could Do What I know so what we are going to do is let's just stop the server real quick and we could do let me make sure it's the right packages so we're going to need the prism package and it's going to be a Dev dependency npm install prism and then it's a Dev dependency do I have a Discord server I do have a Discord server um let me send you an invite nope where let me get the link from somewhere else have it in a different video uh there's the Discord link you should be able to join it okay so we installed the prism development server next thing we need to do is now we need to actually do initialize prism npx prism init so we install prism as a Dev dependency and then we initialize it and when we initialize prism what it does is creates a prism folder with a schema. prism and also creates a EnV file so with already a database URL string so the schema. prism what we could do here is I'm going to change my provider to mongodb and then obviously the database connection string is in the variable database URL next thing I want to do is I want to create a database in mongodb let's do that real quick um the good thing too with what I'm doing here is no matter what SAS you want to create you usually need authentication it's very important process obviously securing people's information and being able to actually um um pretty much make them pay for your service because if you don't have an account I don't know how you're going to charge them and keep track of like their API limits and stuff okay so to create a database in mongodb if you never created one very simple you have a screen after you log in it looks something like this I'm going to scroll all the way down and I'm going to click create new project here at the top left the project name we can create we could create AI chatbot SAS whatever you want to name it name it whatever you want click next and then we could click create project we don't need to add any members um next thing we're going to do is we're going to create the deployment click create we're going to use the free version for now provider AWS the region North Virginia so honestly wherever you click this down arrow whatever one that has a star you should pick actually they all have stars now let me take that back don't click the one that has a star click the one that's just closest to you so obviously um we have one person from South America so you probably want to click this one we have another one from Texas so I'm assuming probably click Virginia and then other than that you guys should click whatever you're closest to um for cluster for the name you could keep it as cluster zero it's not a big deal we're going to click create and then this is the most important part um let me do this off screen actually no it doesn't matter I'll I'll change it so you're going to create a username and then use a password I usually just use the password they gave me click copy open up my notepad paste it in my notepad click create user the reason why is because after you click create user you can't edit your password your password is stuck to whatever it was on so your password you must save it or you must remember it we're going to use the local environment and then also the IP address you could add your own IP address and then you could just add my current IP address and then it'll do your current IP address go overview I'm not that hated on the internet so if my IP address kind of gets leaked right now in the live I'm not too worried I'm in an apartment complex so it's not crazy bad but after you do that you did create your database and either it's going to be loading or it's going to create it like this next off is easy but clerk is easiest definitely clerk Clerk's easy I feel like honestly too with code coding um when you code you don't always want to do the easiest route um especially because everybody's going to do the easiest route so imagine like every app looks like the cler clerk authentication screen I know you could customize it but I just I don't know I guess something in my head maybe some OCD stuff but sometimes you want to go down the harder path um because I feel like the harder path could give you the most benefits and reward when it's all said and done but yeah Clerk's easy man Clerk's super easy so now we're going to connect the database you click the connect button there we're going to do mongodb for vs code we are going to copy the connection string right here and then I'm just going to move this over a little bit go to ourv file and we are going to paste the string in here doesn't have to have um the string quotations just that and then we have the username which is here here uh just join have you implemented the author already um I have created the configuration files um I have I've created the configuration files already I could show you that real quick let me just finish this database and all these lives are recorded So if you guys ever do need to go back you can always go back and see what I did but hey welcome Omar to the live um why choose mongodb than a relational database like pulse Gress honestly I'm just I'm just so used to mongodb I always choose mongodb but I'm overall pretty much everybody agrees that postgress is better database wise um I just choose mongodb because it's so easy to set up and it's I don't I don't have any big projects um I just I'm just very accustomed to mongod DB and I've never had a problem with them so I keep using them so there's really not too much to that so after you do the string you have your username and then you want to get that password and then just copy oh you're going to copy and paste it over here replace the password like that and then make sure you have whatever um folder you want here at the bottom you put users if you have a bunch of users we're going to have more than just user we're going to put database just like that so we have database at the end of the net and then what we can do here is we could close the EnV file we have the provider MB and the EnV as database URL so now our database is set up successfully next thing we need to do though with prism is add one more package and for that it is going to be the prism client package let me just get that code real quick we are start from scratch mongodb let me move this on the screen so prism has pretty good docks as well um and I'm on the mongod DB one as well and we already done step one which is connect your database we haven't created prism schema yet but we do have the prism schema file and we'll create own op going to copy and paste a bunch of it over and you guys can see what it is and then now we have to install the prism client and so this install command invokes the prism generate for you which reads your prism schema and generates a version of the prism client that's tailored to your models so we're going to copy that go to our terminal paste it and now we're doing a prism client package and this is where I am talking about that we're going to create a separate file to invoke the prism function so for us let me see what I did in my other project so I'm actually working on I've been working on a project I've never really shown it on YouTube it is AI voice generation so pretty much you could type whatever you want and it'll you could pick from a different voice and it'll generate the voice um I'm actually using the 11 Labs API so if you guys are interested I could do a live stream on that and a video I've actually been working on that one probably for months on and off the thing I'm stuck on is creating a video editor an in browser video editor so that's going to take a little bit of time but the project came along pretty good so if you're interest I can link that as well but if we are going to create a lip folder so we're going to create a new folder it's going to be a lib I'm creating this on the root layer of the whole project so we close it it's right there inside of this I'm going to create a new file called prism db. TS and I am just going to copy this code and paste it you could actually get this code from chat PT if you wanted and this is how you can actually invoke prism on a global level so you don't have to keep doing the um cons prism equals new prism client like it shows in the examples in this off um documentation so this is going to allow us to run prism method so like prism um do fine uh find more more than one whatever those prism methods are this is going to allow us to run those and let me look at a few of those prism methods so the prison methods could beind Manny find unique um stuff like that and it's going to be based on the schemas we create let me see something real quick this this live stuff is a little harder than I thought I'm not going to lie guys if um bear with me this is definitely my first live it's not going to be I'm going to do this every day live on top of videos so hopefully you guys are enjoying it learning some stuff um all the stuff you guys are asking like I am writing them down notion so I'll definitely get back with you all and make sure to answer all those questions but we are done with the mongodb we could just leave that open um next we want to install another package and that is going to be this prism adapter package right here so I'm just going to copy this let me open this up a little more we're going to do npm install just paste that and this allows us to add prism and adapt it pretty much to the configuration of aujs and the person who joined Omar let me just quickly go over what we did we are using prism we using mongodb and we're using typescript with nextjs what we did was we created a al.cc config.sys file then we created a al. TS file pretty much what this does is it spreads through all of the all configs which is our providers we Define our assess strategy here which is JWT we also export the handlers of git requests and a post HTTP request then we also have the signin method sign out and we have off which is a variable that allows us to pretty much retrieve the user's information or the session data and then we have our catchall route and API route and we have one line of code that says export get and post from that off file so that's a quick overview um I could definitely I need to create a video on the updated version but some people give me about it pretty much because they think I recreate the same videos even though there is a slight difference which I feel like some people need help with okay so the next thing I want to do is after we have the prism file right here that we initialize the prism client I going to copy and paste over a bunch of schemas because a lot of these schemas we're going to use and there's no point of me typing it out so the first schema we need is a user so we have a user we're not going to have audio files and we're not going to have the two Factor confirmation or is two Factor enabled next we are going to have a password reset token and a verification token let me copy that over so we have a verification token and a password reset token all we're doing is defining the types and the properties that are related to the user model and we need to create account uh yeah shoot away Omar I'm I'm reading the chats too I do have multiple screens open so I could pretty much see whatever you guys type right away and then we're also going to create a session model and an account model the reason why we need an account model is because we're using the Google provider and that is what you need you need this account model and what we have here is the ID has to have this decorator on it if you're using Mong DB so ID at default Auto at mapor ID and the at DB doob ID so we have a user model a verification token an account a session and a password reset token every time you update the schema. prism you have to run npx prism generate and then you have to run npx prism DB push so this is going to update know sometimes asks me that question and this is going to update your database with all of these models so for example let's go to [Music] mongodb refresh the page and then we're going to go browse Collections and as you can see now we have an account a password reset token a session a user and a verification token all them are empty because obviously we don't have anything but that means we successfully added pretty much models to our schema. prism file uh can you implement the PDF modification PDF editing e signature send PDF to other user and other PDF related stuff uh yeah I could look in let me write it down though my notion and then yes drizzle RM with the repository pattern um I I know drizzle RM but the repository pattern I don't know what you're talking about there not too familiar with uh drizzle let me add that though the P it's a PDF editing so pretty much anything to do with the PDF and the reason why you probably don't see so many videos with the PDF is because you have stuff like Adobe Acrobat and like so many projects already with PDF editor that there's really not much else to code on a PDF that's just a thinking I'm thinking of right now but it could be totally different um okay bu added that PDF thing I could definitely look into in drizzle RM if you could explain more funny flicks with the repository pattern H okay when I tried to use nexo for the Google login it for some reason redirects me to a n page after successfully full log in um Aman does it give you any errors in your server and if it doesn't I think I kind of know why it's doing that let me check my code real quick on my other screen that I have oh man everybody wants me to use drizzle okay um I will use drizzle tomorrow because um like I said I'm not too familiar with Drizzle so I want to make TR I learn it before just showing it on stream and just sitting here looking at it I kind of want to teach you guys stuff so I'm definitely going to use drizzle tomorrow let me put that in the notes drizzle seems very popular I feel like drizzle is fairly new too so we have drizzle and then um Aman let me know if you get any errors in the server or in your console it doesn't doesn't either one let me know okay so the next step let's finish these configuration files so I'm just going to close all of these and everything in the off do config file is almost completely done next thing we need to do is we need to just do the um functionality inside the credentials provider which like I said earlier this credentials provider pretty much gives us the functionality to do checks when somebody tries to log in the .ts file um no you don't see any errors in the log and it's just giving you a null page did you console log the user and if you did are you getting anything for console logging the user and then also another check too when doing the Google provider which we're about to do here soon make sure you using the right keys and make sure you did everything right on the actual Google console did you do all the steps right on the Google console too make sure you did that and let me know all right so in the alt. Cs file the next thing we need to do is we need to add the adapter so the adapter we have is the prism adapter we need to import at the top as prism adapter and that was that one package we downloaded and then what we are passing in as a parameter inside the prism adapter is our database so that is from the prism file over here oh my fault the lip file and then prism dbts and this we're exporting it as database so we're going to pass in the database here okay so we are pretty much done for now with the off config file the alts and the catch all route we will definitely come back in here and do more work to it but what we want to do we actually want to create our own custom pages so let's do that too so inside of here we could do pages and inside the pages we could do a the sign in and what we want to get the signin page is we want to do forward slof forward SL signin this is going to be the route or you could do login uh we could do login because sign in is too many times used and then make sure you have a comma after all these as well it doesn't reach the callbacks at all to log the user I don't think I did no I don't see are you using version five because if you are you got to do um three configuration files and if not um if you're not in my Discord I have the Discord link above join the Discord message me and then do a screenshot of the code that you have and then I should be able to help you as well but we have the prism adapter set up we have a signin page and now let's create some pages so for our homepage on the route let's remove all of the code inside of the main remove this class name here we could just do an H1 that says home remove the import of image at the top and what we want to create now is we want to create these signin pages so what I'm going to do is let's create an ALT folder inside of the app folder so that means our path is going to be Local Host 3000 and inside of that let's create another folder called login let's have a new file inside of that page. TSX that's obviously going to make the page public facing and and inside of this page. TSX um one strategy you want to do is obviously for the login form there's going to be client side interactivity and that means you're going to have to mark the page as use client but best practice is that you want to try to get as many server Pages as you can and then you import the client components inside of your server page so to do that we are just going to run the snippet rafc and we're going to do login page and that snippet if you don't know it's very popular extension it's called es7 I recommend downloading it and then you could just do Snippets of functional components okay so I have this Arrow function right here and what I want to do is I just want to render out a login form component like this it's going to give us an because we don't have a login form component um so we are going to actually create a components folder but to create the components folder we're going to let Shad C Nui do it so this is going to be the UI library that I'm going to use for this project um anybody in the chat use chat CN and if you have how do you guys like it so we just got initialize chats the end trying to show you guys everything I can to make sure everything is on the screen okay so I'm gonna answer the shat CN UI questions here which style I'm going to use I'm going to use default uh what color would you like to use I'm going to use the slate and then would you like to use the CSS variables for colors I'm just going to put yes okay so saden set up that quick and what it did for us was create a components folder right here so I know I don't have to create it now getting tongue twisted there okay so what we want to do is we want to create another folder inside the components called o so we want to separate this project good because there's going to be so many files and then after every day I'm going to actually upload a repo of this specific code so if you guys want to review you can and then I could put like um episode one and then it'll be different um repos inside of the same project so we're going to have a new file and then what we're going to do with this is we are going to create the login form or no not a new file oh yeah no we'll create a new file I'm tripping right now okay login form. TSX and now we could use a client component here but before we do that let's run rafc for react functional component rename this login form like that just remove the import from react at the top and then let's make sure it gets imported here here perfect perfect now we do npm run Dev go back to Local Host 3000 now we could go to make sure this path is accessible slash off slash login and as you can see we have login form which is right here inside this div perfect so now this is a server page and then we can mark this as a use client and then pretty much everything in here is uh going to be client site interactivity which will allow us to do that okay so now we have the login page and we are going to create the register page we might as well just do that too so it's going to be the same way inside of the alt folder inside of the app we're going to create another folder called register new page. TSX react functional component I'm just going to call this register page and then um let's see inside of components let's create a new component we're going to call this the register form and then make sure we import it here inside the register page register form like that save everything and let's go to to um local 3000 SL register and as you see now we have that page register form so we have those two pages set up correctly um I don't know if Omar is still in here I think it was Omar or no it's aan when you try to use the next off for Google login is for some reason redirects you to an old page we're going to set up let's set up the Google um provider right now for you okay cool so we're going to do the Google provider for us and you're using version five or four so are you using the beta which is version five or version four which is the stable version you're using version four okay what I'm doing is version five but I think it works the same I'll let you know if there's any syntax issue yes you're using you're still using version four okay um so what you should have is you should have that catch all route inside the app API off and then the catch all route and then you should have your Ider inside this route. TS file so make sure you have all that correct and then make sure it kind of looks something like this like I said my syntax is a little different so you're going to have providers and then you have Google and then you have the client ID and the client secret and then make sure they're stored in a process.env Google client ID or whatever you name it and then just make sure these names are the same because I've done it before where these names weren't the same same inside your EnV file and it doesn't work so we are going to just copy and paste those over press equal go back to the all config copy this and then equal as well okay so make sure those variables are the same in the EMD file next thing you want to do is you need to get these variables so to do that I don't know if you've done this you do go to the Google Cloud console Google Cloud platform the first one that pops up go to apis and services and then it should look something like this make sure you create a new project or whatever project you're in make sure you in it um this is going to be a AI chat bot SAS organization I'm going to put none no organization I mean and then next let this load up so after you create it just make sure you're in it at the top here left sometimes you have multiple projects I'm going to go in mine okay let me check um you're using I'm assuming typescript you have um an error and probably a type error Al the options on line 37 um the Google provider looks good I don't use the authorization parameter so you don't need that for version 4 I don't even use that at all make sure just based on this code make sure your Google client ID and secret are correct are your Google ID client and Seeker correct make make sure they're correct and I'm going to keep going through this and keep watching this to make sure you did everything correct so we're going to go to the credentials provider oh so the user can log in and then it's becoming null you say it doesn't reach the callbacks at all to log the user I don't think I did anything wrong in the console might might be wrong so you can't PR you can do what are you doing console log. session you're console loging the session I'm going to keep continuing with this but every time you type I'll be able to see it so we're going to do create credentials we are going to create an ooth client ID this is for the Google provider guys um a c ID is used to identify a single app to Google all servers if if your app runs on multiple platforms each will need its own client ID so we're going to configure the consens Trin uh choose how you want to configure and register your app including your target users you can only associate one app with your project so we're going to click external here create our app name the name of the app that's asking for consent uh I don't know the name what is going to be the name chatty we'll just do chatty for now and the SAS you guys are creating it is a widget that we're going to allow business owners anybody who owns a website they're going to be able to pretty much quickly edit a chat bot on our SAS software they're going to get a script tag and they're going to have a widget at the bottom right of their website that allows for their chat to um chat to be unique to their website um yeah am on just let me know what the console log of the session is if you're saying it's null is it null the whole time or is it no for a second and then it pops up um make sure you select your user support email which is usually associated with your Gmail account don't need app logo if you want it go ahead it's n for the whole time but it's log in the mint is the user is the user man this is I'm I'm just trying to figure out a bunch of questions I could ask try to like diagnose the problem or I mean this try to get the solution um is the user getting put in the database whatever database you're using is the user actually getting sent there um app domain you don't need any of this you don't need the logo for ad domain the domain we are going to do I'm not 100% sure but I think for this we could do HTTP Local Host 3,000 and if you're using V I think the Local Host is different yeah http I guess it's not there I don't I haven't done the Google console in so long let me just check real quick with my other projects nope oh yeah it's authorized redirect call back okay um make sure your call back that's another thing Aman if your call back isn't the for/ API for sl/ callback gooogle and it make sure it's Local Host 3000 or whatever you're using or if it's a domain you're actually using to make sure it's a domain so you want to do that I don't think that's in the authorized callback how to open up Google authentication new window I mean pop up rather than redirect user I don't honestly think there's a way there's no way I'm stuck on this right now I might have to watch my videos to see to get through this how to open up Google authentication in a new window I mean popup rather than redirect the user the only thing I could think of um is I'm gonna open up my other project and I'm gonna show you I don't think there is a way actually let me see see the Firebase off does let's look it up right now providers oo provider so you don't want it to how to open up Google authentication in new window I mean popup rather than redirecting the user are you talking like redirecting the user like they have to be redirected to the Google authentication um are you talking they no matter what they have to be redirected to authenticating their Google their Gmail account um there's no getting around that but like Firebase off does I'm assuming Firebase if you could explain more of what you mean I I might be able to kind of figure it out but real quick I'm G have to watch I'm pretty sure Google does that automatically as a feature I I don't I like if let me see real quick I'm gonna open up my app so I have voice fusion. I this is like one of the ones I've created if you click um say sign in like above one it's my so if you do like a Google like this this is what we're creating he's talking about like a h equals Target equals blank for the next off oh yeah I remember that method i' I've used Firebase maybe right when I first started sign in with popup he's talking about like a the a tag a Target blank yeah I don't I don't know if they have one for next off so pretty much open in a new browser the target AG attributes specifies where the link document will open H I don't I don't think nexal has that maybe they have a redirect let me check real quick they might have a redirect inside the .ts oh oh yeah I did do a video on that sign in with popup yeah damn that's crazy blanky you're a true one definitely definitely a uh definitely a good that we have somebody in here who's kind of been through the beginning of my YouTube Journey but yeah I don't know if nexo does I'm going have to figure it out like I'm not like the best at nexo but like I could I'll get it done um but the Google thing is like I'm right here right now you choose an account so I have like a bunch of random accounts you sign in continue and then something went wrong oh it's because I I don't have that Gmail account okay something went wrong there oh I I don't think I push this code so that's not going to work in production right now it's only going to work in Local Host yeah that was the video that made a subscriber that was super helpful all appreciate it man I thank you yeah I try to come out with good stuff um but I don't think so like the only way the Google provider works it only works one way with nexo I don't think it does with like it does with Firebase okay I'm actually gonna have to rewatch a section of one of my videos real quick just to see what I did give me one second you guys watch what do you guys usually watch on YouTube you could tell a lot about a person by their homepage you know a let me go to my videos so here's my Google provider with mongod DB I'm I'm stuck on um the authorized domain right here on the Google Cloud I know I know where it is in the video I could just skip to it hey what's up YouTube my name is Brett and today I'm going to show you guys how to use the and then we're just going to click save and continue you don't need to fill any of the other fields it was a different it was a different UI these options to fill them that's my email create username and password oh no it wasn't test with a Google we can name it anything we want we can name it like test our support email is going to be da Brett Westwood gmail.com that's my email uh got a bunch on go email again down here working on python for data science to a bunch of those videos too yeah it'll be that's that's cool I'm not never really got a golf I feel like I'm gonna get in a golf on a motor though because I definitely like staying active but yeah that' be really bad if like somebody's homepage was just like a bunch of girls like like if my if my homepage was just a bunch of girls and you guys just saw that I'd be like damn I'm a degenerate okay so let me go back to this code why isn't this sticking I don't [Music] know I don't think I need any of these redirect Uris oh no I do it's the authorized domain I don't think I need the authorized domain uh you're only 26 but kova got a bunch of Union your buddies and to golf never too early to start to be honest where are you from I feel like everything yeah I mean golf golf's a good sport man golf's like considered honestly the best sport out there oh actually I didn't need to create the domain I am in testing mode right yes yeah I can't use the Local Host as the authorized domain from c yeah I thought I had I thought I have to have an authorized domain but I guess not my memory is not that good right now you're from Cali SoCal nice never been I'm I'm from Florida um yeah got huge in the last couple of years yeah I played Top Golf before not the best but I'm decent at it but top golf's fun okay so after we did that I don't need the authorized domain I'm a full-time swe what was it what's swe like a sweetie with uh Edy no I'm not I'm not I'm not full time anything and then any Scopes we have to add we have to add the first three the first three Scopes and then click update and then click save and continue and then to add test users we don't have to so we click save and continue here so the part I was stuck on guys was the authorized domains you don't need any authorized domains and other than that everything looks good to go here is the summary and then we click back to dashboard and the other thing we need to do is we need to create the credentials so the credentials when we create these this is what allows us to get those EnV um variables so we're going to click create credentials up here we're going to click the oo client ID it's going to be a web application no I know I know I'm not a software engineer fulltime I do um I do like marketing some frontend work for a guy like on a contract base um so it's a month-to-month thing but I've been doing it for about four years with him he owns a local business here and I also do other side stuff as well and then like the YouTube flipping some furnitur stuff like that how you hosted your portfolio website I mean you use Docker thing uh no I've never used Docker I just host on versel so versell is the only place I host on um let me name this AI chat bot SAS hey um do you go to college in SoCal um blanket um I mean it's probably Jack great you you do um versel too okay so the authorized redirect U okay so the redirect U is this call back right here so it's the API SL and then callback gooogle okay cool so after you create that you get the ooth client created you get your client ID here we're going to copy it we will paste the client ID there and then we need the client secret as well and we will paste that here as well let me just make sure those look good yep everything looks good so now we have both of the files we need and we're good to go you went to college in Boston nice I actually um I'm in Tampa Florida so uh the University of South Florida there's a lot of kids from the Boston area that go to USF you probably know it because I mean no exaggeration I probably every other kid at USF is either from the Boston area is versell free like can I put a custom domain to it for free yeah you could put a custom uh domain to it for free um you could either buy a domain through for sale which makes it very easy or you just um hook up your DNS records and it's free all you got to do is just like hook up um the a type it's one of the DNS records but the the steps are very forward simple that's actually a good video I could make too let me add that to my notion um to connect domain two for so because I actually had to do that one time I had to connect a domain from um oh you've been USF before I told you everybody from Boston has been USF yeah I graduated from USF in 2018 with a finance degree and yeah no you it's it's cool it's an okay school it's not a big Sports school or anything I just I don't understand the why like everybody from Boston goes to USF there must be like some recruiting program or something there I don't know what's what's going on you get a 401 unauthorized ass call on the Callback Euro and the user is redirected after selecting the preferred account um you get a 401 unauthorized status code on the call back Euro and your user redirect directed there's there's um Aman I'm probably gonna have to um I could talk to you on Discord after my live and we could try to um work it out but it's kind of I I don't I don't think I could solve it just through messages I probably have to like actually play around with this so we could do like a we could do like a zoom call or something and I could help you out after so it's like a database and stuff can be configured for free on for sale um yeah I think it can let me show you real quick okay um so say if you go to like one of your projects and for sale yeah Aman just make sure um let me know if you're going to leave the live chat and um you already messaged me on Discord so if anything I'll message you on Discord if you want to stay you can but if not it's all good I'll message you on Discord right after um but if you want to set up a database you can be figure it for free on verell you can actually connect a database and create a new database here but I think after so many um users and just pretty much data to your database they charge you I'm not 100% sure how much it is I usually don't make a database through for sale but it is possible and I think it is they do have a free tier oh nice graduate from nor Eastern 2021 with the finance dat analytics degreed very nice and Northeastern very popular um just trying to get away from Boston winners yeah probably honestly um yeah so many people moved to Tampa and just Florida and general it's it's crazy because I've lived here my whole life and I've never seen so much traffic but yeah Florida's nice I mean Boston's nice too I definitely want to go up there I heard the cape Cape Cod the cape up in Boston is very nice there's like a super rich area too I think up there around the cape um safe have a custom backend and no JS can I host that for sale for free H I know you can host it on versel but I don't know if you could do it for free I'm not 100% so I don't want to tell you that but you can host a custom backend in node.js but I know nextjs pushes their full stack framework so I would recommend just using that but I know there is some benefits of using no. JS as your backand as well um and the support for versell honestly like it's really hard to actually talk to actual human so you usually have to go through like fors and stuff like that or send in a ticket and obviously your ticket's a better priority support if um you pretty much if you're a paying member so if you pay for like a membership for ver sale they're definitely going to prioritize your support ticket but I think it's like they have like different tiers like they have like a $10 a month 20 a month stuff like that um sure I can understand thanks for your help 100% yeah Cape Cod is very pretty would recommend coming to Boston fall if you can yeah yeah no I definitely need to come personally been out on for spring break couple times but there's but always a Vibe yeah yeah t Tampa's cool I I mean my Miami is a different animal though like you you've probably been to Miami I've been in Miami like once though and I I've lived in Florida my whole life but if you've been to Miami you can definitely tell it's a different vibe aorus phone support for free yeah I mean I've never used them so they probably do there's a lot of places that give phone support for free I just don't know why forell I mean they probably don't have a crazy big team like some of these other companies okay now we that we have the client ID in secret I'm gonna obviously remove these don't show this to anybody um next we want to actually test it out so let's test out the Google provider so we have our Local Host running I'm just going to stop it because we did change some EnV variables I have so many files open right now okay so to test it we could go to that route SL API sign in oh and the reason why it's taking us to the login form is because in the .ts file I did the signin page as this route so what I'm going to do is I'm just going to comment this out refresh the page actually I might have to reset the whole server npm okay slash o or no slash API SL allof sign in okay cool now it's working so that's one of the reasons why inside the .ts file is if you pretty much you could change the pages um to be your custom pages so the Au login page that's why we're going to have this page to be it but we're going to have our own custom form made with by Shaden so we're going to click sign in with Google see if everything works okay so there's a problem with the server configuration check the server logs for more information ikm must be an instance you I C must be an instance of Unit 8 array or a string I've never seen that error before let me make sure I did everything right real quick and then I'll answer your question so we have our off. config file we have the client ID in the client secret we're passing it through here spreading through it and then we have it here as well there's a error equals configuration and then inside of the chat bot SAS yeahi chatbot SAS my screen feels so cluttered give me one second guys th this this live streaming and actually working is hard way harder than I thought oh yep you're right JWT secret is missing I I feel like my head honestly is all over the place just like looking at the screen questions which I like though I want to answer and talk to you guys that's way more important than anything and if anything I could just make videos on these which making the videos at least you're like 100% focus and you could actually teach but yep there's supposed to be a secret so I think the secret had to be a certain way too it had to be spelled a certain way it is nextore secret okay so in the EnV file next oore secret and then this could be anything so I'm just going to type in some random gibberish and then the other thing we have a nextore public appor URL I'm going to copy that real quick paste it Local Host 3000 okay so let's restart the development server again npm runev we are going to open up local 3000 go back to the API route sign in with Google sign in with our account sign in to chatty and we should be logged in and one way we could tell is we could console log it but really quick we could just tell if our because we have an adapter to prism which connects to our database so we're going to refresh and look and see if we have a new um account inside of our account and as you can see we do have an account here so good catch on the JWT secret is missing like stuff like that simple could literally ruin the whole app and I don't understand why the errors for the console don't just tell you straight up like you told me it would make our life so much easier man I I just don't understand okay so next I think we have a few more people in here so if you guys welcome um if you guys do want me to review some of the stuff we've I've done go ahead type it in the chat but other than that welcome to my live stream okay so we have the Google provider set and ready to go next thing I want to do is I do want to set up a few things from shat CN UI and we have already initialized chat CN so what I'm going to do is open up shats again and the components we want is we want a button that's going to be one so we're just going to use npm we can open up another terminal just paste it here enter and then if you want to be able to tell if it was successful inside the components there's a UI folder it creates and then the button so the button's good to go next thing I want to add is I want to add a card let's do the installation for the card please use another UI library for fun oh okay which one do you want then tell me a library and we could use it I I feel like shat the end just like everybody likes it so I was like Hey I'm going to use it and plus I like it too but if you have another suggestion we could definitely try something I'm going to keep installing these if anything I could just install them and then I'll check out the libraries there's actually a new library I think called like entra UI I don't know what it is but I know it's kind of new I think I was going to do a video on it as well but we have a button we have a card we also want the form so the form component is what we are going to use for our login form and register form in a very very good um what what library do you want to use if you give me a suggestion I could definitely look at it are are you are you just that good that you're bored with it you could customize the components and shots the in I mean you could customize them inside these um files right here if you really wanted to okay but we have the form we have the card and now like I was saying a really good YouTuber that I've watched is code with Antonio I know a bunch of you probably watched him so a lot of this is kind of inspired by him but I mean I've been learning nexo before he actually came out this most recent video that he did but if you haven't it's like eight hour video of just nexo stuff it's it's very good definitely highly recommend watching that but for now let's create create the register page and for us we have the app folder we have the all folder and then we have a register page which is animation heavy um I know like I've been working around with the SVG files and images because it's really easy to animate those um it's a lot more code but I feel like animations can be an overkill on websites I feel like maybe having one animation maybe two on the website is good enough any more than that I feel like it's just Overkill and it just it just messes with a lot of stuff but if you do have a library that's animation heavy let me know and I could look at it because we do want to add animations to This Ss but for now the register form we have the register page we want to keep a server side so we have a component that's rendered and inside the register form this is going to be a use client so now we're going to create the register form reason why I'm creating the register form before the actual login form is because I want to be able to register the user and then test out the login after so that's kind of my thinking and we just did the Google provider which is set and ready to go we just got to create a custom Google button for that which is easy um so for the register form we are going to like I said we're going to use the form component which is inside of shaten and it gave us a few packages so the register form actually gave us Zod which pretty much just checks your types through typescript and then we also have where is it and we have a few radex uh actual packages as well and then we have the hook form resolvers package as well which we're going to need to use so let's go to register form um I was thinking next UI since everything is next byk I'm using it too but testing it it doesn't output correctly byk I have to add more to the CSS with Tailwind I've never heard of Shad cm nexi you've never heard of shaten um let me check out xui real quick let me see what that looks like I don't think I've ever used NEX UI I've heard of it though oh I I know you're talking yeah next UI yeah they're pretty big too components yeah no I mean it's like it's the same thing shaten and um nexi look literally very very similar yeah they have a card checkbox Brad crumbs button accordion Avatar drop down they have one that's called Navar it's pretty cool yeah no if you want to use nexi go ahead and use nexi but if you never use shaten um I have their mui bun effects I oh I hate their mui bun effects who uh nexi colors Danger it it looks solid like there's nothing P that is loading prop to display spinner component inside the button it doesn't look horrible um but I guess I'll just if since they're very similar and I'm already using shaten I'm going to do that but if you never use shaten all you got to do is just go to installation nextjs run the CLI if you haven't already done if you haven't already created your next project run the CLI just copy it here answer some of the configuration um questions and then after that all you have to do is go to a component of you're choosing so let's say button which is pretty popular click code and install the CLI again for the button it'll create a components and then UI click on a button you'll see it effect okay one sec I I'll click on that button but after you you pretty much install the CLI on shat CN it'll create a components folder a UI folder and then it have the button and then all you do is import the button from the components slui button and then you use it inside of your code it's that simple and then obviously there's a bunch of variants stuff like that but that's just pretty much the basis of it so let's go next youi click the button you talking about like that where it's like where it shows where you click it's not horrible I kind of like it I know I know what you're saying it's not horrible yeah I it's definitely different but I don't think it's horrible okay so we are going to create the register form with shat CI form so what we're going to do is first thing first is let's create a card wrapper so this is going to be the end result right here so let me go to Voice Fusion I don't know why oh the dashboard thing wasn't working because of um some other reason but okay so if we sign out of voice Fusion this is my app we are going to create a register page that looks similar to this so we have a name email password and confirm password and then we have the register button and then we have the Google provider button right here and then we already have an already have an account you click here so the first thing we need to do is we need to create this card wrapper this looks very similar like I said to code with Antonio um like I said highly recommend him great dude on YouTube to follow long videos though don't get me wrong very long but definitely worth it so for the register form like I said let's create a card wrapper so inside of this components uh and then alt folder we're going to create a new file called card wrapper. TSX and we're going to have to style this better when the screen definitely gets smaller but for now this project isn't completely done either um okay so let me build the card wrapper real quick and for the card wrapper we this is I'm going to mark this as a used client which isn't a big deal it's a component inside of this we are going to import the card which we installed from shaten so we have the card we have the card content we have the card header and card footer that's what we're using and this is going to be from components slui SL card like that damn get the co-pilot wasn't working right right there gives me the wrong thing okay so the next thing we want to do is we want to run rafc we could call this card wrapper remove this import here and then what we're going to do is instead of this div we are going to wrap everything in a card and then we are going to have a card header inside of the card header we are going to create a custom component called header just like that like and also to with a bunch of this stuff I'm doing here I kind of already have a lot of it already done before um how you created The Voice Fusion dashboard UI have you used any template um I know I didn't use any template I actually just looked on dribble so if you guys don't know what dribble is it's like designer inspiration dashboards I just kept one on the side and I just kind of like coded it from scratch so no there's no template and the thing with um I already know what it's doing it's because I already have an account that's associated with that email so it won't let me log in Google but now this is like a dashboard um this is my other project that I've been working on it is a SAS so like here's the dashboard um and what you can do is you could go to voices and then there's a bunch of voices here I wonder if you guys could hear it I don't know if you can so like you could type whatever you want so hi hi there generate it makes the call to the API and 11 Labs hi there hi there it does that I can save to my dashboard and then as you can see it says I have nine of a thousand free characters left and if I want to upgrade I could upgrade to a pro membership for like 20,000 characters a month and then if you go to dashboard I did one voice creation nine characters used I have one saved audio file and then it's down here and then if you have like a big list It'll like paginate it and then you could like search for your save voice hi there so that's pretty much the project I've been working on it's not horrible then you have like the settings upgraded Pro but we're going to create a lot of this stuff for the project that we're doing right now as well so if you're interested in that um project um just let me know um you using co-pilot or tab 9 I'm using co-pilot I have the paid version of copilot so you set any max width on the dashboard like if you zoom out then UI looks good so you set any max width on dashboard like if you zoom out the UI looks good um I think I had the max width let me look at my code I actually have the code to the side here so you set any max width I think oh no I didn't set a Max width I just um I said padding left and right that's all I did and then I and then the cards here are grids so like it'll be grid columns 2 on all pages and then when it gets like a certain break point it goes to grid columns one but it's all PX it's like PX 20 so it won't never touch the side here and then obviously this I still need to style like I said it's still working project but it's coming along okay so we're going to create a header component let me go to slash slash register we are going to create a header component which we haven't created yet it's a reusable component that's a good thing about next and react um we're going to have some card content inside of the card content we're just going to render out some children and to render out the children we're going to have to pass it inside of the props up here because technically you can't have children down here unless we pass it through props in in here and then we are going to have a card footer as well so like I said I've already worked on voice Fusion is the header the Navar um for this case no so I'm going to create I haven't created the Navar yet I'm just working on the authentication the header is technically uh yeah you're right I should probably rename it because it could be confusing let me name this to um I'll rename it to card header or no because it's already right there I'll name this to offhe header so it's just like if you're on the register page it's going to say register and if you're on the login page it'll say login so that's what the Au header is or the header so let's create that component as well and that's going to be created inside the Au components here so we're going to do Au header. TSX and what we are going to do rafc we could call this Au header okay so what we are going to do here we're going to have a class name with full Flex Flex column G Gap y of four item Center um how did you learn how to code just self-taught yes correct just selftaught that's pretty much their YouTube videos um pretty much any pretty much videos honestly and then just obviously actually creating projects so like this voice Fusion project I've been creating on the side is a fully functional project um another project that I created I've created a few websites for people in real life as well so I have my brother runs a junk removal company so here's a website as well his website um you know it gets the job done and then you could just bul through his website it's connected with stripe everything's hooked up you could see when you want to rent a dumpster you could actually pay through site I mean he's had customers go through his site his seo's good it's um oh sh just realized it's like 2:30 a.m. for you the grind set yeah no it's yeah it is 2:30 it actually went by pretty quick um but yeah no I just create projects on the side like creating projects I feel like I've learned the most creating his website I learned so much about the stripe API which I have a few videos on stripe but I just need to sit down and really create videos because creating videos on YouTube does take a lot of time and is and it is very time consuming just creating the thumbnail creating timestamps stopping the video making sure everything's said correctly no pauses stuff like that I mean especially you have a little OCD and stuff like I do you want everything try to be as good as you can so that' be the best um do you want a job in the future um yeah I mean yes and no I rather as long as it's like hybrid I wouldn't want a fulltime office job if it's like a hybrid job with flexible hours I'll take it but I'm not in a rush right now like I said I do other side um like ways of making income so I feel like I'm okay right now MoneyWise obviously everybody wishes they make more but um if I do get a job hopefully it's hybrid or full remote that would be the best because I still want to do YouTube YouTube's cool like YouTube's fun like you get to meet people talk to people like you guys I mean it's it's like the only job that's like this and I wouldn't consider YouTube my job like it's just like this is just like I guess part-time stuff but you never know it could be full-time there's definitely money in YouTube for sure from ad revenue and all that stuff but this was just a few of the projects I created then obviously I have my um like Dev Vibe Studio where like I try to get clients through here um other than that it's not like I said I just recommend people doing projects I like I'm here on live obviously it's taking me a lot longer to code since I'm live but hopefully you guys appreciate the communication back and forth okay so what we want to do yeah no problem no I appreciate you joining the live yeah definitely motivating to have people in the live you know it sucks if you're not if you're talking to nobody um but let's finish this Al header so this Al header isn't the na bar it's um how long did it take you to do this SAS will the demo your broadcast in to us um if you're talking about the voice one I've been working on and off it for like three months and then this one that I'm doing live right now I'm I'm creating this one from scratch obviously I'm using some components I've used in the past but the one I'm working on right here with you guys live I've never created it but I kind of know I've used open AI API before which is what we're going to use for the chatbot the a it's the AI assistant API and I think that's in beta too but we're going to use that for this specific sass um but I haven't created so this is literally day one so what we're going to do here is we're going to add a justify Center too have you created a SAS at all Lo local go or any projects like how far are you in your Development Career we're going to have a dynamic title here because like I said this title is either going to be register or login so we're going to have to create that Dynamic title then what we can do here is we can actually import uh CN and this uh CN package library is actually allows us to pretty much use two separate um tail and CSS I don't know what you'll call them functions inside of the same element if if I ask for proper guidance for DBA will you be able to provide it with Cloud knowledge uh if has progress probably not but if um I'll would say no I'm I'm not too familiar with it okay so we could use the CN package here um pretty much allows you to do a few different things actually we're not going to use it here I'll use it in a little bit it's really not that important and I kind of want to explain it better than just freeing freeballing it so let's just create a class right here we're going to have the text [Music] s3xl and then the font is going to be semi-old and then what we're going to have here we're going to have an interface we're going to call this header props and the header props we are going to have is we are going to have a label which will be a string and then we will have a title which will be a string as well and then right underneath the H one we are going to have a P tag this P tag is going to be the label it's going to be D Dynamic we're going to have text muted foreground and then text small uh well mine is hybrid type I'm using a server spring boot doing all the API calls to mongodb to get users one user products logging or registering B Buton I'm using fire brace for the authentication part oh nice oh they so you're creating your own SAS I I I don't know why I thought you were talking about your job oh so what what is the SAS it's a hybrid type I'm using a server spring boot doing all the API calls okay do you do you is it like do you have a website or anything for it like custom domain we could check it out because we do have a community in like the Discord so if you put in there you know people could you never know give you some um critiques you know constructive criticism I guess if you want to call it it's always good when you're coding okay so we have this we're going to have to create these Dynamics elsewhere so let's go back to the card wrapper let's make sure we import the Au header at the top to get rid of this error and the next thing we want to do is inside the card wrapper I'm going to create an interface card called rapper props we have we children we're going to pass in some children we are also going to pass in what do we call it we could call it the header labor header label that is going to be a string we can also do a back button label that is going to be a string as well um no not really haven't made a public I'm trying to get the client side up and running was trying to get the login and register working first but it doesn't look good at the moment I think are you using o wait you're saying oh it doesn't look good like checks out CN it gives you the component done basically the basic of it yeah I'm trying to create the form kind of from scratch based on voice Fusion so I'm trying to work on it from there I I know um Shaden kind of gives you a basis of it but I've done that before and I I didn't like it so I like the way I was doing it but are you talking about you don't like how your client side looks are you talking about like the authentication is not working at all all we're going to have a title of string I'm going to have a soci social which is going to be pretty much it's going to show the um Google login or not and it's going to be optional it's going to be a Boolean we're going to have a back button href and that is going to be a string as well I just saved it real quick and um three four five six okay so I think that's all we need so let's start passing some this in we have the children we have the header label we have the back button label kind of want to do it in order we have the back butt href we have the title we have the soci social and that's it and then let's assign it to the card wrapper props cool so everything looks pretty oh um check uh know the clients that are making the register page I use the input fields of nexi but it looks way um can I share the Discord would like to join the community yeah yeah I'll let me share real quick and I'm going to answer your question locco real quick or look at your comment um so I'm going to paste the Discord Link in here if you guys want to join if you are in the Discord so that should be the Discord link to join um you said know the client side of making the register page I use the input fields of next UI but it looks way off from what the examples show from the center IDK why it's doing that so I'm going to try shadan and then customize it on my own yeah I I would recommend chattian um I actually never used xui like this is how a login form and register form would look which that's the end that we're going to make oh my God I have so much stuff running on my computer why is this not God it's just so laggy my computer right now probably from like live streaming with like 15 tabs open okay so this is like shatan this is very basic we're going to create this but we could style this way better like this is just the card wrapper inputs these are inputs from shaten this is the button from shatan um so we have the card the button what else do we have from shaten on here I think that might be it with the components from shaten oh we have a label too I think this is a label component so label input card wrapper card buttons so this is like something you could do and then you could obviously customize it um doesn't look too bad and then obviously you can Style with tail one CSS as well but um let's get back to this and actually finish this register form okay so we have the card and then we have the card header and all of these had to be passed down and then we have the Au header and inside of the Au header we have to accept some props to which is going to be the title and the label so we already have the interface here so what we can do is we can accept these as props and we're working backwards um which isn't the best but it do it question does shaten create the components in UI fold or do I need to create it on my part so when I load example recording component it just loads it for me there um no you don't have to create the components and the UI folder you don't have to create the components or the UI folder um let me show you real quick since we're talking about it okay so if you want to for example you want to have the accordion first you make sure the installation for nextjs you have the CLI command ran so make sure you initialize sat CN UI at latest and nit so make sure that's done and then it will configure you like some configuration questions you'll answer you get that done so after you do steps one two and three of the installation you go to accordion click code you're going to run the CLI for the accordion run in your terminal after that all you have to do is pretty much after you run the CLI for the accordion it creates a components folder for you and inside the components folder it creates the UI folder for you with the accordion. TSX file so you could go in there and you can look around but technically you don't have to change anything inside of that accordian TSX file inside the UI folder all you have to do is then you can go to like say your homepage import the according at the top accordian content accordian item accordian trigger and then you could literally copy this code right here and then change whatever you need um I don't know if that answers your question but yeah you don't have to create the components and you do not have to create the UI folder it does it for you when you run the CLI command and then just make sure you import it from the components slui slash if it's accordion button badge whatever it is okay let's go back so right what we have in our code is we have the card wrapper right so we have this card wrapper and it's going to be wrapping or register and login form and um what that is going to do is we have to have it inside of our register page so our register page has the register form component and this register form component is going to be wrapped in a card wrapper right and that's the component we made so let's import the card wrapper so we have it imported at the top right and what we do here in the card wrapper is if you go to the card wrapper we are accepting a lot of props right so we need to pass these props into this card wrapper so to do that the card wrapper is actually called on the register form and what we're going to pass we are going to pass the header label right that's one of them so for the register we could call create an account like that and then if you hover over if you have typescript it's telling you hey it's missing the following properties from type card wrap props children back button label title and backb HRA so we need to add those still right so we have a title and the title we are rendering dynamically so the title is going to be it could be register it could be sign up we're just going to put register after that we're going to have a back button hre and this back butn hre is if they already have an account the back butt is just going to take them to to the au/ login page and the reason why is because that's the login page route that's public facing another thing we are going to do um I see emojis on the screen I don't know what that means but uh let's see okay so we have the back button hre and that is going to go to this specific route we have the back button label which is going to be the label for the HF and this is going to be already have an account something along the lines of that we're going to do so already have an account you can be signed in here and then we do so show show right and that could be just like that and we're still getting an error and it's because property children is missing in type so the reason why property children is missing in type is because because we have no children within this card wrapper so now we can actually create some children in the card wrapper so we have a form and the form is going to come from react D hook- form and that is actually used lko I'm watching this have no interest in react but here for the support hey I appreciate it what wait so do you code at all or you probably told me ear yeah you I think you did tell me earlier I know you have a degree in finance in data analytics but if you don't code hey man that's that's that's true support though I know you did the um you did the one video the Google provider one I know you said you did but we do have the form component that's from react hook form and that package came from the actual um oh yeah you told me that D I don't know why I thought just Finance like a finance major oh yeah okay makes sense now you're actually I do want to get into python I just you know when everybody starts coding it's like JavaScript and react so it's like I don't know my mindsets like try to be good at that like really good at that and then maybe move on to python but I don't know we'll see so we get the form from the react hook form component and that was imported and this has to be the use form just just like that but now it's just cup of tea oh okay yeah good locco that I'm glad I answered your [Music] question uh yeah I learned josa first actually now Learn Python so I love JavaScript personally but makes much so much more sense to use Python for data yeah I agree even though I don't really know python like that I've definitely seen a few videos here and there like you are right now and I could definitely tell Python's for data it's not even close um oh I want to ask you since you made website for brother very good by the way thank you I was thinking of making a floating Navar but the way it looks it's going to be well the shape of a search bar of Welly web browser but also have a glass effect do you think this is a good design method um oh yeah like it's I think it's called like glass formic or glass morphic a lot of people on figma like designers have been using that I think right now it's trendy so yeah I think it is a good method I know exactly what you're talking about it's um so you're just going to have like rounded full Corners I think like using tailwind and then um you're just going to make sure like it's like an absolute position like top 10 or even top five and then it's always at the top like five or 10 away from the top doesn't I don't think it should be hugging the top of the page but yeah no I think it's a very good design and it is different than just the original nav bar so whatever website you're doing it should definitely work for um I think Tailwind actually in their docks has like a class for that glass um effect like specifically for that glass effect it is pretty popular the glass effect is very very popular but yeah I say go with go for it um okay so what we did did was we import let me remove this so we import use form at the top from react D hook- form and then what I want to do is I want to define a form right here so we're going to say cons form equals use form this is going to take in an object and inside of this object we're going to have a resolver and and the resolver is going to be a Zod resolver and that is coming from at hook form SL resolvers for sod um and then we are going to have to actually create some schemas to pass into this Z resolver so what we can do is I'm going to collapse all of these folders open a new folder call it schemas and then inside of the schemas we're just going to create index. TX file inside the index.ts file we are going to create a register schema so we're going to click import all so it's Aster as Z from Zod so we're going to click export const we're going to create a register schema this is going to equal a z doob we're going to have an email so we need to think of the things that they want to the user to do to sign up to our assass so we want them to sign up with an email we want them to sign in with a name or username a password and then we have a confirmed password as well so we for sure want an email from them this is going to be z. string. email we also want either a name or username I'm just going to say name z. string and then we're going to put a minimum on it the minimum has to be one character and if it's not one character we're going to have a message saying name is required okay do I do mentoring at all um no I've helped I just help people with code for free I don't really do mentoring I'm not really amazing at like I'll say next or react I think I know a good amount and but I'm not I don't think I'm ready to Mentor people like like on a professional level especially after doing this first live like doing lives and teaching people in person is way different than uploading a video and recording and teaching them already on an uploaded video because when I record a video if I mess up I just restart or I restart the part like in a live if you mess up you just got to keep going so teaching people in person oneon-one especially when it could be like a array of questions I feel like it'll be pretty hard so I definitely want to get my skill set higher before I even even consider that but I think the best thing overall is just creating a SAS like actually creating a su a SAS that's successful and um that actually makes you money which that's the hard part but that'd be pretty cool if it does um we're going to have a password we're going to make it a string with a minimum of six characters and then the the message if it's not password must be at least six characters long and then this which um data. password does not exist on type string I know this method on the um true fair enough yeah I just I just feel like a lot of people will try to sell courses I mean they'll sell course on anything like you could do anything and it doesn't have to be coding like they could just be like oh how to for example how to flip a couch which is like one things I do to make money on the side and they' be like this is how you flip a couch you join my course on my Discord for $50 a month it's like dude I don't have to pay you $50 a month to teach me how to flip a couch it's not that hard to flip a couch um it's just like I don't know just people are like out here like it's just every industry I feel like it's such a scam when people try to like sell you stuff some of them are legit though but I don't know you could definitely learn everything you just got to put the time in um can you create a pass as well I don't know what that is it is still useful to have a username because I was thinking that for some people it's annoying to degree trying to come up with the username but having just use your email is a bit better but will it depends on the project itself yeah um I just think adding a name yeah I mean it probably just depends on the project um but I think there is a method at the end of this Zod which I'll have to look at later but I do kind of want to finish up this register um portion and then after I finish the register portion I'm probably going to end this live I've been live for like uh two and a half hours now I think give or take yeah two and two hours and 35 minutes which is pretty good I feel like but um let's finish this register page and then I'll call it for tonight but if you guys still have any questions keep asking so we did finish the register um schema make sure you're exporting it as well oh platform as a server just like a sass no I Haven it can you create a pass as well um give me some examples of a pass what would it be like would it be like a offer up like the app offer up like a Marketplace I'm assuming that's what you mean um we're going to import the register schema and then pass it inside of the Z resolver okay after we do that we are going to define the default values and these default values are going to be the values that are in our inputs so we're going to have an email with a default value of empty string we are going to have a name with empty string and we're also going to have the password as empty string and we don't have to do confirm password um I'm just going to leave it for now and then other than that that is it for the used form so we are going to import the form the form control the form field the form item the form label and the form meage message from that components slui folder so I'm going to import them like this I just copied and paste them over um verel is a pass oh true um I'm gonna head off for early dinner much love from Korea my guy thanks for the live looking forward to the next one hey appreciate it blanket I'm assuming Jack right very very very much appreciate you guys joining the live if you have to leave problem but you guys will definitely be seeing more for me and hey have a good dinner right um okay now we are going to we have the form so we got to wrap everything in the form so the big form like this and then right below it we're going to have the regular HTML syntax form and then we have to do a spread syntax of everything in the form I think it might be a capital actually or no it's not I'm missing one period like that okay so we have the form and on the form I just want to have a class name of space- Y 6 that gives us a little bit of room in between the inputs we're using Tailwind for there and then another thing I want to do is I want to add a div [Music] um I'm gonna add a div right below that and then we're going to do another space- y -4 and then what we're going to have here is we're going to have a form field and this form field is actually a self closing element okay so inside the form field let me see let me just go to their docs we will go to form and this is the anatomy of the form inside of shaten so we have the form and then we have I have the HTML form as well and then we're passing through all the syntax I know it's in here as one of the um anatomies let me see okay so here it is right here so we had the form and they're actually passing all the form to the actual form so let me do that like that okay so I made a mistake on that but we have the form we have an on submit and the the class name of space YX and the reason why I have this div here is because I want to have a space y of four between each form field so if you want to know what this A1 CSS like styling is you just hover over it and it'll tell you so space y4 so that means the margin top and the margin bottom is going to be 16 pixels so it's giving you 16 pixels on the top and 16 on the bottom so for the form field we want to have this control this is going to allow us to control this uh field and it's form. control we are also going to have the name and this name the first one is going to be either email name or password and the reason why it's showing that is because um of the default values we use here inside of this form email name or password so the first one we could do is we could actually do we could do we could do an email email is the most important it says property render is missing in the type so we still have to do the render so render which is here it's going to equal the field and it becomes an arrow function and then we have to render the form item uh I hope you guys could see this let me see I'm gonna make it bigger so we're doing the form item and then we have a form label this form label we could name it email I want to I want to see what we're doing too while we code it let me open up Local Host 3000 slash slash register label is not defined okay so that we could go back to the O header and actually fix this issue so we pass that this is the header props the card wrapper oh we got to pass those as [Music] well label equals header label what's the difference between form and form field um give me one second let me just finish this off header to fix this and then I got to pass what else label property title title equals title okay now everything's rendering nice um so the difference between form and form field let me go back to it real quick okay I think the form let me see what the docs say but I think are you talking about the difference between the uppercase form and lowercase form or you're talking about like form are you you mean form field because I think the form field is just the rapper which is a self-closing tag that just pretty much embeds all of the properties that Shaden uses So like um I guess we could go over these docs real quick um forms are tricky they are the most common things you you'll build in a web application but also one of the most complex well-designed HTML forms are well structured and semantically correct easy to use and navigate accessible with the form component um so the form right here so the form component is a wrapper around the react hooked form Library it provides a few things so the form component is a wrapper so this is the wrapper the uppercase form it's composable components for building forms a form field component for building controlled form Fields so this allows us to actually pretty much get state with inside the form field because if we finish this form how we should we are going to have the input which actually I need to install let me do that real quick so to get the input installation CLI input install it add it when you add it you're going to see the input pop up here inputs right there nice and all you have to do is import input at the Top Copy um the card wrap no it's not the card wrapper at the register form and then import it there okay so handles accessibility and error messages uses react. ID for generating unique IDs applies the correct area attributes to form Fields based on States buils work with all radex UI components build your own schema liary we use Z but you can use anything you want you have full control over the markup and styling so I guess that's the anatomy that they show there's an example and then here's like the installation created form schema which is what we did let me see this so we created this form schema we just called it form or no we my fault we didn't create we created a register schema inside of a schema's pretty much file here called register schema and Define the shape of your form using a Zod schema you can read more about Zod using the Zod documentation then you use the use form Hook from react D hook- form to create the hook or the form so we have the use form hook here after that we make sure we declare the form variable and that is going to equal the use form and then we use the z. invert type of and then ours will be register schema like that we have to import Z from Zod at the top okay so that works and then we have the on submit which we will Define a submit Handler in a little bit and since the form field is using a controlled component you need to provide a default value for the field see the react hook form docs to learn more about controlled components I just want to see object provided by invoking use form optional when [Music] using so I have to look through those stocks too I'm just going to Star this okay all right so let's finish this form field first okay so after the form label we need the form control so this is the field I guess where we could enter input which we're using the input component from Shad CN we do have to spread through the whole field with the spread syntax we could have a placeholder as well which we can just put [Music] as John do a email.com and then make this a self-closing tag the input and then after that we should have the what else I the form message so the form message is just a self-closing tag like that so as you can see here and then you can have a form description as well but as you can see ours is right there it's working pretty good we didn't install anything so obviously it's the full width I kind of want to see what the um form description does so under the form control we have a form description let's see if it's worth using we'll never share your email that's what co-pilot recommended so let's see and that's it's not horrible I'm probably gonna remove it though um so you can put a form description guys if you want but that is it for that form field now I'm just going to Lally copy this and then paste it down three more times so one two three now we get four Fields bang and the reason why it's not Styles because we don't have the card wrapper style yet but let's just fix all of these labels and inputs so we have the email next field we want the name the placeholder we could put John do um name name this is got to be name next one's going to be password let's do some stars for the placeholder one two three four five six we'll do the label as password so there's the labels changing uh this one we're going to do confirm password and then we're just going to make sure they type in the same thing because like I feel like especially when people are typing in passwords like they definitely should be able to confirm it because sometimes i' be typing in the wrong password on the first try so I feel like that's very important for the ux pretty much design when doing a form okay so we have that the confirm password placeholders um this name is going to be confirm password let me camel case it wait type confirm password is not assignable to name email password or password confirmation so I got to reset this because I think I named it something else password confirmation where did I name it password confirmation was it in the register schema yep password confirmation that's why it's got to equal that so it's got to equal those names and the register schema okay all right so next step is right above the form and outside of this div because this div is just spacing this and then we have a space between this div of 6 y or Y6 oh we're not using a regular button let's use shoten so button I already um we got the package but we need to get it at the top so we have a button and then um I need the bun to be kind of Dynamic so when it's loading I want to show that it's loading so we need a loading State and if it's loading we're going to say loading if not we'll have register I always like putting on Blends type submit and then class name will do with full okay so let's create the state real quick because this is a used client um component let's import you state from react let's create the loading and set loading set it to false initially and then we are good to go we can set loading true on the on submit so let's go back to the top where we have this form in this HTML form we need to onsubmit so the onsubmit is going to have a form. handlesubmit and then we got to pass in the function which we could put on submit so we have to create an on submit function yeah I like that I kind of like the class names at the end there we go okay so now let's create an onsubmit function above right here which it is that's co-pilot's right on that okay so we are going to pass you can name it whatever you want data values um inputs whatever you want and they're going to equal the register schema because that is the type that is valid for each input email that we have down here so email name password and confirm password they must pretty much get checked before getting submitted to whatever API or backend that you want and we do that by making sure it matches up with the register schema so we can do that here and what we could do is we could console log the data let me do that real quick we're going to console log the data this is used client and just make sure everything's working let's inspect console Bret Brett one two three four five six Okay cool so we got email name password password confirmation and the object so everything's working the only thing I don't like is it's not showing password because we don't have the type as password in these inputs a type password wait is it not letting me to it type control oh because I'm not doing it in the input field that's why it's got to be in the input field of course I don't know why I was thinking everything was there type password type password and then for email I'm G to do type email as well it's just another check so if they don't do an email and you have type email it won't submit okay so the other thing too is it's kind of like the whole page and what we have here is inside this form we have a wrapped by card wrapper so let's go to the card wrapper component and let's actually style the card with some tailin so what I already have class name equals so on extra large devices I have a width of 1/4 I might have to change some of this on midsize and up we have a width of2 um let me see yeah it's changing um I don't know if I like it but we'll see um I had a shadow too shadow of MD so it gives like a shadow effect hey is there any way to get business email for free when you have a domain name like resend we can do it but we don't have an inbox um there is no way for you to get a business email for free I don't think so even with the domain um but if you want to do it the recent it's it's actually you don't need a business email like so I actually have a resent account and it's um mine's uh a premium account so if we look at um resend if you go to emails uh where is here docs let me show you real quick and we go to nextjs Quick Start so when you this from email as long as the domain is pretty much the domain name so like say if your domain's voice fusion. so you could have whatever you want here at the front onboarding at voice fusion. even if you don't have that email so as long as you have the domain at the end like atvo fusion. you don't have to add the email it could be whatever you want want so you don't need a business email technically um and you're going to be like well how can I see where the emails were sent like I'm not going to have an inbox to see well you could just email them through a personal email which is still fine I mean even though it's going to be sent from a different email but if you want to see how your email was sent you just go to your dashboard like this and you you could like view your emails so like you just click emails and then you could view will sent no like who will send to so like from onboarding atvo fusion. I don't have that email I never paid for that email it's still sent and delivered but as long as you have this it's like an alias so you can have an alias but as long as you have a domain and then you make sure you obviously verify your domain inside the domain tab because if you don't then you can't do it so those are my two domains I did and if you have a free account you only can verify one domain so be careful for whatever uh domain you want to do but hopefully that answers your question and it's pretty good like I pay 20 a month and 50,000 monthly limit and the free account's like five or 10,000 so it's really good um next thing to is let's look at this this card so this card's like to the left so I kind of want to fix that I want to make it centered um I might have to go into the layout to do that app or I could create okay I know what I could do so since I want everything to be centered here inside of this alt folder I could create um a layout yeah so I could create a layout inside this off folder and everything that's inside of the off folder the layout would actually apply to all of the files so I could do new file oh that's in the components I'm in the wrong folder let me go to the app so the app off and then create a layout inside of there my fault guys layout. TSX am I doing something wrong the default export is not aact component and Page Au SL register huh let me see I think I should be able to still create it so let me try layout. TSX and then it gives me the default export is not react component in alt register I think it's talking about the wrong file let me see and then what we could have here is we could have ra a c e this is going to be the O layout it is going to take in some children and this these children are going to be children react react node oh it's working out there we go that's because okay so they have the children and then this needs to accept all the children because now this layout file I can actually just Center everything there we go cool when if the layout being the off folder I have it in the off folder that's why I was confused because I thought I had it in the register but I didn't put in the register it's actually in the um layout it's actually in the all folder so I have the all and then the layout so it says up here to app off layout off layout so I guess I was just throwing an error until I actually wrot code and actually passed in the children but yeah I wouldn't have it in the register unless I just wanted it for this specific route um but now what I could do here is I'm actually going to create this this as a section we're going to do this with full that should be good for [Music] now um we could like style it better later but for now I'm I'm G to um the section and then we could have a div and I'm just going to surround the children and then it's going to give me room to work with like images and stuff I want to work with later but we're going have to create assets and stuff for this what is the best way to create routes organizations like in previous we use site and inside of that you put all the routes yeah so if you use like parentheses it doesn't count as a route when you want the off folder so that the login and register of the same layout unless you want them both different yeah uh let me first answer your question what's the best way to create routes organization um yeah I probably should have done that let me do that actually so what I can do is um you can actually create this alt and wrap it in parentheses if you want and then still have a layout file there um but yeah if you do parenthesis it just like organizes your routes better without actually affecting your url url um and then obviously if you use brackets it's usually like a catch all route um but other than that yeah you could use folders and then like for locals question when do you want it in the all folder so that login and register have the same layout unless you want them both different I technically do have the layout and the off folder so the login and register are going to both be applied with this layout. TSX file so technically the children are this page and this page that's what the children are and then I'm just styling it here and this should change this style here so like I'm GNA have a h I'm G to have a height of screen I'm going to put flex item [Music] Center justify Center see now it's moving like my register page perfect and then um I think that's it like that that's just a center yeah that works and then it should work for the login route too and then we could use the card wrapper for the login route as well but um yeah it looks pretty good um let let me just finish the on submit and then I'm probably going to call it for the night obviously I'll come back and work on it again tomorrow and then we can finish up the Au and database as well I'll make sure everything's a little more organized as well because I'm getting a feel for the live so I'll try to make make it more valuable for the next live as well how do I monitor my sites for traffic um I just use Google search console and Google analytics I mean there's a a lot of tools out there that are pay tools but I don't I don't use anything crazy and Google analytics and Google search console are free So like [Music] um yeah I'm going to go live tomorrow maybe not for as long because tomorrow for me is Friday but I'm going to go live and I'm at least going to finish up the authentication because we're almost done with it and I'm gonna re like go over the authentication I'll probably create some videos as well to go on the channel that are a lot more concise and not like a lot of fluff but [Music] um let me create the on submit real quick let me go back to the register uh let me go back to the register where the hell is it like I don't even know where the register is that's how fried my brain is right now components register form okay oh okay so we constant log the data it works so we can do the set loading to true and let's see if that works it's not because yeah okay so we're getting the good thing with um Zod and the forms from shatan it just look at this it doesn't even let me submit it it just gives me errors invalid email name is required password remotes be at least six characters long required like it's it's nice um but we're going to do the password and confirm password check on the back end and to make sure everything is working good so we have that and then we could just console log this have the console log of data and then I just want to make sure everything's good and then I'm going to work on the backend part starting tomorrow okay so register and it should go to loading loading and it's just going to stay loading because we don't set loading to false if we inspect the page we have an object with the email name and password and password confirmation okay so just to go over what we did today just for a quick overview what am I using for the backend I'm just going to use nextjs is um either I'm going to use a server action probably server actions in a separate file or you could use API route with nextjs so I'm just going to use nextjs as full framework um um do you want to change color to Black for label when error occurs rather than red uh let me see do you want to change the color to Black for label let me see I'm G to test it out oh you're talking about like this label right here like email name password confirm password do you want CH color to Black for label and er rather red uh I mean yeah I think actually I think that would be better I don't form label do you know how to do that because I think by default it's doing that for me based on Zod I'm just closing up a few things here do you know how to keep that Label Black instead of red yeah it might be in there you're right let me see uh form label here we go errors should just be text destructive um I'm just going to put text black and let's try that there we go it works yeah it looks a lot better if there's an error just put the text black yeah you've made some good points too is it hopefully I'm saying it right I don't want to Butch your name harsh harsh oh man I don't even want to harit harit is that how you say harit harit loco blanket tub correct cool okay cool um make sure you join the Discord I think I sent the link in here a few times so make sure you join it but um other than that I am going to call it for the night I will be live again tomorrow for at least an hour finishing up all this but I would definitely like if you could join again that' be awesome definitely good conversation and if you have any projects anything you want me to help you with or anything we could just bounce ideas off of just let me know man yeah no problem man good night all right I'll talk to you soon all right thanks everybody for joining the stream um oh locco you're still in here too it should I only had one viewer oh three now never mind um Loco if anything yeah just hit me up as well I'll be on tomorrow um make sure you guys join the discords I could respond way quicker in there but I'm going to set up another not notification make sure I go live tomorrow um it will finish the authentication we'll finish and we'll probably start working on the navigation bar you helped me create oh were you following along while I was coding it you created off Pages as well did you did you follow along creating all the pages with me or did you create your own separate okay yeah you could do that I'm gonna I'm gonna do that tomorrow though um so if you don't figure it out just join my live tomorrow okay I'll be going live probably like 1100 p.m. Eastern 12 midnight so if you don't figure that out that's exactly what I'm doing tomorrow I'm going to be using um the nextjs full stack framework though so I'm going to be using their back in but yeah everybody who joined appreciate you guys joining the live um and see you guys in the next one

Channel: Brett Westwood - Software Engineer

Views: 1,944

Keywords:

Id: e34dffczgvc

Length: 201min 8sec (12068 seconds)

Published: Fri Feb 23 2024