🔴 Let’s build Google Translate 2.0 with NEXT.JS 14! (MS Azure, Clerk, MongoDB, Mongoose, OpenAI)

yo what is going on Papa welcome back to another video on this channel today I am bringing you one of the most underrated powerful builds I have done on the channel before next year's 14 Azure not just one not just two not just three I think we have four services from Azure today and everyone kept drilling me about in the comments so your boys only gone ahead and used mongod DB today and we're going to be using mongus with that alongside it cler for authentication media stream to go ahead and record from the users input their mouth and we've got loads of good stuff server actions route handlers caching web speech API typescript tail in CSS oh all of that all of that good stuff in today's video so if you're excited right now go ahead smash that like button and let me know where you're watching from I'm about to give you a demonstration of the Google translate 2.0 clown get ready guys this is a collaboration with Microsoft and cl themselves so huge happening here at the papa F check it out guys Google translate 2.0 boom we've got this is a proper awesome one look at that we got USA in the house what's up guys all right here we go got the Google translate clone look at this guys firstly you know I had to do a little homepage I didn't spend too much time on the homepage but there you go we've got beautiful homepage we can go ahead and translate let's go ahead and translate something right now to German say hello world and I don't even have to hit enter we're using bounds to go ahead and get this to work look boom hello world and you might be wondering but Sunny aren you just using the Google translate API well no I'm actually using azure's AI translate service so lots of powerful stuff behind the scenes that your boy is going to go ahead and make easy for you oh that's it I just saw a flood of users flying in right now we've got Rwanda Russia India what's good guys I can see the Manda station goes shout out H good to see you here man what is up he goes are we going to use are we going to use the API yeah we're going to be building our own API so route handlers I'm going to be teaching you server actions and all that stuff is going to be backed up with caching so yeah this is this is going to be a mad build right and on top of that your boy's gone ahead and done something even cooler so check this out right I'm going to go ahead and just say something like yo what is good guys this is a live test of my Google translate 2.0 clone and we're going to see if this works right now check this out I go ahead and click stop and then it's going to go ahead and pass that to whisper AI went ahead popped it in my input box and boom just like that we have a live translation out on the screen and I took it even a step further because I don't even like to do things half measures and we even go ahead and we can speak it out so okay one second I need to actually go ahead and pop it in my where is it h here we go all right now you guys should be able to hear that was I got loot okay now don't don't don't rate me on the the robot's voice yeah I I I can't determine how good it is at saying it anyone who's German in the crowd let me know how this sounds all right ready for this Live Test means Google translate 2.0 CL and we OB jet function so there you go guys that seems to work so we're going to be doing that anyone German go ahead shout me out all right but otherwise guys loads of cool stuff over here right now I'm going to show you all of this is not being loaded the traditional way this has be using server C is using revalidate tags to go ahead and revalidate the data efficiently so much cool stuff is happening right now salana goes hey Sun I've been learning a lot of cool AI stuff from you oh my God if you're enjoying the AI stuff it's about to go wild on this channel I'm telling you I got loads of stuff coming look at this let's go ahead and delete something right here go ahead and delete boom everything works perfectly this is all using mongod DB so yeah tons and tons of Cool Tech to go ahead and showcase I'm going to go ahead and Shout you guys out right now because this is absolutely crazy the chat is popping off we got Kenya Pakistan Somalia Estonia worldwide look at that Bangladesh and Nigeria Kenya UK US Somalia German oh Germany that's J what's up man yeah and that's it look at that someone goes it sounds good in German that's it okay we're good we've got sahib Singh yo what is up man my designer is in the house Ethiopia Algeria God guys this is international check the live chat if you're watching the replay right now and guys if you are watching this there's like hundreds of you watching right now destroy that like button to push this video up that's it I'm I'm going to just pause here for a second until you destroy that like button like And subscribe and then we're going to go ahead and build it because I put a lot of work into this build and we're going to go ahead and actually teach you all of it right now and of course guys fully mobile responsive so I don't do half measures here everything's responsive and I want to showcase to you guys we even have authentication so look at this guys we're using cler to go ahead and get things set up let's go ahead and sign out right now we've got protected Roots so you see look at this sign in to get translating and boom ooh you might have wondering this ain't how clerk normally looks that's because we're using clerk 2.0 so we're using clerk core 2.0 and I'm not even just saying that as a hype word this is actually their brand new beta core 2.0 I'm going to go ahead and sign in right now so I can see people smashing that like button that's what I'm talking about Alex Thomas Wales in the house what is good dude look at this I'm going to go log into my account so we've got Google authentication powering everything today and just like that it loads up your messages and if you're wondering those messages are for that specific user so everything is going to get covered now what I want to mention is before we get started your boys hooked you up with an unbelievable setup today because everything that I show today is actually for free so if you go ahead and hit the first link in the description you're going to reach the Microsoft sign up page now all you need to do is go ahead and pop your name so go ahead and do the following pop your email your name and all that good stuff go ahead and put your country in and then for the company you can just put your name if you don't have a company go ahead and take all of this right now so I'm going to go ahead and click okay actually I've already done this a couple of times so I'm going to click okay and then submit once you've done that you will go ahead and sign up to the form click okay and then you've got the Google then you got sorry goog then you got the GitHub code Reaper and you've also got access to my Zer to full stacko course my Flagship course where I go ahead and show everything guys this is where you can go ahead and get the co uh code for today's boat so if you click it you'll see we've got all of the code for today's boat so I want you to go there right now and then smash the comments right now saying that I have gone ahead and already filled out that form because want you to get the code for absolutely free so do that and you can go ahead and get the code for absolutely free now before we jump in as well I am covering today's video with a lovely collaboration with the guys over at clerk so we are using clerk to manage all of the authentication it is by far the simplest authentication I've ever come across I absolutely love clerk you've got all different types tofa you've got email and SMS you've got magic links everything that you could want in an authentication provider these guys just came along and were like yeah got I got you on that right so they've gone ahead and made it so easy it's absolutely crazy so yeah lots and lots of stuff now before I dive into the Azure Tech stack I'm going to go ahead and break down the text tack on today's video okay remember if you're watching a replay of this all of this is going to be go going ahead and time stamped afterwards so you can go ahead and check that out afterwards right so let me go ahead and oh my God my pre-workout is absolutely slapping right now okay so that's I always do that to little test okay so we're going to be covering today's build with nextjs 14 so we got some goodness there we've got Microsoft in the house so we've got Microsoft Azure the whole Azure team we've working together for ages and I tell you what these guys are absolutely awesome in the tools that they provide we have mongod DB and guys the cool thing is is that we're actually going to be running mongod DB off of the Azure Cosmos DB so it's actually the Osmos Cosmos DB so we've actually got the cosmos DB from Azure so this is going to be from aure and then we're actually running mongod DB on this database so lots of cool stuff happening there and go ahead and make it you know actually you know what I'm going to do I'm going to make this um yla is my good little screen for this there we go and then what I like to do is draw on the screen so you guys can see so we've got Cosmos DB we've got lots of good stuff there we've got cler for the authentication sides of things so we've got cler and we're actually using the core 2.0 right so the brand new core 2.0 so I'll show you how to go ahead and upgrade to this right there is a few steps that you have to go ahead and do but we're going to actually be touching nextjs middleware alongside this so you're going to be able to protect Roots do all of that cool stuff and then also alongside all of this I always get the question Sunny are you using react yes react is literally the thing that is underneath all of this because obviously nextjs 14 is simply a framework for react so I'm going to keep on breaking it down because I heard some of you say son you move too fast in these videos so I'm going to go ahead and explain everything now DB is actually going to be we're going to use a library called mongus mongus will allow ow us to interact with our database in a more userlike manner so it's going to be a lot easier on that front of things right now that that's not all guys doesn't end just there right your boy's gone above and beyond for this build Frank I see you man what is good dude I can see you in the chat popping up always popping up when it counts man good to see you here my arrows are they suck right next js4 we've got server actions so if you've been wondering how to use them this is the build for you and now when I tell you we're going to be using them in such a powerful way today it's crazy I know the build May seem like how can he use all of this in one build but I promise you it's nuts how much we're fit in this build right we've got server components so the majority of the components today are going to be server components with the addition of client components so I'll show you how to use client components and when to use them right so it's very important as to basically when do we use them right cuz sometimes you might be wondering don't I like I don't know when to use it might maybe I just make everything a client component don't do that learn how to do it the correct way and then you can go ahead and build on things right for react we even going to go ahead and use the debounce function so if you're wondering how to use the debounce this is going to be pretty cool whoa and morage already in with the donations what's up man he goes attendance like the build looks sick what's good man Gman Sam goes Sunny I'm also in the chat my name is sad I see you dude right and then on top of all of this to reduce the number of bugs we've got typescript in the house as well so typescript like like this is mad you're going to learn all of this in today's build what crazy and on top of all of that guys we've got next JS caching so you're going to learn about all the different caching rules you're also going to even learn about root handlers right so you're going to be able to build your own API a m points with with nextjs rout handlers so tons and tons of stuff happening going on right now let me go ahead and mute that there he comes in otherwise it pops in Frank goes really looking forward to clerk saw this off platform oh my God Frank you haven't you haven't used clerk clerk is sick we're going to be covering all today it's mad all right now let's dive into the actual power of today's build Microsoft Azure right so this is a collab with Microsoft Azure so lots of cool stuff happening with them but let's dive through the services that we're using today so first off we have the Azure open AI service right well actually I'm not sure if we're actually going to be diving into this too much but I have talked about this in tons of my different builds and you can go ahead and check them out yourself but actually the one that I want to talk about more so is the Azure AI translator now the Azure AI translator is how I'm going ahead and translating the text that goes into my input field so if I was to go ahead and type in something like YouTube is awesome uh papa is my team let's go I don't know what I wrote there but anyway there you go and then check this out right so it go ahead and it'll debounce it and then it goes ahead and translates it so all of that is actually happening with the Azure AI translator an AI service for Real Time document and text translation so I'm going to show you how to launch your own instance and remember guys if you sign up with that link in the description so the first link in the description you will will go ahead and actually be able to go ahead and get started with Azure and go ahead and get yourself free 12 months of the most popular Services plus $200 worth of free credit so like like at this point you're like yes use that right and also Clark 2.0 someone just said is it free yes it's absolutely free so you can go ahead and get started with that as well right so lots of cool stuff happening and then I took it a step further we go ahead and actually interpret my voice with the open AI whisper model so in this case if I was to go ahead and speak into this so let me go ahead and mute the music right now and just say for example like I said this is a quick test and to see if my translation is working or not I actually started speaking before but there we go like I said here there's the quick test of my translation working on but there you go anyone who's Spanish validate that let's carry on nice so look at that so much stuff is happening right now crazy crazy crazy and then we have Cosmos DB now you might have used this you might have not but I always show the same databases so I thought let's mix it up a bit and you guys are always asking for mongod DB so your boy came through through with Cosmos DB so Cosmos DB on Azure scalable platform I'm going to show you how to go ahead and plug in and then I'm even going to show you how to go ahead and navigate your collections and documents inside of your database the easy way okay Fran goes the Spanish transation is legit that's sick man good to see it right so we got mongodb mongus and like I said you at this point you're probably wondering what the hell it all of this in a build this is going to be so hard well firstly all of this is free first link in the description to go ahead and get started secondly if you go when you get started with clerk second link in the description all of these links help support the papa fam so I would massively appreciate if you use those links the first one is the most important one the second one is the most important one they are both the most important links ever go ahead and smash them right now sign up and let me know in the comments once you've done so and I want to mention as well guys it's okay if this is a bit intense if this is a bit tricky if this is a bit like you know on the scary side that is why one I will run through everything in today's video for an absolute beginner so you don't need to stress so much honestly it's okay it's supposed to be difficult but if you want to take your skill set to that next level then head over to papa.com course the third link in the description this is this is sick J I see you in the corner right this is our Flagship course and I want to go ahead and just scream about this because honestly I can't stress enough how much mentorship changed my life whether it's the gym whether it's coding whatever I do I have a mentor at the Forefront of my development and this is what we've gone ahead and built with zero to full stack hero it's not just the course it's the world's best developer community over thousand students inside this course all we do is teach the latest and greatest and best stuff if you see my streams and you see the energy that we have in these streams imagine what is going on inside of the course right honestly all we do is constantly level up week on week on week this is what 0 to4 St C is about so go ahead feel free check it out third link in the description and if you're from anywhere in the world you can go ahead and get purchased parity Power by checking out if you get this little you know icon at the top of the screen so go ahead check it out with that said guys I think it's time to go ahead and smash this build quick little water break before we do cuz that was a huge intro but yeah guys absolutely massive build smash that like button before we get started but right now let's go ahead and jump into it so first things first I'm just going to go ahead and say let's get started with the build and I want to show you as well I forgot to mention this bit as well so not only does it speak out so if I go ahead and do this bit right now exclamation point commen con conru so not only does it do that but we've got the authentication side now I want to mention as well clar is so cool like when I tell you guys that this is literally one line of code to get that in it's literally one line of code right once you've got it all set up and everything like that it's it's so good and yes somebody actually mentioned as well Shaden we are using shad today I completely forgot to mention that so yes I'm going to add that to the text app right now so you can go ahead and feel free to screenshot this if you want to Shad Cen I don't know if it's Capital there you go but Shad CN and of course that means that we are using Tailwind CSS so Tailwind CSS is in the house as well so all this goodness you're going to learn right now are you ready for this if you're ready for this subscribe and destroy that like button because I see just as many like you know viewers as likes right now I want to see that like button go way above so destroy that like Frank goes wait that Spanish translation it says build like construction okay you know what let's give it let's give it the benefit of the doubt it's it's it's AI it's getting there right so here we go we're going to go ahead and cover this now at the Forefront of all of this like I mentioned before the majority of this is powered by Ai and I'm not just saying it because it's a buzz word but literally as sure Cosmos is scaling you know based on like it's got a very clever AI little side to it you can go ahead and read about it yourself then we've got the AI translator then we've got obviously the open AI with model which transcribes our te our speech into text so so much to look forward to Let's jump into it let's go guys so first things first boom I'm going to open up a separate screen well I'll show you on this screen actually I'm going to go ahead and type in warp I've got warp but you can open up honestly at this point um any terminal or something I like to go ahead and CD into a separate directory so let's go ahead and do it right now CD documents builds and then over here I'm going to go ahead and do MPX so somebody goes I can't sign up with any my card details but sign up is disabled um I'm not sure what you're talking about but feel free to email us at um look at this PO these bills Oh my days 100% man um but feel free to email us at tea.com if you need a little bit of support right but here right now I'm going to go ahead and type in MPX create next app and then I'm going to change this to Google Translate oh my God I actually did yeah YouTube clone okay go ahead and hit enter and this will get us set up with a nice little starter template so in this case I'm going to click okay to proceed and then you can go ahead and just all the defaults are completely fine so I'm going to cck enter on everything this is awesome guys your energy today is so sick Jan says Sun you're the best teacher in the world much love from Ethiopia appreciate you dude that's what I'm talking about the music as well is banging today so I've been changing up the playlist if you want that link is in the description check it out okay so Alex says whisper is a a bit slow for me especially speech mag is pretty fast okay so yeah it really depends would say if you've used it three times in a row in a minute then it actually um tends to rate limit you so you have to increase your quota that might be why it's slow so not many people know that but in the beginning that's why it's actually limiting okay so while that while that's when that's done you want to CD into the Google translate clone I've actually got the YouTube clone so call it whatever you want once you're in I'm going to do Code full stop to go ahead and bring up my code editor the manw station goes Tut your tutorials are just lit I love that that's my energy that's what we try and do Alex goes I love seeing you back on top form Sunny thanks for these Speedy aners oh I appreciate you dude that is what it's about man I'm full energy I'm back in full swing we're going to absolutely kill this one all right so this is our next js14 template go to app page. TSX and then we're going to go ahead and spin up our app now I'm going to go ahead and shut down the previous app I'll probably start it up on something um a bit diff oh actually okay I have an idea quickly loc one I have to quickly change one thing I'll change it afterwards because it's not going to run on the correct anyway okay ignore what I just said let's go ahead and start mpm run Dev right now with this in mind AMA goes hello Sunny I I'm seeing you guys if you're if you want me to shout you out this is the time cuz I'm waiting for this to load all right so now HTTP Local Host 3000 all good now what I like to do guys is open up a second screen let's go ahead and pop this over here boom and then I put this on my left put this on my right and I usually make it a bit smaller like so and let's go ahead and do that and then we've got Local Host oops local poost 3,000 okay there we go so you should get this screen right now okay once you're on this screen command J to hide your terminal command B to hide the sidebar I want you to clean things up so page. TSX is the home directory imagine this is essentially representing the index right uh M says are you reading these yes I am as well as coding so inside the main tag we're going to delete everything so let's go ahead and get rid of all of that that boom H1 say hello world let's go ahead and pop that in now you should see this all good we're going to get rid of this and before we get started with anything I'm going to make this a lot easier right now for you all I'm going to go ahead and actually set up Shad Cen straight off the bat so we're going to go to Shad cn.com or it's actually ui. shad cn.com and we're simply going to go to the installation panel nextjs over here and then you want to go ahead and type in MPX shadan like this just copy that it's easier if your MPX isn't working by the way you actually need to go ahead and I know I saw the comment on the leak thing it's funny right if it's not working all you need to do is install node to get it set up so npx shn in that in that latest and then actually what we can do is we can pop this open command J to pull this up now while one of your servers is running here I want to split terminals on the right hand side I can install things right so what I like to do is just keep this on the left for just inspecting what's going on and then MPX shads the end at latest in it right so go ahead and do that someone goes uh I saw a nice comment Sunny is in his Luis Suarez Prime form hey that's that's I appreciate man I appreciate that awesome stuff limit ify willing to collaborate in the near future what is good dude email us at teer.com let's go ahead and do this boom and then we've installed all our dependencies there we go right so that's it for now and you should see that the background will turn to White right so this is because it modified a couple of the global CSS files and not good stuff okay so now we're in a bit of a prime spot to get started so you want to get rid of that and you've got hello world in the corner so this is where I want to be right this is where I want to be in the beginning before we get started with anything and I want to showcase to you how we can go ahead and get you know set up the correct way so first things first I'm going to introduce you to nextjs routing so in nextjs 14 or 13 onwards the way it went ahead and changed was you have folder based routing okay so in this case we're actually going to have a folder which represents the translate page I'm going to go ahead and actually run up my code code on another terminal right now so you guys can see it give me one second cuz what I have to do is I have to change my Local Host uh for a quick second to okay so I'm going to go ahead and open up my demo app on this screen right here and we should be able to see everything on this because I'm going to use it as a reference okay so I'm going to have a homepage and then I'm going to click a translate now button and on that translate now button it should take me to our translation page okay so let's go ahead and do that right now so we're going to have a for/ translate page so how do I have a for/ translate page well the way you do it is you typically go ahead and do a new folder called translate and then inside of here so this is going to represent oh what have I done no don't do that yeah so inside of here we're going to have another page. TSX this is the standard way to go ahead and do things and then inside of here I'm going to start my page up by saying RFC and then boom boom and we're going to call this the translate page right translate page like so now if you're wondering how did he just do that snippet right how the hell did you do that well go to your you know your um extensions type in es7 and the first thing that you will see well it's not really the first one but it's down here I believe yeah it's this one I want you to go ahead and install this one 11 million I swear to God I am like a reason why this get so many I've told everyone in every video to go ahead and download this so those this guy needs to shout me out at some point cuz I've done you a favor but that's how you get the Snippets right so you want to go ahead and do that also B Mercy hello s I'm the Granddad 70 you are so great dude what is up awesome to have you in our stream thank you so much for coming and uh yeah spending time here man I appreciate that so at this point we've created a for/ translate page so if I go to for SL translate we will see translate page okay so now you can see it's as simple as that to get page rooting that's all you got to do now I'm going to create a link from the first page this hello world page which is just my index page all the way to the translate page and to do it is fairly stra forward right all we're going to do is simply go ahead and type in a link tag so I'm going to type in a for/ link and you see we import next from link tag uh like so and I'm going to do it like this I'm just going to type in uh this's is say translate now translate now and in our link tag we have something called href and that will go to the page that we want so Translate There we go boom okay just like that now you can see translate now so at that point all you need to do is click it and it will take you to the translate page so now we have p rooting already set up in like 2 seconds right super easy to go ahead and get working um if you guys are enjoying this right now again smash that like button already over 100 likes let's keep on going right we're going to get to a 500,000 this video I Know It CarX cuz not going to lie but your videos keep getting better and better reason why I subscribed and then check out your course soon that's what I'm saying dude I appreciate that energy that's what it's about the pap F so good lad right so we've got the translate now happening so once we're on the translate page we're going to start doing what I like to do the most right so first if you're wondering how I'm navigating between code files without opening this I do command p and then you can go ahead and type in for example that page and you can see translate page so there a quicker way as opposed to doing this so inside of my translate page what I'm going to do is firstly in order to do anything on this build I really kind of need to get the authentication set up so we're going to set up clerk so I'm going to show you how to do that right now but I'm going to show you a pretty interesting way because we're going to set clerk up and then I'm going to show you how to up upgrade it to clerk core 2.0 the brand new beta sort of internal upgrade that they've released okay so I'm going to go ahead and do that right now and show you how to do it so first things first second link in the description will take you to this page okay so the second link in the description will take you to this okay now what I need to do is CL simply click on start building for free and this again if you go through that link it does help me out so I appreciate you if you do that now click on Google or whatever you want to do just sign in so in this case I'm actually remember what what account I've signed in with but let's just do uh my personal account for now okay now once this is up we're going to go ahead and see so in this case yeah I've already set up a few things but I'm going to go ahead and create a new application okay so I'm going to click on create application and we simply need to give it a name so in this case I'm going to say Google translate YouTube clone okay and this is what I love about cler now cler really like when I tell you I've used so many different ways of authenticating and cler came along and just answered every single one of my prayers they made it so easy to set everything up and I love this little uh little coding reference here but what you can do is all you need to do is simply tack on whatever you want so if you want to support Facebook you do that if you want to support apple you can do that and if you go ah and support a couple of them you'll see you even get a nice little change in the UI right so all your popular sort of you know login providers they have support for even things like notion and metamask so any of you crypto lovers out there go check it out right so we're going to Simply do email and Google for now create application and my favorite thing is it really does make things so much easier now somebody asked next or versus clerck if I'm totally honest with you clerck through and through so much easier you're going to see just how simple it is right now okay so at this point now we're going to go ahead and add in our environment variables so what I want you to do is copy this code and go back into our code itself and then command B and at the top level right here so at package Json I want you to create a new file and I want to call this one EMV dolal right now I'm going to go ahead and paste in what I just got went ahead and copied now the reason why I'm not showing you this is because it's going to go ahead and actually you know reveal all my secrets on the screen so I'm going to go ahead and hide that right now so this is say secret there we go okay so what you should see now is this so you should have pasted in what you had previously on the screen so copy this and then paste it in here right so I'm going to go ahead and undo so my secret goes back in close that that now and then we've got our environment variable set up so EMV do local is what you needed to do and nextjs automatically will import that into our code okay now once that's done we're going to go ahead and continue to the next a skyp because I'm showing you just how easy they make life right so once you've done this we need to install clerck so let's go ahead and install clerck into our project so let's pop that open command J and simply install the dependencies that we need now to make life easier always set up your um you know your situation or your up in a nice clean way so you can go ahead and navigate that spell all right so install cluck and then we've already done the environment variables and then we need to add a cluck provided to our application so we typically do this at the top level of our app so inside of our layout folder over here this is essentially the starting point of our application so you can modify your metadata all that good stuff here but what I want to do is actually wrap the entire app with something called cluck provider so just like so boom and then you want to pull it in just like that now that's literally it right at that point you've gone ahead and you've actually believe it or not you've actually wrapped it around with a higher order component which allows any child component including any of our Pages now access to Inner you know functions that we may want to use right so in this case now we've gone ahead and done that but we need to add something called middleware now middleware essentially captures every single request that comes through our app so when people visit a page that is a request to get a page so if we can intercept every request we can go ahead and basically tack in our authentication and then control the authentication flow so I'm going to show you how to do it now here's the interesting part right so we're using the clerk 1.0 documentation right now so the reason why I'm going to show you this is because I want to do this and I'm going to change it to clerk 2.0 okay so we're going to go ahead and copy this at the time that you're watching this it could already be by default 2.0 so just bear that in mind but I'm going to show you right now how we can do it now by default by the way guys it you can actually um everything is actually protected by default in the in clar 1.0 so uh we're going to go ahead and create a middleware so at the top level we're going to do middleware oops middleware dots file okay and then we're going to paste this in so you see or middleware from Clerk and then you can see a bunch of different options right now and also you can see public rout and so forth so if I was to now go ahead and refresh my page let's see what happens guys it should automatically take me to a login page amazing that is because by default every single page is protected so if I was to go ahead and go uh remove this for example now if I visited my Local Host it should be completely fine however the second I go to a translate page that by default will be protected because it's not part of the public routs okay so in this case now if I continue with my login I will log in and so forth but I don't want to do that just yet I'm going to now show you how to go ahead and change to cluck 2.0 so what I want you to do is go to essentially just Google clerk core 2.0 so I'm going to show you from scratch go ahead and do clerk 2.0 you'll get this nice beautiful you know blog post you can go ahead and read it they've got some new UI components some new middleware which is way simpler and they even have an awesome upgrade guide okay so there's a lot more to it you can go ahead and check it out but in the end of the day the better user experience is out of the box from this right so we're going to click on upgrade guide and we're going to go ahead and see this uh addition right here so they've made it very simple for us you you can simply go ahead and actually either install it like so or we can do the CLI upgrader so I'm actually going to go ahead and firstly install the nextjs beta right so let's do that right now I think I'm not sure if this command actually does it out of the box but we're going to do it separately just to make life super clear all right so inside of the terminal right now we're going to go ahead and do mpm install cler next year at beta now again at the time that you're watching this clar 2.0 could be part of the standard stable release so just worth checking but if if you done it correctly you'll see that we should start getting some errors now okay and that's normal because we've changed our packages so this will now be I believe in server for example okay now just to make it super clear inside of package Json if you look at my clerk version you'll see 5.0 beta 3.35 right so next up we're going to do the CLI upgrade helper now I believe this may help out with some of the things so let's just go ahead and run this and see if this can give us a bit of a help so let's go ahead and do that right right now see what happens uh okay to proceed yes so let's see if this uh maybe does any changes or whatnot but I want to show you the whole flow right so depends on how big you know you might have cler already set up inside of your app so um there you go right so there you go it's done uh I'm not actually sure fully what that did but um in this case it should catch the V Chang okay so this typically will go ahead and you know run through your code base I believe okay but the next step is the middleware architecture so we now we basically go ahead and simplify things a lot more right I'll show you this is how you actually apply the protection so now you can protect on a page itself which is a lot easier all right but I'm going to show you how we're going to actually set up our middleware now the middleware is actually a lot simpler than you might think so I'm going to copy this middleware and simply replace mine and notice how we now import from server slightly different change right so we're going to go back into our code and we're simply going to paste this now and you should get rid of all your errors now here is where we can see some examples of some protected routes okay so or protect and you can protect based on specific rowes in this case I don't really want that so I don't really care about that so I'm just going to go ahead and comment that out and the same for you know protect dashboard routes to logged in users only and then you can go ahead and match against dashboard so in this case I could by default say let's protect against all of the translate roots and then we can go and say is translate is uh let's just say is um yeah okay is translate root so in this case now this will protect everything from translate forward right but again I don't even want to show you this way I want to show you how we can do it in the page level as well so I'm going to make it even simpler for everything and then this case as well we're going to have a matcher over here right so again pretty straightforward I actually want to by default allow my um translate page to be um you know public as well so in this case this is what we're going to do for our setup okay so first things first now you can go ahead and clear this up so if you really wanted to you can go ahead and get rid of all of this make it super clean and get rid of this as well and there you go that's your middleware essentially right you don't even need these if you're not going to use them but I'd like to go ahead and show you in case you want to go ahead and you know protect on a different level but that's your first step now you should be pretty much good to go right so any kind of import you know that you might have you may have to change it to nextjs to nextjs server and so forth right now there are a couple of changes when we actually come to use the application so I will go ahead and run through those as we're coding today's build right but in the meantime I think we're pretty much good on that front right I think now we can just start using the thing and honestly it's way better in my opinion right cuz you can protect the page levels do a lot more intricate cool stuff and I think this is the way to go so they're definitely forward moving okay so heading over to page 4/ translate let's go over to our page right now now if I want to protect this page right how do I go ahead and make it work well first things first let's just see right now is it protected or is it not so if we head over to this page it's not protected I'm not logged in right now but it's letting me hit this page so how do I go ahead and protect this so that only you logged in users can access this page so at this point what I do is simple right Remember by default everything in next year 1314 onwards is a server component by default unless I say use client at the top of the file so in this case we have a server component which I'm happy with and then we're going to type in or and you see I import it from next to or and I just simply write or protect now guys this will protect the page and if I try to access you know my Local Host for/ translate so you guys can see right there for/ Translate boom it automatically protects that is how you can do it at the page level okay so absolutely really really nice stuff now bass M goes I hope your health got better thank you so much for checking in on that I hope you're enjoying the Vlogs and yes your boy is healthy as ever tou we're good um but I'm doing well thank you so much right we're going to go ahead and L in now to test our authentication flow so I'm going to log in and we should see our translation page once I'm pass this point so just like that guys in a matter of honestly minutes we have all of our authentication set up with page protection per R right R right absolutely powerful stuff and you can protect at the API level the server Action level it's just so good right and it's the way that it should be so shout out to Clerk and especially the call 2.0 release those guys are smashing it second link in the description to get started remember use that second link it does help the channel while it helps out the puup fam supports me in doing more of these videos so feel free to go ahead and check that out okay now at this point I want to get the users's ID to make sure that they're actually signed in or not right so in this case they will be signed in because they've made it here so how do I get the user's ID well I can go ahead and actually get the user's ID by doing the following I can destructure it from the or object so when we're on the server side we can actually go ahead and tap into a bunch of different things now if I go ahead and do control space bar you can see I get a bunch of things here I get the session the user ID the users's you know role and actor and so forth but in this case if I just do this and I say translate page and I pop in the user ID we should see that my user id pops up on the screen right so we get assigned a user ID accordingly and if I was to go into my dashboard right now on clarck we should see that user is actually registered so if I go to users on authentication I go to let's type in users here we should see Sunny if I click into me we can actually see my user ID so 2 e8j 2 e8j there you go so we have our user authenticated and what's nice about this you can ban users in bate you can do a lot of things from the dashboard and you can go ahead and manage their account so really really nice right now how can I go ahead and set up a few things I want to do such as this how do I get that right that's so nice so let's go ahead and sort this out right now so first things first we're going to go ahead and actually add in our header so I want to go ahead and just pause here for a second and we're going to go ahead and do our header so the way I like to build if you haven't worked with me before going into the top level and I like to draft things up so we've got the HTML the body and at this level I want to have a header so I want the header to always be rendered out no matter what screen I'm in right in addition you see how here I have a Max width constraint applied so let's go ahead and remove that you see how over here I have like a Max width constraint right and then that is basically going to go ahead and make make sure that it doesn't use up the full width it keeps this nice like Center element in Bay right whereas the header is full screen so what I'm going to do is the header can be its own element but around anything beneath that I'm going to have a Max width constraint so I'm going to have a Max width Max uh width of 6xl and guys we're about to smash 200 likes destroy that like button if you haven't already I appreciate you guys so much that Max W 6xl MX Auto and this will go ahead and enforce that you know maximum width and then it will Center it by automatically assigning the X margins okay now for the header component we're going to go into our components we're going to create a new component called header. TSX boom RFC and now you've got the header right so for the header I'm just going to type in I am a header just to clearly showcase that this works and then we're going to go ahead and pop in the header like so if I go over here and I import it you can see boom like so okay hit save and now you can see I am a header pops up now doesn't matter what page we're on if I'm on the homepage so if I go to my local host see the header is there and if I click on translate no matter what the header will stay there now which is what we want okay so in the header we can go ahead and proceed to build out as we want to so I'm going to keep the header as a server component and here I'm going to go ahead and get the users's ID from the authentication right so as you can see now you can start to see where everything TS in really nicely now this is server component which means we use the or object right tibero bril goes thanks for the amazing content I appre apprciate you dude you're absolutely welcome right we're going to make this more SEO friendly by telling everything that is you know a header you know block right here inside the header block I'm going to have a div and this div is going to represent two things we've got the logo on the left hand side and then we've got my user button on the right hand side so here we're going to have essentially a link with a let's just go ahead and build it right now so we're going to have a link this is a nextjs link and this is going to Simply have the um home button inside of it right so not we're not going to do that we're going to have H which takes you to the home screen and then inside of here we're going to have a nextjs image tag now if you're wondering how nextjs image tags work feel free to check out my video where I explain all of this in detail if you just type in Sunny s nextjs image you will go ahead and get that video or if they're watching the replay Jay will go ahead and make it pop up somewhere around the screen right now so you can go ahead and check that out right Jay's like thanks honey giving me more work so at this point we've going to have I need to give give it a oat a height and a width and then the source the source is most important now fortunately for you guys I've simplified things a little bit right so I've gone ahead and given you a shortened URL so you can go ahead and do this and then I'm going to give it a little bit of styling to make sure that the aspect ratio stays the same by a doing object contain fix a height of 32 and make it a cursor pointer so if I go ahead and do that now we'll get an error the reason why we get an error is because next year's image components actually go ahead and do a little bit of image optimization now if I don't whitelist the domain what tends to happen is next year what will happen is next year will be like whoa whoa whoa I don't trust this image so I'm not going to optimize it because that takes computing power which you're probably paying for after a certain point uh which so we basically need to whitelist certain domain so that way we're basically giving it permission to say okay you're allowed to go ahead and optimize from this domain so we're trusting links. rea.com by doing the following we simply go to our next config and then if you actually click into this error message it will give you the code that you need so we're going to go ahead and copy that right now pop that in like so and then in here we don't care about the path name or Port we're simply going to go ahead and pop in the links like so so this host name that they give you is the one that you can go ahead and do right so if we go and pop that in now we've gone ahead and whitelisted that image domain right so tibero says I love I'm loving the Vlogs nice dude yeah the Vlogs are a really good way to get personal with us so I'm glad you're enjoying them hit refresh after that and you should see that the image will now load on the screen so there you go Google Translate boom on the screen great stuff okay so once we've done that I'm going to have a another section now here I'm going to basically do a Turner operator I'm going to say if the user is logged in so if there is an ID present then I'm going to log in a div and inside of my div I'm going to have something called the user button now you can see this comes from clerk right now what this essentially is is that all of the things that you saw on that users's button that I showed you previous viously basically that right now if you're not logged in there's a if so this is the if true else and this is the else statement so here I'm going to have a sign in button and this comes again from cluck right now after we sign in I can actually change the sign in or sign up URL and I want to do the sign up signin URL to translate and you're wondering why is there two right after sign up you may want to send them to like a welcome screen or something but after we sign in I want to take them to the translation page and the cool part is you can change the different mode so redirect will take them to a full new page to sign in but I want a modal just to pop up and I just want it to work right now for the user button what we should see now is let's go ahead and actually go back and we can see look boom we have this nice little user button look at that oh even got a little shine to it if I click it just like that guys look all of this out of the box like what just from a simple line of code absolutely crazy it really really does work beautifully well right so in this case now what I want to do is style it accordingly so I'm going to make the header a flex container so that way everything goes in line we can Central centralize everything I can justify the space between them to push them apart and then I'm going to give a padding on the x-axis of eight so it doesn't touch the side and I'm going to give a border bottom so you got a nice little subtle border margin bottom of five so you know anything underneath isn't touching it so super clean okay and that pretty much does it for that right so in a nutshell that is is doing exactly what we needed now if I go ahead and sign out what we should see is a signin button boom that's exactly what we wanted everything works great and look at that the model is there let's go ahead sign back in and after we sign in it should take us to the Ford translate button right so there we go right so at this point now we're going to go ahead and see the translate button boom everything is perfect Okay so we've got the header looking great the next thing that we're going to do is head over to the page JL what how did he just message me privately and he's chatting on what I'm joking I just messaged J something on side okay so at this point we got the header dialed in that looks great all right so now we're going to go ahead and actually something is looking a bit bigger than I wanted to I believe what I did in the previous build well actually okay so I actually styled it a little bit differently for this one what I'm going to do is I'm going to set a height of 20 right and the reason for that is I want to do I only kind of want it to be fixed at a certain height and for this I'm going to say flex and I'm going to say items should be Center we justify Center and I'm going to do an overflow hidden so I'm just going to center it to make sure it's basically cropping this image to the dimension I want it and that's just going to make things a little bit cleaner and there you go looks really nice okay so at this point now we've got the uh we can move on to the translate page okay so back at the translate page now we've got everything set up so the way that we wanted it now we can start building out the app which is the cool part right so first things first we are going to actually get I'm going to throw an error if the user is not logged in for whatever reason but to be honest you will come to this this point no matter what so really this is just a bit of defensive programming but you won't be able to access this page because the middleware would have stopped you from getting there either way okay now for the translate page we're not going to do this I'm actually going to go ahead and create two components the translation so let me go ahead and Mark it out now we've got the translation form and we're going to have a translation history okay so these are the two components that are going to make up everything okay so translation form and translation history translation form is going to be this component right here that you see so this component right here this is the translation form and then we got the translation history so if we move this up we've got the translation history down here which will span down and basically go down here right so you'll basically be able to scroll through you know X different uh history points or just see you know which language you're converting from but the main sort of magic is really happening here inside of our translation form and this is where essentially we're going to be shooting out something called a server action okay so this is essentially where we have server actions being fired off so server actions okay I don't know why I'm screaming it but there you go right so all of that is going to be basically done on stream right now so translation form let's go ahead and build that so translation form like so and we need to obviously create this form so let's go ahead and do that right now so command B inside of our components we're going to go ahead and do translation form form. TSX RFC boom and that is such a nice short like shortcut is crazy right so inside the translation form now this is going to be a client component now you're probably wondering but how do you know if something is a client component well thing think of it this way I already know this is going to have input Fields form elements I'm going to have some interactivity in order to have state in order to have interactive elements in order to have hooks you know anything that requires a degree of interactivity tends to need to be a client it has to be a client component because there's no window to mount the state and things like that too so we're going to go ahead and do that right now so use client and I also want to show you a little trick right so if you do command shift p and then you type in typescript right so if you do for typescript you can see select typescript version if you go down to use workspace version this is a game changer it will actually go ahead and tell you so say for example I had another bit of code here equals like this ABC and now look at this it says that this needs to be at the top of the file so you get specific rules now which will help you know clarify things just for next year so that a nice little trick if you didn't know uh almost about to destroy the 200 likes so keep on going guys so at this point now we've got the translation form looking sick and also if you're watching this um on Instagram or you know you're watching afterwards Lally take your phone out right now take a screenshot of this or you know a video of this and then go ahead and tag me at ssss in the bottom right hand side of the screen right now you can see my Instagram handle tag me I'd love to see you guys when I'm watching these afterwards right so or if you're watching the Replay for that matter right so for the translation form we're going to have a form and this form is basically where all the magic is going to happen so here we're going to have a form and this is going to be where the server action fires off so we're going to go ahead and you do a bunch of things with this form which I will get set up in a second but more interestingly enough I actually want to go ahead and get all of the different languages that I can translate from and in order to do that what we need to do is if I go back to my page what I'm going to show you right now if uh sorry I'm just checking something so if I go back to my page here so first things first I'm going to import that right now secondly I need to actually make a call to a endpoint now there is an endpoint I'm going to put it on the screen right now so this endpoint right here let's call it the languages endpoint is from Microsoft so if we go ahead and pop this in like so boom it's from Microsoft and this languages endpoint will basically give us all of the languages so if I click into it right now these are all of the languages which the AI translate from Azure support so you can see essentially it gives me all of the languages quite a lot as well right so what we're going to do guys is we're going to go ahead and take all of these translations and you've even got different types of you know information about each one so you can go ahead and really feel free to check this out yourself but we're interested in this translation at the top so I need to make a fetch call to this I'm going to show you how to cach it so I don't want this to update every single time I want to basically just cach this request every every day essentially right so what we do is we have the URL here now I'm going to goad and say const response equals await and what I can do is I can make this an asynchronous function because it is a server component so we're going to go Ahad and say await to fetch languages endpoint and then what I'm going to do is in the second argument I'm going to provide a next tag right so in this case next and then what we do is we pass something called a revalidate tag and what this means is you essentially can pass it a bit of time so I'm going to say every 60 seconds every 60 minutes so this is 1 hour hour for 24 hours so basically this means to refresh so basically cash the results for 24 hours and then refresh so essentially that's what's going to happen here right so every 24 hours this call will get made no matter what even if you had a million users on your website it's only going to call that you know request once uh every 24 hours and everyone's going to get served the cached version of it okay so after this we can go ahead and pass the languages by saying con language equals await response. Json languages sorry and then what I actually want to do here is I'm going to go ahead and basically I've already defined a typescript definition for the language right so in this case I've gone ahead and created a type and in this case it's translation so it's just an object of translations and each key is simply going to be a string and then we've got the name native name and the direction of the text so left to right or right to left right so this is going to be the translation language so what I can now do is I can say add translation languages and this means that now I have an correctly typed um setup right so in this case I've got the languages and what I'm going to do is I'm going to Simply pass my languages into it like so okay so into the translation form so inside my translation form now I need to accept the languages as props so I'm going to Simply go ahead and type in languages and then over here I can type in languages translation languages import that from my previous page and obviously you can refactor that however you wish you know whatever you decide to do and now what we're going to do is we're going to have a drop down so if you see here guys I forgot to show you guys this is actually the language detection and look at this if we can we even have Auto detection so it will detect the language so if I was to Simply pop in for example a Spanish and let me type in English here so if I type in Spanish here look at this it will even go ahead and oh okay oh okay I messed something up so on this one I haven't changed my Endo to be um okay so I'm I screwed this all up because I'm using clerk right now and I've changed from local course 3,001 and so forth but we'll fix that okay but I'll show you guys how that works essentially afterwards um what I actually want to do though is quickly log in to make sure this works it's because I'm doing Local Host 3000 3001 I'm confusing the hell out of this so if I go ahead and do this right now I don't know if this is going to work or it's going to freak out but I think it will work there we go okay so I did to Spanish let's do it to English and translate again now what you'll see is look let's start with construction and it auto detected that it was Spanish right so I'm even going to show you how to do that right now let me know if you're coding along with me and as I mentioned before I'm moving at quite a good speed here so if you are finding this a little bit tricky remember the first thing in the description will take you to this Microsoft page where you can go ahead and get the code for today's build everything that I'm talking about right now is already coded out here and you can go ahead and use that as a reference right so that's actually going to help you guys massively to go ahead and get things up and running okay um I don't know what Jay is talking about history Time s but yeah in that case there you so in this now we've got the languages so I'm going to go ahead and show you how we can go ahead and get this nice little you know drop down like so okay so at this point with these with this nice little drop down we're going to go ahead and use um shadan okay so we're going to go over to shadan shadan Boom okay now over here we're going to go down to the select field and you can see here we've got different select fields in in fact what's really cool is if you go to scrollable one I think we're using the scrollable one in our demonstration here um you actually get these different little sort of you know see like North America and you get Asia and you get these different sort of subheadings so what I'm going to do now is actually install this so MPX shadan ad select and essentially when you're working with shadan you're essentially like copy and pasting by using these commands in so I'll basically add in a select uh component into my code now um so this is actually going to go and install that into my code so what it's doing is it's going into my components my UI select and it's basically just pasting in this code so you can go ahead and it's full transparency you can modify it as you wish and that's really why I like Shaden as well cuz you get full transparency over the code that it goes ahead and Pops in right now I'm going to use not the scroll I'm going to use a scroller B so we go to form I'm going to Simply import everything from this so let's pop that in the top of my code and then if we look at the different examples here you can go ahead and do the same thing um what I would recommend here is it probably is easier to be fair if you do it this way um we're not using a theme switcher today no uh theme switcher I've done in a lot of other builds I don't think it's that impressive so I'm going to not do it today um but in this case what I'm going to do is I'm going to have a select so what I want you to do is copy the select right and we're first going to just pop all of that example into our code and I'm trying to make it as simple as I can for you to follow so we go ahead and Pop That in right now go back back to my code translate now and I need to log in again okay so it's going to keep throwing me out now because I've done I'm confusing it too much with uh let me log in again so I'm going to try not to log into my 30001 demo I want to show you this okay so in this case look we've got the time zone now so this is awesome de go the ener herey oh my god let's go Global pop from AO from Kenya what is up dude good to see you in the house you can see this is an example of how it will go ahead and render out based on this so all we need to now do is refactor it based on what we need so select trigger is a bit more easier what we going to do is select a language so in this case select the language like so boom right and then for the select content you can go ahead and make it a bit more down to what we want so first things first I'm going to create my own select group here and this one is going to be a select group where it's going to say select label want us to figure it out and then we're going to have an auto detection option and the key is going to be Auto and the value is going to be Auto we're going to use that later on so you see auto detection right and then after that for the select group down here we can go ahead and get rid of everything inside of that so in this case now we've got you know just Auto detection so you should see just Auto detection like so and what I want you to do then is we're going to create another select group okay with a language select label inside of it so a language select label okay and over here now for the items we're going to render through the translations that came back from the language okay so I'm going to show you how to do that right now so we're going to go ahead and say when we've got an object um remember I showed you previously these this is how it comes back it's an object what we're going to do is we're going to map through it so we're going to say object. entries and then what we do is we give in the language translation so then we can say language translation and we say map right and then what we do is we get the key and value pairs okay now for the key and value pairs what we're going to do is implicit render out something right so in this case we're going to render out the select item which is the key and the value and then value. name is what we're going to essentially pop out now all we're doing is essentially popping out these right so there we go if we do that right now and we see I get look at this languages uh languages let's do that you see Africans all this good stuff so in this case if I remember the key is going to be the actual value here so um let's go back and I'll show you so the actual key is is going to be uh the key value pairs it'll be this right here so it be AF am a r and so forth that's actually the the core part that we need um so that will help you guys out a little bit papam is crazy today I can see you guys flying keep smashing that light button almost at the 200 light Mark guys crushing it right so in this point we've got this down that's looking pretty good okay now I'm going to do the exact same thing for a second area afterwards so what I'm going to do is firstly surround this inside of a div so go ahead and cut that go to the bottom div tag boom and above the no below this sorry I'm going to have a text area right and now the text area is going to represent this lovely you know text area that we have over here so inside Shaden go down to text area and we're going to import this component right so really nice little component here come on J pop it up pop it into our terminal and while that's loading quick little water break okay we're good I'm on J to hide it boom we're back and now we've got the text area here so let's go ahead and pop this in So at the top down let's pop it there so come on import text area from there and underneath the select tag we're just simply going to type in text area uh text area sorry and this is a self closing component and there's a few things I care about here right so firstly I'm going to style it a little bit so I'm going to say it should have a minimum height of 32 text should be extra large and it should say type your message here right that already looks a bit good I'm going to say the name of this field is going to be input right so we have to give the name of the fields um and after I mean I'll assign the you know State afterwards so we're going to sort of handle that part afterwards but for now that looks okay right I'm happy with that so now for this div I'm going to copy this entire div and I'm just going to paste it down again all right so I'm going to paste it one more time down below so let's go underneath um okay underneath it we're going to paste down so now we have type your message type your message there we go now the differen is between the first and second the first select field is going to be given a name so let's go ahead and say select and this is because we're going to submit all of this inside of our form so this one's going to be called input language because it's referring to the first input field and the default value here default value is actually going to be Auto so it will by default Select Auto detection okay so if I refresh now it'll say Auto detection by default it's tagged on to that and then down and then we've got the name here will be input now for this second field it's going to be name and this one's going to be output language right so output language and then this one's not going to have a default right so as you know we can have a default here I'm going to say default should be Spanish so default should be let's just say Spanish okay so if I do es it will find that key in the field and it will say Spanish there you go really nice and then we've got for the text area here our name is going to be output right so that makes things a cleaner right so with that done now oh look at that we got K in the house what's up awesome stuff um so at this point now we're going to basically have a submit button at the end of this so outside of this div we're going to have a submit button so I'm going to have a div uh I'm going to have a button which is going to Simply represent a submit but what I'm going to show you guys is a okay so I'm going to make it simple for now I'm going to have a submit uh this going to be a type submit it's important that you you know you actually explicitly say this as well for several reasons later on uh and then we're going to basically tack into this afterward so if I was to submit now that I submit the forms you should see it flickers right because we haven't set up any server action yet so at this point now I need to map things to state so I need to know what the users are basically typed in here typed in here so when we submit the form I can do things with that value okay so I need to prepare a bit of state so first things first what I'm going to do is I'm going to go ahead and set up my state accordingly so boom and remember if you're finding any of this difficult you can feel free to hit us up and join us at zero to full stack hero I just dropped a link in the chat right now you can feel free to head over there I teach all of this at such a granular level it's unreal so you'll be a pro in no time that is the third link in the description feel free to check it out okay so heading back over to our code so right now we're going to have three pieces of state so firstly we are our client component so this allows me to do that and then I'm going to go ahead and say const I'm going to have an input fied and I'm going to have a set input now for this input field I'm going to firstly import the state and this essentially will keep track of the state that I have and I'm also going to have an output field so this going to be for the output so input being this one output being this one now how do I connect it to those fields well let's go to the text area field and all we do guys is for the input field we say value equals input and then when I type in basically all I will do is I will say on change right so on change an event is fired off so it's an arrow function and we do is we set the input with e. Target value so that is essentially what I type in here so if I hit save and I type in you should see that it works okay now there are ways to do this you can go ahead and use form State Management you know react hook form there is even a way in Shaden to do it but I'm just keeping it very simple for today I've covered that in actually different tutorials as well but in this case this is going to be the simpler version of how to do things okay now for the second text area we're going to go ahead and type in in value output and again the same thing someone say will this app be suitable for a th000 users this app will be suitable for a million users that's how good it is okay so yes you can do it this is a requirement my college project yes you absolutely can do that so if you want the code for it remember first link in the description fill out that Microsoft form and simply for the company part just put your name in get the code is the first link in the description and it will get give you access to all the code I wouldn't say copy I wouldn't say copy if it's for a school project you know try and know what you're doing and then you know use it accordingly I'm not trying to influence anyone like that all right so in this case we got input and output being mapped which is great right and she goes bro you're just insane man thank you so much I appreciate the love honestly I appreciate it too much okay so at this point now we've got the input and output BM map so if you type in it works so how do I now go ahead and have it so when I submit it does what I need it to do so we're going to use something called server actions okay now if you don't know what a server action is simply go ahead and type in server action inside of um you can see all of my debugging so server actions mut ations we're going to use these right so you can feel free to read about it on nextjs but essentially the asynchronous functions that are executed on the server and they make our life so much easier they typically work mostly with form submissions but I'm going to show you anytime you have a data mutation you can use something like a server action so you don't need to create an additional API endpoint and all that kind of palava um so it's quite a cool way of working in next CH but it just takes a little bit of a thinking switch but I'm going to make it so easy for you so close everything down here boom and now we're going to go ahead and oh that's awesome man someone goes develop go sunny how's it going your tutorials have really got me started with next year's typescript and tell wi these live streams are pure gold you're Golden man thank you Jay screenshot that I love the positivity and thank you for being here man all right so we're going to create a new file called actions and this is where my server actions are going to live and to do a server action fairly straightforward right so we're going to create a translate server action dots so there you go boom um thank you so much right and in this case we're going to do uh use server and this is how you define a server action right so there's a few ways you can do it inside of our form depends if you're on a client or server I'm not going to go too far into it but doing it in an external file is a relatively simplest way so at this point we've got translate and then what we have is two types of signatures well typically uh thank you so much go uh mentol TV TV go thank you son your videos are helping me out so much I appreciate you dude we're going to have an asynchronous function this is going to be called translate and then over here we're going to have have the form data and we're going to have form data like so okay so this is essentially how we do it and then we export I like to export a default translate like so okay so that's essentially the standard for a server action however what we're going to do is we're actually going to tap into something cuz I want to know when the response comes back from my server action so the way that I do this is inside of my translation form what I'm going to do is use the following bit of code right here so over at the top we're going to say con State form action use form state so we're using something called use form State hook so I need to firstly get the translate action so I'm going to import that from our actions and then we've got this initial State now the initial state is essentially representation of what the form looks like so the state in our form is going to be input language auto input is going to be blank output language is yes and then the output is accordingly blank now you can see here translator is freaking out it's like what's going on why is this not working because when you use form State we actually change our signature of our translate function now instead what we do is we get the form data but before it we get something called the previous state and the previous state is actually you know it's where things change up a little bit so the previous state um is actually now going to be uh let me just go ahead and do this so previous state is actually going to be state but I need to write this definition so if we go back to our translation form it's actually inside of our state here so if I go back here so I need to create a type of for this the easiest way is to do type of initial state so if you didn't know that's how you you quickly infer a type off of something like an object so I've got a type here now and inside of here what we can do is we can import the state like so import boom and just like that now what we should see is that this will stop complaining once it returns something back okay so now we can basically start um handling our translate function so first things first this is a server action and I only want this uh route to be accessible to a logged in user so typically you would have to intercept it check the user's authentication state but with clar you know it's just easier than that all we got to do is type in or protect and now we've gone ahead and done that boom right so look at this so we've got or protect like everything works nicely there uh and in fact you know it would already work at that point but I'm just going to take it a step further with a bit of defensive programming saying get the user ID if there's no user ID then the user is not found throw an error okay now at this point when we basically go ahead and submit this form well firstly we need to attach this so we've got the translate server action here is where we attach it so we say action equals uh and we actually don't use the translate we use form action here so form action like so okay so boom and now over here how do I get the filled so if you think about this four Fields there's the there's the input language there's the input output language and the output here right so how do I get access to those inside of my form where the form data comes over but how do I actually access it well it's very simple you basically get the Royal form data and you form data. get and then you use the the uh key right so as string and so forth so in this case I've got all of my data inside of the wrong form data now and now is where I the magic happens so this is actually where I create the endpoint request to go ahead and actually carry out the translation so at this point we need to pause and we need to go to Azure and create an instance so in this case we're going to type in Azure AI translate right so again first link in the description if you go through that link you will reach this point right here and now once you've got this guys you can sign up for free over here Azure microsoft.com free and you will get again like I mentioned 12 months free for the most popular Services plus $200 worth of uh Azure credit so you go ahead and check that out um oh look at this I love the comments right today right so once you've done that you can go ahead and type in as your AI translator you'll take get through to this screen right here so in this case try AI translator for free so I want you to click on that and we're going to click on start for free and I've already created an account so you guys can feel free to do it at your own pace you know however you wish but I'm going to show you how we can set up an instance of the AI translator right now so in this case I'm going to sign in with my team account yes let's do it I'm going to sign in with my team account and uh for now I'm actually going to go ahead and just quickly log in so if Jay if you can give me the code to the login right now that would be muchly appreciated so uh that way I can log into my account but in the meantime I'm going to go ahead and prepare myself while I get that from Jay so a few things so in my environment file we're going to just go ahead and prepare to make sure that we've got everything so I'm just going to do something a little bit um carefully here so let's just type in ABC okay so at this point Jay's giving me the code so let's quickly log in again so uh I'm going to hide my screen while I do that if you're not doing TFA you really should be doing TFA guys right so at this point now I'm logging into Azure talking you through it as it happens so in this case we are at Azure looks like you already have an Azure account okay I mean use the existing subscription in your account that's fine so let's go to the portal so once you're into your Azure account you actually need to set up something called a uh subscription everything will be attached to your subscription right so you can see I've got loads of stuff going on in my Azure Services what I need you to do is simply go to translators but if you don't see this simply go ahead and type in translators and you'll see this right here so firstly as well Augustine thank you so much he goes hi Sun your videos have been amazing toour to uplo my skills about to be enrolled in a giant company here in Nigeria boom that is what I'm talking about about well done my dude right translators let's go ahead and J screenshot that that's awesome right so you see I've already got Google translate on but I'm going to create another translator so let's go ahead and do that right now so I'm going to click on this and then as your subscription I've already created a subscription if you don't you can go ahead and create one for the resource Group I'm going to create a new one I'm just going to call this YouTube Google translate clone copy this to make life easy boom and then for the region at this point you can really do I think we don't need a specific spefic one here so we can just type in any East us there you go um the free tier is already being used therefore appear in the drop down so I've already used a free tier already for this so I'm just going to use a peir you go option right here oops um so there you go boom uh but you guys will get a free tier right so I've already used one for now so that to be honest with you I can actually go ahead and pop it into my I've already got a resource Group so I'm going to make life a bit easier for me and just do that right now um is that going to work or is it not really worth it okay forget that YouTube Google translate comes to it right now all right for you guys s z F0 will be there so I'm going to click review and create and then we're going to go ahead and click on next and a lot of you ask all the time is it free yes when you get started it will be absolutely free don't worry about it all right and at this point we're going to click on create boom and this will initialize the deployment so this is essentially all you need to do to get started now while that's happening and it's doing its magic I need need a couple of different things so I'm going to go ahead and prepare a bunch of stuff now so you guys can go ahead and see what we're doing here so firstly neing things up a little bit you know make your life a little bit easier we're going to have firstly Azure text translation we're going to have Azure text translation key we're going to have Azure text location okay that's going to be the instance where we deployed and then we're going to have an Azure API key we're going to have Azure endpoint and we're going to have Azure deployment right so this is going to be for whisper essentially and then we're actually going to have a completions name although I don't think I need the completions name I don't even think I need this today the deployment name okay but I mean for now I'm going to keep it there until I populate it right cuz I'm not 100% sure if I what I kept and what I didn't keep in this case mongodb uh username and mongod password so this is essentially what we're going to have today uh and then you're going to have your keys at the end of each one of these so boom equals and for now I'm just going to ABC right so we're going to essentially release um all of this stuff okay so so at this point now we're going to go ahead and you see we've got your deployment is complete right so we're going to click on go to Resource and then I need you to go to keys and endpoint now at the keys point I'm going to copy this text translation and that's the first part so text translation boom that goes there okay the second one is the text translation key so I want you to copy this text translation key and I'm going to pop it in in here so I'm going to go ahead and hide my screen now pop it in like so right now I want to go ahead and see can I hide this is there any chance I can hide that no I can't hide that okay um okay so I tell you what I do I mean I'm going to have to be a bit careful about this but uh here what I'm going to do is for the text location is East us that was the deployment I did uh for the key I will go ahead and pop it in my clerk secret key I'll go ahead and pop it in as well afterwards uh in the meantime while we're doing all of this I'm going to actually get a few other things set up in the process right so I actually wanted to go ahead and set up my so we've done the Google translate section so you need to put those keys in the second one I want to do while we're here is Type in um I think it's was it whisper no it's not it's asual um J AP no it's not this one it was actually for the assistant demo I'm just double checking to make sure it's not a mistake okay so we need it aure open AI yeah so we're going to click on this this is the one okay so what I need you to do now is remember North Central us is very important here right so if you click on create I need you to go ahead and create a resource Group so in this I've already done it I'm on YouTube Google translate and we're going to create as your open AI instance and for this one I want to go ahead and do oops I'm going to do the following I'm going type in um just type in YouTube Google translate clone boom and for the pricing tier standard s so is fine uh this is already in use I'm just going to type in um YouTube let's type in whisper AI now for the region do not do East US Okay the reason being is because you need to actually have North Central us this is one the only one of two locations that support the whisper AI API so we can click on next click on next everything's good click on next and then review and submit okay and once you've done that we're going to click on create so give that a second it will do a little validation step click on create so everything so far looking good that would do the initialization of this so oh this is nice I just see I just saw nice little viewer and so in this case we've got the deployment in progress so let that do it thing okay so while that's happening then we'll get the API key the endpoint the deployment name and all that good stuff from that okay so let that do it little magic right now that won't take too long I think that'll be done in just a second and then we're going to go ahead and set everything up cuz this is honestly the only look I wouldn't say a long part it's a tedious part right so for the username here just so now we can prepare ourselves I'm going to type in username for the password here I'm just going to type in password exclamation mark with a capital P right so make it a little bit easy um just for now obviously you can feel free to check change your username and password we haven't done any of that just yet uh for some of you are asking how can I get access to the open AI API yes so all you need to do is go to the open AI API on Azure and simply you click request access all you do is fill out that form and it'll pretty much give you access very quick the team are pretty awesome like that right click on go to Resource once that's deployed and then you got keys and EMP points so at this point we've got the end point here so we've got the um the end point is the main important part so boom I'm going to go to my text transation key API key and points out here this one and then for the API key again the same thing this one okay so I need you to go ahead and copy that one afterwards to here so you want to paste that in there and now for the deployment name so this is the important part so we don't actually need the completions the deployment name is the more important part here so what I want to do is click on model deployments and click on manage deployment so what we're going to do now is inside of our Azure open AI service we're going to create something called a whisper model now this whisper model allows uh asure open AI service to basically transcribe my speech so as I talk it's going to use AI to transcribe that into text and then that we're eventually going to use that to go ahead and set everything up so somebody says what do I do what do I fill in for the company part on the form uh just simp simply put your name if you do not have a company right that's completely fine so at this point we're going to click on create new deployment and here we're going to click select the model and you should see whisper if you didn't see whisper by the way then you actually deployed to the wrong location so you have to deploy to North Central now again I've already done this so I've already exhausted through my quota so I've already deployed it once before so what I'm going to do is use a previous deployment but all you would need to do guys is click on Create and then you'll get the deployment here so I'm going to show you my previous deployment to make it a little bit easier for yall all right so let's go ahead and show you that so I'm going to show you the one that I'm using is a Ser assistant demo so this was actually one I used previously model deployments boom go over here and you'll see now inside of this deployment we've got everything up and running so I'm going to go ahead and you can see that the deployment name that's really the important part honestly that's all it is okay so it's actually this right here okay so actually no sorry that's model name so you need this whatever you whatever you called it right use that so this is from my previous build so I'm just going to use that one here and I'm going to change the Endo as well to be the previous one that we had so exactly what I showed you before but that's essentially what you need okay and then the key is what allows you to go ahead and actually use it so what I'm going to do now are these available for students account yes you can 100% yeah so at this point now I'm going to go ahead and replace my keys so I'm going to replace my secret key my Azure key and my API key and I'm going to going to hide and save this and hide the screen so I'm going to do that right now to save ourselves a bit of time because I had to hide a bunch of keys earlier on which uh is just the way it is so I think I've got my keys all here so I've got my text translation key and then I've got one more which is my cler key I'm just going to go ahead and find that one right now so let me just go ahead and quickly find my clu key let's see how this see how fast I can do this right so I believe uh where is it g us customization Integrations B um no no no okay let's go to boom I need to get my okay that's fine all right so for the keys I believe it's in setting AP keys there you go boom all right so if you ever lose it don't worry about it just go to your personal Das 4 clock and then go to here and then copy that and then you get SK test key okay so in this case you also get a publishable key which you you're allowed to public so in this case SK SK there you go I've got my key all right so I've replaced all my keys you guys have seen what you saw before and now I've gone ahead and closed my environment file okay so you would need to do the same thing I'm going to include the environment example file inside of the code that you can go ahead and you know copy and all that good stuff but at this point now we've got everything set up and deployed right so you would have had your deployment up and running and whatever your whatever you decide to name it make sure the model is withot and the deployment name matches the one in your environment file okay so once you've done that now we're good to run right so what I want to do now is for the translate function so this is the next part we're going to do so the translate function I need to create a request so basically here I'm going to um request to the uh transation API so Azure translation API um to translate the input text that's basically exactly what I'm going to do okay so we're going to say cons response equals a wait and I'm going to say axios oh actually I mean okay so I usually do it with fetch but I'll show you I guess with axios today it's fine so in this case I'm going to do mpmi axio I forgot to refactor this but axios is another request Library uh I'll show you a bit of both I always use I tend to use um fetch a lot of the time but it's fine we can use axos today so axios and here I'm going to type in the base URL so base URL so base URL and this one here let me import AOS by the way sorry I forgot to and right now it's freaking out so let me just make sure I've imported it correctly yeah that's correct base yeah there we go nice base URL and for this one we're going to have the end point so I've got an end point here which the end point by the way I've forgotten to do is I need need my three variables so at the top of the file boom we're going to have the key endo and location and these are going to correspond to those keys that I added into my environment file earlier um I can see people going what is up Sunny what's good ashash good to see you okay now they do reply by the way uh nuke uh it shouldn't take too long yeah so I think it may be about a day or so right uh can you include an example environment fire when you commit to repl please some D values yes I will 100% that so J remind me to do that at the end of this build I will go ahead and add an environment example file to the GitHub reper and I'll push it straight away after this I got you right so we've got the end point so this is going to be oh my neck is cracking all right so this point we've got that and then we need to pass in a couple of requesting now this is essentially to go towards the um translate API so in particular I'm talking about this right now as your AI translator okay so essentially I've done the hard work for you so I'm going to show you just how to use it so in this case we need to pass in a URL and this is going to go towards the for translate oh it's not even the foral translate so it's going to be this Endo translate URL the method is a post okay so it's going to be a post function and then uh the headers now the headers I need you to pay very close attention to okay so these headers right here are actually going to be the following so you have to make sure that these are crystal clear the same these again I get from the documentation for V4 what you see here that's actually from something called uuid so I'm going to install that library right now that's just for whenever you want to install certain uh IDs that kind of thing you know you can go ahead and use this special Library called U uid so if I go ahead and Pop That in sometimes it doesn't install the type definition so you can go ahead and copy that paste it in install the type definitions yourself it'll get rid of that error like so and then over here we've got the subscription key which is the key the subscription region which is location content type and the client Trace ID right so all of these things you need to use to go ahead and get set up okay now once you've done that we're going to Simply pass in a few parameters now these parameters this part I would say really take your time with this and I would recommend that honestly that if you do get stuck at this point again fill out the first link in the description go to the GitHub repo and check against the code here because this is where I find that you're going to make a slip up probably even like a lowercase or something like like that and your head is AR going to work and it's not going to be correct and you're going to get frustrated so I would say just check it out save yourself a bit of hassle okay now for the API version we're using 3.0 and then here I'm going to say from okay now here I'm going to check I'm going to see if your input language was Auto so essentially the auto detect so in this case if I do auto detect then I'm going to basically have the from be no okay otherwise I will introduce the language so basically what I'm saying here is that if the input language was actually um nice little view I guess I've got I've got somebody special watching and I'm not sure who it is I'm not sure what the name is on the on the screen right now but in this case um we've got yeah so if I've got the input language is auto then we basically put no and by default if I don't give a from value uh it uses an auto detection from the AP on the API side right otherwise I put in the input language just like e n s for Spanish and so forth and then I need to specify a two right and that's simply the output language okay so that's basically how it goes ahead and does it yo what's up we got Nigeria in the house as well and then we got to pass in the data right so the next step is the data we pass in now this is actually an array and the object is going to be a text and you can pass in several items here but in this case I'm just going to pass in the actual raw input right now the final step is I need to basically specify the response type so in this case I'm just going to say it's adjacent response type so this is how we go ahead and do it with our aios now what is freaking out here so we've got a little bit of an issue here now the Endo what have I messed up here um oh yeah so key location endpoint okay so my AOS is freaking out cuz I'm out of type blah blah blah is notable to P string okay so I've got my key I've got my location I've got my everything's good on that front interesting what the hell okay let me just double check something I'm going to just make sure why are we using axios and not fetch you can use feel free to use fetch if you want okay so I made a little issue there what have I done so what's the change here that that's happening that I'm making such a silly mistake from so raw form data I actually don't know what the hell the change was um input language from API version okay if someone else can spot that I can't actually spot it myself I think I've just pasted in a weird character but I think okay so at this point yeah this is what you would want right again the code is in the description first link in the description fill it out and so forth and you'll get that okay so we got the response here now I want to pass the response data right so in this case the actual response will come back so this would actually be the translation so con data equals response to data and inside the data firstly I want to say if there was an error for whatever reason I'm going to throw an error or show it on the console instead and then I'm going to uh do the f then I'm going to return the previous state with the output and that's going to be essentially the translated text okay now in between this step I'm actually going to go ahead and actually you know this is actually where I would go ahead and um one second this is actually where I would go ahead and um I would actually go ahead and push it to the database right so here I'm actually going to have a step which says push to database so I'm going say push to mongod DB here right so we're going to build that afterwards but in the beginning just for now I'm just going to return the previous state and the output and this is basically the translation that comes back for us okay so at this point that's all good so that's the translate function down now when we do this I'm returning the previous the output is the main consideration there okay so when we do this now what I should see guys is from translation form so let's go to translation form oh this a banger all right so we got the state come back so now at this point once I've submitted that form State we should actually see this get so when when the submission happens and when it comes back because it's asynchronous the state will ping off all right so now when the state pings off again we want to tap into that and the way we can do that is we can use something called a use effect right and then what I can do is I can set the output so what we do is when we say a [Music] effect all right the vibe is so sick today smash that like button as well guys it helps reach honestly you don't understand if you haven't already liked this video destroy the like button because it helps this the algorithm push you out to as many people as possible so truly it will go such a long way just destroy that button so we're going to change it to State and then for the use effect I'm going to go ahead and Bo boom now for here I'm going to say if state do output now you're probably wondering what what was the output well it actually from our action and remember the output was here so if it came back with an output then what we do is we set the output to State the output okay so if we've done it all correctly now we should have a full circle set up right so in this case let's go ahead and do this you can see my you know map here so let's go ah and give it a try and I don't know if I've actually hooked it up so we go form action is there good stuff let's go ahead and type it in okay so um let's type in something like uh hello world and Spanish Let's do submit okay so oh okay bit of an error right now we got a 401 right so let's just firsty see that means I'm actually not authorized to do that so in this case [Music] um so unauthorized interesting so at this point I am actually let's just sign out and sign in because I've got two things running it could be screwing it up a little bit I just want to make sure that that is not the case uh adrenaline rushes At His Highest nuk's asking something go s did you pay to use your as your account no I didn't pay I've actually got a free account but I put a card on the account uh to to help out right so let's do hello world let's try one more time I don't think it will work okay it did work no it didn't work 41 fine so at this point now we've got the use form State translate um now I think I've screwed something up in my middleware but I'm going to you know fully give this a try and see now so um in my middleware let me just double check my middleware I've got for translate that's fine um in my it says live debugging at its finest right now um it won't take long for you to get access by the way right um so in this case translation form for the translate form action is what is submitted off so translation form okay so I've got my upload my form action here and to be honest with you the first thing I want to do is debug it hand in hand okay so let's go over here and let's check firstly we can see the input language auto output language so the input is actually it's actually blank right now so it's not actually passing it through the way I expected it so if I go to my translate function I can see if I console log and say boom boom boom raw form data and I look at my form now let's just type in Hello World um and let's just have submit oops so you can see here so I've got Hello World Auto detection output and then I've got a 401 okay so okay so it's getting past this point which is fine so we're actually failing here at my translation which means that my keys are probably messed up so let's check my keys out so I've got my exure text translation keys I'm going to check that one right now so and then my Azure oh okay I H I know why I've screwed screwed up my keys right so at this point I'm going ahead and I'm checking my keys uh so I actually when I replaced them I actually screwed up three of my I screwed up two of my keys so I'm going to go back and change those right now and I believe that is why it's happening so I've gone ahead and I've just gone into my environment file and I've changed my keys over and let's give this another shot I'm going to restart my server as well and um let's go ahead and see what happens now what it says okay so at this point conso Keys nice try but no um so at this point let's try do refresh and now let's do hello world and hit submit boom do we get 401 okay I'm getting a 400 now okay interesting let's see what's going on I get a bad request now okay so at this point I need to look at what's going on a little bit deeper because I need to okay this is where I gets tricky so this is what I would say definitely check out the the code in the REO because this is way so small mistakes can make you know all the difference here so we've got access my Endo let's just double check this so I'm going to say console log Endo so after the submission here we should be able to see that so this is live debugging it's fine this guy guys so I'm going to type in hello world boom after the submission okay so cognitive Microsoft trans oh my god it worked boom okay so it it did work just give it a second all right so don't do what I did and Rush with it just give it a second but there you go it did work so let's type in this is awesome and then let to submit okay nice right perfectly good stuff right so uh at this point whoever's asking about you know like yeah just chill like it takes time for them to gr on your access don't worry about it right it's normal all right so at this point we've got the xsm point that's so this is what you need right again if you get stuck at this point first l in the description check it out right so debugging is a skill in itself always good to see it being done live yeah honestly I I I preach that part the most because that's really where uh Don't Panic especially I'm live right now I'm doing it don't freak out it's all good but you can see right now the auto detection works and it works in the way that we need it if I do esto as imp prante and I go and do English don't even ask what might tried to say that but if I go ahead and do this and I do submit now it should make this into English there you go okay so we have our translation down right so at this point now we've still got to do our push to mongod DB right so in between this Gap so this is where I will do that essentially there so we'll go ahead and Implement that afterwards when we set up mongod DB however at this point I think that's great so we've already got the translation working that's perfect the next step is to go ahead and style this out and then we're going to go ahead and do mongod DB and then we can do the whisper Ai and then we can do the speech yeah we got we got a bit to do right it's all good right so for the translation form let's style this out a little bit so for translation form right now I'm going to do a little bit of styling so uh where I have my form and also I remember guys only true ogs of the channel will know this track right I found it again Jay is going to be like yo I remember this uh do you use a vs code extension yes I do I think it's called size or something but I'll show you that later another time or I'll show you inside for right so you can feel free to check that out so in this case we got the form action so this when I actually launched full her if you know you know yeah so at this point uh for this div I'm going to actually wrap everything inside another div okay so wrap put a div here get the ending and I'm going to go outside of the this div outside of the second selective and I'm going to paste it there okay so outside of the top two and then here I'm going to say Flex oops not Felix Flex Flex column space y of two and now you should space them out a little bit Mr Fran goes this is the OG J I'm telling you when I dropped this one the first time I was like Yo God damn that is crazy ger goes I remember this Vibe yes that's what I'm saying guys now also it's worth mentioning that everything is mobile first right so this is mobile first and then I can add a break point CU on a large screen I want it to change to a row so at this point now on a large screen that it changes to a row right now you probably see there's a little Gap there because you need to actually get rid of the space that you applied on the large screen so we're going to say space y of zero but on the large scen I'll do space X instead so Space X of two boom and now you can see boom perfectly lined up with a bit of straightness okay now I can go ahead and start these so I can say Flex one on that space between the yis of two I'm going to copy this thing as well go down here to this second div pop it in as well now you can see they're both trying to use up full space that's a lot better okay awesome stuff um and already that's looking clean guys I like the look of that everything's nice now for the select triggers I'm going to sty these a little bit so for the select triggers I'm actually going to go ahead and give them a little bit of a different styling here so like so I'm going to style that accordingly and you can see that's a bit nicer than what we have before I'm going to do the same thing for the select trigger down here boom there you go and um yeah that's looking pretty good so select language boom okay uh and that looks much nicer so now you see a detection hello world submit and we should all nice okay so good stuff so at this point we've got everything kind of the way I want it um the only thing I would say is this outside div is okay for now I guess yeah this is fine I actually want to have a little bit of a like kind of a a little bit of a cheat for this but it's just going to be a text thing it's always highlighted so it kind of indicates that we're on text and if you click speak it will go ahead and do that so I'm going to add that in now just for Simplicity sake so I'm going to add that in at the top right now um I'm going to go back to the playlist as well in the top so these are some newer tracks I think they're kind of like Flow State tracks so they're going to help you out if you're if you ever get stuck in that kind of vibe so at the top of this file I'm going to have a div and inside of it I'm going to have a div and a P tag right so a little trick here when you do this you can say div and inside I want a P tag and you see that boom nice right and I also want a another div I forgot to mention um I'm getting confused a little bit I think I want this I want this I want this to be a flex container I want this one inside to be a flex container as well this will have space between the y axis of two XX have two sorry and how many children does this have in that it has one okay that's right yeah because then down here I will have the recorder the recorder being this recorder button here the speak button right now it's P tag I'm going to say text boom and then for the at the above it I'm going to have an image tag this going be an EXs image tag boom saved your bunch of time by passing in what we need as well so let's go ahead and pop this in like there boom so you've got the text there I'm going to St this out a little bit so this is going to be you can just feel free to copy my class name at this point again all of the code is in the first link in the description so you can actually go ahead and get it for yourself always get a question Sunny you're not showing us every bloody line it's fine it's okay I I'm giving you the code in the first link in the description so use it right and then the next step is for the div that surrounds the image so this one right here this is going to be a flex container item Center the group is important because the group means that if I highlight over any of the outside the inside I could control I can make it the text underline so I've given it a bit of custom styling here and now you can see if I highlight over any of the group you see how the text underlines that's how you go ahead and get that effect okay so at this point really nice the only thing that I noticed is that this um we go to page translate this needs to have a bit of padding on it because right now it doesn't look that nice so what I'm going to do is I'm going to say on a mobile it by default it should have a padding of 10 so it kind of spaces it out now on a large screen once you hit that or extra large screen once you hit that break point I can get rid of my padding and I can give a margin bottom of 20 always as well so that way you can scroll beneath the history right but now you can see look at that that's automatically looking amazing much cleaner much nicer we can get rid of the marking there translation form okay so really good stuff that's working nicely now I do want to add something called a debounce now a debounce essentially means that when I stop typing I want it to wait let's say 500 milliseconds and then boom I want it to go ahead and actually translate the text for me okay so we're going to go ahead and add that in now so I'm going to show you how to do a debounce so debounce is a very good sort of uh uh how do I what do I call it like a technique encoding and it basically means that when the user stops typing or their input oh my God I have to crack my neck sorry guys my neck is like super like I think my chair is like not straight right now okay we're good my neck is dying I think I pulled it yesterday right so at this point now we've got the it's a good coding practice exactly thank you J so the way you do a debounce with a raw use effect is we do a use effect and this use effect is going to be dependent on the um the input right so when the user types in so every time the user types in this code will fire off now what I'm going to do is I'm going to say if there was no state right so if there was no state. input so essentially this means um oh sorry not state if there was no input but I'm also going to do a trim because sometimes if you do an enti key you don't want that to classify as valid input so if there is no input we're simply going to return we don't want to do anything right um Dounce is it awesome to avoid button clicks nice for your oh nice denounce or debounce but let me know right and at this point point we're going to do a little manual debounce we're going to say const delay debounce function oops delay debounce function and we just say FN equals set Tim out okay so I'm going to use a function here called set time out and basically what we're doing here is I'm going to submit the form right and I'll show you how we do this uh but 500 every 500 milliseconds so after we've basically done we have a 500 now if you find that it's two intense you can change it to like a, for like a 1 second so if I like half a second I think it's got a kind of Snappy feel but afterwards we need to make sure we clear our timeout for that function so that way we're not you know having several timeouts are going to overlapping each other every time the input changes because otherwise you're going to have several instances of a set timer which is going to be chaos okay so at this point now what I can do is where we had that submit button this one here I'm going to have a reference to this and all this is going to Simply do is going to be a submit button reference right now this submit button reference we can create inside of our code here by saying const and think of it as a pointer right so it's basically going to be a pointer element and this pointer will basically be like a finger that's just pointing at that element and then when I need it to I can say click that's all it's going to do right so as simple as that so submit button reference now here I can say submit button reference. Curren doclick um yeah okay Bo and we use optional chaining because that could be undefined right so in this case submit the form boom nice okay so everything looks pretty sweet there and now what I can do is I can test it so after this this should be perfect so if I type in hello world 2 3 after 500 milliseconds it will submit and boom there you go hundo 1 2 3 if I Tye in 567 it should say just 567 boom okay there you go right this is awesome right and now if I was to go ahead and get rid of it it shouldn't do anything there you go because of my defensive programming statement there so there you go debouncing done right so a really nice little example there for you all um next up we've going to have the recorder component here which will eventually be built but we've got see things are happening pretty cool I think now at this point what I would like to do is set up the history so the history essentially would be this right here right so I want us to be able to do all of this so that way I can start inputting into the database once we do that it will be very simple because the way I'm building it is very sort of it's a very good programming practice the way that today's build is being built because entally you'll find that adding on new features such as the recording just tack into the overall flow so it won't actually require any additional work once we get up and running so to get the the uh database side of things working we're going to go ahead and head over to our Azure and let's go to our portal. azure.com and I want you to go to home and what we're going to do now is create a cosmos DB right so Azure Cosmos DB now I want you to click on Azure Cosmos DB for mongod DB and we're actually going to look at the V call right so what you can actually do is if you just click on the cosmos DB and then click on create it actually gives you the run through okay so here in this case that you can see Cosmo DB from mongod DB Apache all this stuff so we're going to use it for mongod DB now mongod DB is a very popular nosql database if you've been wanting me to do that smash that like button and subscribe right now because I did it for you guys or asking me over and over again okay so boom create and now you can see V call cluster or are you so in this case Vore cluster is the one I'm interested in let's click on Create and again here we can go ahead and do our Resource Group so YouTube Google translate clone custom name so in this case you can call this whatever you want I'm just going to call it YouTube Google translate clone like so and then I'm going to do um free tier is fine uh you can do free tier whatever you want or I'm going to do free F HS is fine uh username so in this case I'm just doing a username and then here the passw so I'm going to change my password no I'm going to do the password that I put in my environment file but I'm going to change it a slightly little bit right so in this case you just do not mess up your password so I've gone ahead and given this a password here so in this case there you go and I'm going to go ahead and click on review and create and then click on Create and now here create cluster without fireburst rules or return to U so in this case we're going to do without so return to add Firebase rules so in this case Public Access allow public access to all so the reason why we would have to actually do this is because when we actually go ahead and um use uh Vel Vel actually does requests from Dynamic IP addresses which means that you need to go ahead and actually allow to be supported from anywh the only way you can get around this is if you use the uh Vel Enterprise plan and then you can get something called a um you can get like fixed containers which can basically have fixed IP addresses which you can then whitelist but otherwise for this instance you'll have to allow all the access right so this failed for some reason let's see at least one deployment fail please list deployment operations for details okay let's see what happened operation details each subscription is limited to one free tier account per region okay so I've already created my ti account so what I'll show you here is let me go ahead and delete this one I'll show you again I'll do a deployment I'll do a paid one it's fine I'll do it for you guys create as Cosmo mongod DB create so you guys will get a free one I'm not going to use a free one right now cust the name let's just do YouTube Google translate clone DB it's fine e free t no it doesn't matter username and then we'll do the same thing so [Music] password there we go and I'm going to do networking I'm going to allow all boom there we go and I'm going to do review and create there we go valid information okay so something failed in the basics uh please configure cluster tier okay so in this case I mean you can really go ahead and mess around with this again I've already done the free tier before so in this case right now okay so what I'm going to do is I'm actually I won't do it okay so all you need to do is do the free tier right do the free tier what you'll end up getting is you'll get this right here it's make it simple I've already got one here right it's a Google translate clone now once you get that you'll get this perfect he hey right so at this point you've got you know everything that you needed here and the important part is the connection strings now connection string is your honestly what you need the most to focus on so at this point what we're going to do is copy this connection string and I'm going to create a new file called um at the top level we're going to call it um let's create a new folder called mongod DB and inside of mongod DB I'm going to type in db. TS okay now here I'm going to say const connection string equals and I'm going to paste okay now you can see I've got the cluster here that you'll basically go ahead and connect to and then you got the usern name and the password right so what I want you to do here guys is I'm going to go ahead and do this now what I want you to do firstly is replace this with your username so in this case just do username for now and then here replace this with your your password so in this case I've changed my password so you guys won't be able to just get into it but let's just say this was the password yeah and it could be an uppercase or whatnot it could be like this right so in this case say that was the password this is this string is very important now because what I want you to do is copy this string paste as then copy it I'm going to go ahead and actually copy the actual string and then come back to the F so I'm actually going to change the password now to be the actual string so I'm just copying my actual one now and then I'm undoing it so I've got in my clipboard okay so let's just imagine this is essentially it now what I want to do is I'm going to go over to my extensions I'm going to type in mongod DB and what I need you to install is this one right here mongod DB for vs code okay install that now go down here and I want you to type in new connections okay connect with the connection string now here I'm going to go ahead and paste it in so I've actually replaced the username and password Here and I'm going to paste so I'm pasted it okay so in this case I can show you that bit cuz it doesn't show it I pasted it and I'm hit enter and what we should see now is it will connect oh I've done the invalid I forgot it's the old key that I used okay so in this case I'm going to do a um let me get rid of my connections firstly so get rid of that let me get rid of this one so it's completely empty yep we can get rid of that add a connection and let's do um get rid of this let's do connect and I'm going to do the same thing but with the correct password this time and I hit enter and now guys what you'll see is it says connection and then you see this test right now I've already got a test you know ignore the documents here you won't have this your one will just be empty right so even if I was to get rid of this I can go ahead and drop the database to give you an absolute fresh situation so this is what you'll see right so this is exactly what you'll see now and this is very important because now I can navigate my database in an easy way Gard what is up dude uh good to see you on the channel right so in this case boom so Sunny how are you OG I'm doing good man how are you at this point now um yeah so at this point in the connection string here so what I want you to do is replace this with those um environment variables that we spoke about earlier okay so in this case you want to do process. environment mongodb username and process debut password and then inside of your environment files I want you to change it accordingly so I've already shown you that before right so I use back ticks as well so you can do interpolation and then all we do is we basically need to install mongus okay so in this case we're using mongus in today's build to make accessing a mongod DB Bas uh database a lot simpler so in this case mongus is right here so you can do mpm install mongus save and this will essentially allow us to go ahead and actually interface with our database in a kind of a a more object friendly way okay so we can Define schemas that kind of stuff so in this case we can say if there is no connection string then we can say please define the mongod DB and blah blah blah right um so that's fine that's completely cool and then we can say const connect DB right so I'm going to make a little bit of a helper function now now there's several ways you can do this you can do this when the it first starts out which is the easiest way but in this case I'm actually going to do a couple of things here so firstly we've already installed mongus so what I'm going to do is I'm going to say import mongus from the top and now first you want to see if I've already connected or not okay so if I've already connected to the database connections will already have something that I can check against so mongus do connection ready state if it's greater than one then we've already connected to our mongodb okay otherwise what I'm going to do is I'm going to make a connection with mongodb with mongus Doc connect right it's a little helper function mongus doc connect connection string and then it'll say connected to mongod DV otherwise it'll be an eror thrown and so forth right and then what I do is I export the default connection DB or connect DB so this my like kind a h database function and for the Simplicity I think today I'm just going to call connect DB whenever I have access whenever I want to access the database as a protective measure okay but you can call this at one point in your build and then only use it accordingly right quick little water break before we continue on but you guys have been absolutely awesome so far so let's keep on killing it guys so at this point now I'm going to go ahead and uh there we go so let's go ahead and do it now so at this point I've got the try and catch so we got our connect DB statement so after this we want to go ahead and create something called a model okay not model a Model Model A model right I spend too much time doing the UI stuff so at this point inside of my database I'm going to type in a new folder called models and inside of here I'm going to have a user. TS right let you make this user dots now this is essentially where all of the user logic will lie okay so I've got a bunch of things I want you to kind of you don't freak out it's just going to take time to understand what's going on here but I promise you it's actually very much worth understanding what I'm doing to make your life you know to help you improve your database sort of side of things right so in this case import mongus and document and schema PR mongus and import connect DB from the database the next couple of things are I'm going to Define what a user looks like now a user is essentially going to have a user ID and then it's going to have translations and this is going to be an array of a type called translation okay and I User it's just kind of a standard that we can use you can make it user as well but it's so that it doesn't clash with the far names so I'm going to also make a translation now translation simply has a from a two a from text and a two text so the from and two is essentially e n for like English es s for Spanish for example the from text will be the text that I've sent the two text will be the translated text and then the time stamp is the current time stamp and then what I can do is I can create something called a scheme for the translations so what I can do is I can say cons translation schema equals new schema the time stamp basically the default would be the type data but the default will be the the current date and this will be server oriented because it's happening on the server and then we have the from text from and all this is going to be string and then we're going to create a user schema okay now you can go ahead and separate translation schema if you want into a separate file it's fine but I'm going to make things easier and just do it in one file for now but then we got the user schema which is a new schema of type user okay and this will be the user ID and the translations and here you if you wanted to you can also I guess go ahead and cast I transation as well to make it like super robust right so now we've got the user schema so that's our schem is done the next step is Lawrence what's good dude welcome to the uh stream so now what I can do is I can check if our user model already exists otherwise we can go ahead and collect it so in this case the way to safely access our user like sort of schema is we can go ahead and do mongus mongus modes. user or so this would be if it's already basically exists otherwise I initialize a user instance off of our schema right so basically and this will allow me to safely interact with the database in a let's just say in a much more simple way okay so then let's think about the first step that we want to do when I go ahead and type in something like Hello World okay at this exact point after it de balances or I click the submit button it should say you know it does a translation at that point it should have saved into the database so if I go into my translate right so in this case translate so far so if I do it something like this now I can go ahead and do something like uh here so inside of push to mongod DB so let's go ahead look at this oh this songs Bango as well okay so now what I want to do is firstly I want to check if the input language was raw uh sorry auto right so if the input language was Auto then I'm going to change the input language to be the detected language so basically what this means is like it just basically is saying if the language is set set it to the detected language it came back because the data basically let's just say it uh once I sent it off to like you know Azure AI translate it's going to detect so if I'm speaking like Hindi for example it will come back with hi right so what I'm doing is I'm setting the input language to be hi so it changes from Auto to actually hi because in the database we want to know what language it detected right so that's the data came back with you know once we made that request and everything from uh hitting aure that's fine now we've got a try catch block so the try let's do a try catch block okay now the translation so we're going to create an object for that translation so it's going to be this two from from text and to text right and again you could even use the I transation so it transation uh you know kind of start type there but in this case I'm not going to do that just keep it simple uh and then we're going to create an add or for update user okay and this is going to basically take a user ID and the translation now I need to create this and this is essentially going to basically say let's also just conso log an error if if you know something went wrong um but basically what it's going to say is if the user doesn't exist it's going to add the user with that translation if it does exist then I'm going to go ahead and actually sort of update the user's translations to add on this translation so into their existing database right so in this case add or update user so let's go to our user and now we need to create this function okay so in this case remember it's worth mentioning just to make this extremely clear right when you're working with mongodb oh no mongus mongus is server side code took me a while to figure that one out but mongus is server side code don't get it twisted if you try and access it from your client it's going to mess up okay so just keep that in mind right so at this point now I'm going to create a function called so it's going to be an asynchronous fun function here it's going to be asynchronous we're going to export async function add or update user and this is going to take a user ID and a translation okay so like so right now inside of this we're going to go ahead and do a couple of things right and this is going to return a promise right so this is going to return a promise and inside of that promise we're going to have a user right so it's going to return the user object okay it's freaking out because it's like whoa whoa whoa you didn't return anything in this one blah blah blah that will be gone afterwards right so the first things first is with mongus we can do special queries to our database the first one is we're basically going to have a filter and this filter is going to check against a user's ID then we're going to have something called an update right now the update essentially does the following it sets the you wherever the user ID exists it will go into that record or it will create it so set typically in database terms is if if it exists add to it if it doesn't exist uh create it and then we're going to push into the translations our translation okay that we basically pass in as parameter now at this point here we're going to have a set of options as well so in this case we're going to have a set of options and I'll upset basically what I've done here to simplify this a little bit for you guys is I've gone ahead and actually added in a couple of things so a little bit of a you know a comment area so that way you guys can feel free in the code reper when you're looking at it basically upser it ensures that if the document is created if it doesn't already exist right the new Option basically allows us to it returns back the updated document after the operation is complete right if you didn't do that and you didn't you just made it false or you didn't include it it would return the old document right and then the defaults right so this one set defaults on insert so defaults meaning I believe it would be the um it would be for like the date and the the time so the time stamp right now at that point we're good so what I'm going to do is I'm going to await connect the database right so I'm going to make sure that we're already connected to the database now again you can actually not prevent this but if you just did it at one point in the code base but again this won't this is fine to have as a safety measure if you're trying to be defensive by because that way we can ensure that connection to the database is present before we continue on now I can have a try catch block okay so try catch block will happen and then this is where I basically use some something called user. find one an update right so this next bit of code is the interesting part so inside of our TR catchbook what we do is we say const user and this will return a user or a no right and we're basically going to say user do find one on update we pass in the filter which is basically going to try and find a user with this user ID we pass in the update and this is going to basically say update this user and push in the translations and then we got the options which are basically like for example as I explained previously right now once we get that back right what we can do is I'm going to console log it and then I'm going to say if there was no user then we should throw an error saying user not found and was not created right otherwise if all went well we're simply going to return the user okay now if it didn't go well what I'm going to do is I'm going to throw the error and just say error adding or updating the uh user right I'm just going to change to error okay so at this point now it stops freaking out because we are returning a promise as a user okay so that will work the way that we expected so now we've got this fun function add or update user let's go ahead and give this a try so on our front end here so remember this is from the this is a server component so it's okay to run this function so there we go add or update user and then the translation here is actually saying well actually it's not a type translation so if I was to go ahead and do this I actually because I I see what I did here was I actually did the full I translation but what I would recommend is the I translation actually has a bunch of other stuff because it extends document type so what I would do here just to kind of simplify it I guess is just kind of maybe I would Define maybe just the Tim stamp content and then extend that accordingly so what I would do here is actually instead of saying I translation I probably would just do from text to text and because I'm not passing in everything I'm just passing in I'm not passing in for example the time stamp here it's doing that on the server right so you can go ahead and make it a bit cleaner um tibero says say feature next is wonderful because we don't need to have a back into to manage database connection with your experience do you recommend doing this in larger applications I think there's a use case for both and I'll show you why in today's video as well so I do have a point where the root Handler instance can come in handy especially when it comes to revalidating tags I think I do that here in this build I'm sure I do yeah but anyway I'll come to that um but this isn't but remember this is still a back end right this is still a server action it's happening on the back end it's no different to essentially a root Handler it's essentially if you check the root request it's still like a post to the back end so don't get get too confused it's still essentially a backend it's just you don't have to write separate root handlers now right with this approach so um it still is a backend right so in this case it's just not the traditional sense so now that that's happened let's give it a try guys okay so at this point now if I type in and what I'm going to do to sort of see if this works is here I clicked in this and nothing is there right now okay so we don't see anything here so what I should see now if I type in hello world 23 let it debounce or yeah I could click submit and there you go hello Mundo 123 and let's go ahead and pop in our let's have a look in the terminal and we can see look user added or updated connected to mongod DB and you see how it says connected to mongod DB because the connection wasn't established before so good thing to have that right and next time I do it if I type in hello world 1 2 3 4 now it should say already connected so you see that the second time already connected to mongod DB but the first time it wasn't connected this is why the defensive program statement can actually come in quite handy and you see user added or updated and now you can see look the first one there was one translation and the user's ID was Ed at the end of it and the same thing happened again the user Ed at the end right so now you got the 1 2 3 and 1 2 3 4 so let's check in the database to see if that actually happens so we go to our mongod DB we click on our connections click down on test click down on users and we have a document and boom just like that I have my documents in there look at that guys absolutely beautiful stuff working the way that we wanted it and we can see in this nice little extension how we can actually go ahead and get things down the way that we need to so really really clean stuff that's awesome if you're liking that and you learned something new destroy that Thumbs Up Button okay so in this case that's working perfectly the way I wanted it um we're doing well for time right now so in this case we've got the add or update user functionality done so now at this point we've got you know what we wanted so we can actually add to the database so that's great so I guess next the natural step is I want to see that on the front end right so let's go ahead and go to our translations far so in this case app Translate page so here translation history so I'm going to create a translation history component and then I'm going to pop it down here and boom and you can see why these builds are so important because they really do showcase 101 different skills in different context right so RFC keep him we've got the translation history now inside the translation history this I want to keep it a server component so I'm my challenge really here is keep everything as much as a server components as reasonably possible so in this case for the translation history now what I want to do is I want to firstly get the user ID so I want to make sure you know you're authenticated that's fine so I'm going to go ahead and pull that from next cler again cler making things so simple as always really really nice right now for the URL what I'm going to do is I'm going to basically try and make a request to our so as I mentioned before I got a question previously do I need to you know get rid of the back and stuff well no um not entirely because in this instance I actually need to do something and the reason why is because when you're using the revalidate tags there's a way that you need to kind of work with your fetching and your revalidation that root handlers have a place for and I'm going to show you exactly what I mean by now so what I'm going to do is I'm going to create a root Handler so the root Handler is essentially going to be we're going to call it a folder and this this is going to be called a translation translation history and this is going to be a get request so I need to make a root. TS file in here all right so inside of here now guys what I want to do is I want to have a get request so to make next year root handers work what you do is you simply have the following and then you can have whatever so now I can make get requests to our you know our domain for SL transation history and I can make it if I make a post request and you can just make it the supposed to delete patch so forth right so these are called root handlers in nextjs now what I can do is I want to pass in the uh user ID alongside this right so we can actually go ahead and do that right now so if I have the um and this is not really sensitive information so I don't really care I'm going to pass it in the get request is completely fine so what I can do here is if I go ahead and I'm going to create a URL so go to my um translation history and I'm going to say const URL equals okay now this URL because it's on the server side component you have to actually pass an absolute URL so what I'm going to do here guys is I'm going to check against my local development environment by saying if the process. environment. node environment is development then it's going to be 3,000 otherwise it will be the deployed URL which is Vel URL and that actually gets populated when we deploy to Vel automatically and then I'm going to do for/ transation history and then I'm going to append a query program uh which is user ID okay so this will basically be the request that I make to the back end okay now in order to make that request all I do is I basically say con uh response equals await and in order to await I need to go ahead and do asynchronous and I'm going a fetch to the URL however I'm going to add in an option here and this option is going to be next and this is the core part so I'm going to add a tag in here now the tag is really important because what this tag will allow me to do is from a server action I can do something called a revalidate tag and what it will mean is that wherever I use a fetch statement and I have this tag once I create any mutation for amount example remember when I did that translate server action and I changed the data in the back end what I can say is okay revalidate the tag translation history and then when I call that function any fetch that use that revalidate tag will actually refire off and then it would basically refetch the data and update the UI so in this way with server actions you can actually have the UI update accordingly which is really powerful and really nice and you can keep everything as server components and it will stream in the new data which is just sick okay so at this point now we've got the response there and then once that comes back what I would do is I'll take cons translations I'm going to destructure and I'm going to say from because I'm going to say the type of data to come back is going to be trans trans ation uh and it's actually going to be an array of I translations I translations right uh and then we go and we say equals from await responsejson right so in this case I'm all the responses will be translations arrays right now obviously this is not the case it's not working right now perfectly so uh what we need to do is we actually need to create that endpoint so we go to our route. TS inside of our translation history and we need to write it so what I'm going to do is firstly I'm going to get the search PRM and the way we do that is we do search request. next URL search pram so this will be that you know at the end of the URL where it has user ID that's where basically how we get it like so and then what I do is I'm going to create a new function called get translations inside of my user schema and I'm going to return it inside of the response. Json okay so very simple bit of code right now and then the get translations we have to create so for get transations what I'm going to do is inside of my user uh model here I'm going to create a function which will get me all of the translations for a user right so let's do the signature first so inside of here I'm going to create a new function and this right here is going to basically be get translations it's going to take a user ID and it's going to return a promise which is an array of translations now all we do here is we're going to try and firstly await a connection to the database right so first things first await the connection to database then we're going to have a TR catch block so a try catch block simply but right so at this point now what I'm going to do is I'm going try to find a user now this is a nice thing about mongus when I go ahead and do something like the following I can say cons user user or no wait user find one and I pass in a criteria to find and if we look at this it finds a document if there is a match otherwise it will not be a match right so if there is a user now I can basically go ahead and do the following so firstly I'm going to sort the user translations by time stamp in descending order so I can say user translations. sort and I simply are rearranging it right and then it will return the translations after I've sorted them this way this way whenever I make a request to the uh the back end it will always go ahead and give me it right and then afterwards I can go ahead and throw an error if nothing happened here okay so in this case throw error okay so this point now you can see we've got the uh if there is user that is found so this will give me all the transations it will sort them and then it will return the translations in the correct uh appropriate response so now we can go ahead and pull this right now inside back over at our translation history page we can go ahead and pull this in and now with this what we should see is translations will go ahead and give us on the um we should be able to get a translation so the way you can test this now is if we simply go ahead and we clear our logs with command K if I refresh we should be able to see if I have pulled that in correctly uh is do page Translate translation history save already connected to mongodb and you can see it's it's pulled them in guys look at that so as soon as I refresh I'm going to clear it I'm going to refresh this page and I'll show you look it pulled in the translation history from these translations right and now I want to show you something right so I'm going to clear so you see Hello World 1 23 and 1 2 3 4 if I go ahead and say uh let's just type in let go Papa Farm NOW Watch What Happens I'm not going to touch anything I'm not going to touch anything at all but look at what the key thing that happened right it went ahead and it did a mutation now bear in mind it didn't have any logic here to recall all it had was a tag translation history okay so the key part here is oh but in this case it's not showing you the refetch I guess but still uh translation history but when I actually went ahead and did that mutation on our action so our translate action what I want to show you is the key bit of information here that will make it all work on the front end is this right here if I type revalidate tag okay so when I do revalidate tag after I've manipulated the database what will happen is it will basically say wherever you use the fetch to go ahead and get the history I want you to go ahead and actually just scrap that and and do it again right so now it would refetch this so if we see this what we should see now is we should see two outputs one when it does it and then it would also go ahead and reun or show it on the screen so here I can say douche douche like those two lines so we know it's in this file so in this case we see that right now if I let's go po found 1 2 3 and let's let us do this thing okay so now let's have a look what happened okay so already connect to mongodb and then use added or updated okay great stuff now I will show you that this actually works in in production right in the way that we expected to okay so if we go to our translation history now code name says so love you tutor greetings from deut what's up good to see you here got some Germans here I love that right so now I'm going to have a H1 with a history there we go and we're going to start styling out getting it look good so if translations. length is equal to zero I'm going to say no translations currently exist okay so I'm going to keep keep it very simple at this point we do have translations so I'm going to show them now I'm going to have an unordered list and in this unordered list I'm going to firstly have a bit of styling so this will have like a divide order so we go very simple and then I'm going to say it's going to have a translations. map so in this case this is actually what I wanted so translations. map and then I'm going to have a list element now this list element is going to have a key and this is going to be the translation. ID so you can see we've got a lot of things here but one of the key things is actually the ID of the document okay and then inside of this we're going to have a div and I'm just going to go ahead and actually save us a little bit of time here so the first thing is I'm going to have a div inside here now this get language is actually going to be a simple function which takes a country code and Returns the full uh English word for it so in this case country code so for example I pass in like es and then we use the international sort of API which will basically convert it to English and it will return the language in English so in that way if it was like Spanish it'll be es would turn to Spanish so let's go oh look at that guys look English to Spanish English to Spanish oh nice okay it's looking good okay so after that div what I'm going to have is a P tag with a time ago text and I'm going to have a delete translation button so I'm going to say time ago which and then we'll have a delete right so I'm marking it out and let's just style this out however we need to so for this list element we're going to have a class name and I'm going to say this is going to be Flex relative and a bunch of other things okay boom so let's go and do that nice look at that oh nice beautiful all right I'm just going to read a comment here hunia says man sun is so knowledgeable I would love to see a custom builder something he's passionate about developing instead of a clone I'm definitely thinking of doing a SAS Series where I just build a SAS every week or something like that and then uh yeah we'll see where that goes all let me know if you interested in that smash like button pry little War break okay we're going really well right and we actually we got a lot to do as well so let's keep on let's keep on smashing it guys so at this point now that would be pretty cool okay keep it in mind awesome stuff right so at this point now if I go ahead and let's test that it works with the revalidate tag logic okay so I'm going to go ahead and type in something like hi there and exclamation mark and wait for it revalidate so oh my god it works look how clean that was look hi there holla and then boom it went ahead and it in there English to Spanish and it auto detects if I went ahead and did this and change this to like English for example well let's just do Greek for example right so I want to do German oh no um yeah I'm going to do auto detect to German look at that H to hello okay I guess right but there you go um yo Frank goes yes please do assass series oh I love that Max goes love the idea of assass series as well Jay add that to the to-do that is that's what I'm going to do I'm going to do a SAS series and go crazy on it right so guess that's done right so in this case look at that guys absolutely looking beautiful stuff and the revalidate tag is how we actually managed to make it do it so if I just want to show you guys something if I didn't have the revalidate tag in the translate action I want to show you what happens so if I get rid of this right and then now I do this watch this if I type in hello world watch this hundo but nothing you see how nothing refreshed because no revalidating tag happens so in this case if I do this after the uh mutation happens what we're saying is pop wherever you fetch from and recall it right and then refetch it so in this case now hello world 1 2 3 it will revalidate the tag and boom so that's how you get the server action flow updating the UI okay so in case you're wondering that's how you do it okay now next up let's do a time ago text so I'm going to do something very nice here so time ago text is pretty what I'm going to do is I'm going to create a nice little uh kind of a little this is again a gimmicky thing but I want to have it like you know 5 Seconds AG go you did this and 5 seconds ago you did that for example so here I'm going to type in time ago text. TSX and then I'm going do RFC boom and here I'm going to create a package um inst import a react timeo package so here I'm going to go ahead and get rid of this and do mpm oops mpmi react time ago like so okay now here I'm going to import react time ago like this make this a used client and I believe we have to import the type definitions ourself so again this is the little hack to do that boom like so I like this song and then this is going to take a date object so in this case take a date and this is going to be a date which is a string okay and then here I'm simply going to return a react Timo component where the date is going to Simply Be the date that we passed in okay and now this is going to be a client component you see what I'm done there is I've basically Gran to a very granular level I've gone ahead and made it so that I don't change everything to it I just changed that one instance that I needed to a client component so here I'm going say P tag and I'll say time ago text right date like that okay and what I would actually argue that I did wrong here no that's fine it's okay translation do this is not going to be this either this is going to be uh a new date I say translation. times stem and to ISO string okay like that and then here because I made the above container relative I can absolutely position with it so I can absolute top to oops top to right to uh text Gray guys let me know right now as well little side question right while I'm talking about this make text more as well if I did a sass ser series and you guys actually like the product would you consider using the SAS product let me know right now in the chat I'm super curious cuz I'm like hang on a minute we have something big here I just kind of clicked in my head I think that would be an awesome thing to do look at this guys as well that 2 minutes ago 4 minutes ago 7 minutes ago a minutes G nice it works R Halo World 124 you can see now 2 seconds ago 3 seconds ago the only thing I would be careful of is when you refresh you might get a little there you go and this is just because the server get 6 seconds Cent Get 7 Seconds one one second ago so it's fine you can ignore that error yeah okay but Frank go absolutely would use it okay done I'm going to do that Frank you you literally sailed my mind there I'm absolutely going to do that d goes hello what's up dude good to see you all right next up is we're going toate create a delete um a delete button okay so let's go ahead and do that right now let's create a delete button so we're going to take delete translation button let's draft it out and this going to take an ID of the translation post so this going to be the translation doore ID like so so let's create a delete let's create a delete translation button right so I'm going to go ahead and create uh Delete translation button uh go back RFC oh God what did I do don't do that don't do that yeah do what I did that RFC right boom okay now this will take an ID which is a string so ID which is going to be a string and then this will also be a uh server component however here I'm going to make a call to the back end which will essentially allow me to uh Delete now I'm just thinking about something what have I done here yeah I'm sorry I made a silly mistake um yeah that's cool okay this going to be a client component so use client okay now here's a little trick as well so I'm going to show you sometimes you don't want to use a server action within a form in this instance I want to create a server action to get the benefits of server actions and revalidates and all that kind of thing but I want to have it attached to a button click so I'm going to show you an example of how to do that so in some instances you may not want to submit a form in the same way you just might want to have a kind of a a click like uh effect uh so we're still going to be wrapped in a form but I'll show you a little trick around this right so let's say we had a form and then I'm going to have a button now this button I haven't actually installed yet it's going to be from Shaden so let's go ahead and do uh from button from Shaden boom boom here I want this button so command J import there so command J to hide that as well so that'll be done in a second and now for this I'm going to say uh button boom import it from there like so uh don't do what I just did okay and then this will go ahead and have a trash icon so a trash icon you automatically get lucd react icons when you go ahead and do um uh install Shaden so this will have a trash icon and then what I'm going to do is I'm actually going to have the type of the button be submit the variant uh a few other factors here so the type will be a submit button so essentially you are kind of submitting this button as a form still but uh I'm going to change a few things I'm going style it up as well and then what I'm going to do is uh let's actually just import it right now as well so we can see what we're doing so like so delete translate button so you can see that we've got the button there looking pretty nice but it's not doing anything right now okay so what I'm going to do is I'm going to have a form action and this action is going to be for the delete translation action like so and what we can do is we can actually bind things in what's up good to see you man we got some ogs here today as well what is up man I love to see the papa fan members in the house it's worth mentioning guys that if you haven't already had a look check out zero4 I just dro the link in the chat right now it's also the third link in the description where you can be one of our ogs and actually learn to absolutely crush it en code uh in in the way that you deserve to right somebody goes um India I really appreciate for developer can you make a video related to boo match dating app please humble request yeah I'm actually thinking to make a dating app next again so I might do that so that might be pretty cool all right so in this case now I'm going to create a delete translation action so let's go do our actions I'm going to create a new file inside of here delete translation action and inside of this I'm going to go ahead ahead and delete translation I'm going to create a function like so this needs to have used server at the top because it is a server action okay now interestingly enough you see how typically you're like sun but you don't have form data who I don't actually care about the form data here because what I'm going to do is something a little bit different I'm going to bind a value to our action okay now you're probably wondering what the hell like I'll show you it's pretty cool basically we have the delete translation action so I need to go ahead and Export this let's do an export default there we go and let's go ahead and import it here uh Delete translation action okay I mean I'll Import in a second but really it's going to be from here delete translation what did I do action oh okay there you go and this would be boom like that okay now what I'm going to do is oh sorry I've completely messed up okay so what we're going to do is we're going to create a delete translation action and what we do is we take the delete translation but we bind a value to it so the first value is actually you know I think it was the the this instance but in this case we can do no I want to bind the ID to it okay and now we've got a separate variant of this right which is essentially going to be this so we click into our uh Delete transation why is this not happening canot respond uh let's do delete translation delete translation let's save that let's get rid of that let's see what happens just's import okay there we go now you can see that this is a promise void there we go there we are nicely and now I passed the ID through to that so I basically binded the ID that we passed in down as a prop into our delete translation actions so that way I get the ID directly here without any doing any form data Wizardry or anything like that so now once we have that I'm going to firstly say that you know not everyone should be able to access this so I'm going to protect it very simply by adding in or protect so you can see the benefit that I'm trying to get across now with using cler core 2.0 it's just so clean honestly really really nice now what I'm going to do is I'm going to get the user ID and then I'm going to go ahead and say con user and the user is returned after we to make the removal but I'm going to create a little helper function called remove translation it's going to take the user ID uh which will be absolutely be you know uh present here because you were protected so we'll have to have that so I can ensure that we have it and then after all of that I'm going to revalidate the tag to ensure that we update the user right so ensure that that we update the uh details on the front end so revalidate tag so boom next cat you can also revalidate a path entirely but I'm not going to do that I'm just going to make it very simple after all of that I'm going to return translations which is stringifying user translations right but let's create this helper function so this helper function is inside of modeles so we're going to go ahead and create a new helper function so inside of our modeles user let's go ahead and do that right now so we're going to go down to our bottom and we're going to typee in I'm going to bring in the uh the signature of the header so in this case boom it's going to be uh takes a user ID and a translation ID and then it returns a promise as a user so first things first is connect to the DB and remember that has a defensive statement which stops it from you know if it doesn't work so we say try catch around it and then the first instance for firstly if it all fails and it goes like you know heads up then we're going to go ahead and pop in an error tag right and then if but if it doesn't fail then we're you know we're going to try this first we're going to find one and update now here's the key part okay so in this case we're going to use this user find one and update function if you highlight over this it automatically finds the first document that matches the filter that we pass in and applies the update now here's the interesting part so this is the filter finds the user with the given user ID so it'll match against the user ID the next bit is pull now pull is the interesting part pull is basically we pass in you know what we what we're trying to pull from it so this will go into the translations collection and it will find the document with that translation ID and pull it from it so essentially removing the translation with the given ID and then we can do new true as a third options parameter to basically return the updated document because you know in typical use in typical flows we want to return the update document in case you don't want to do a refret or you want to do a tanack sort of approach things right now the next step that we can do is we can simply say if there is no user we can go ahead and say he's not found otherwise we can do a translation remove so in this oh what did I do here sorry don't do that it should be in the try and then there you go okay so in this case if there's no user then we throw the error otherwise translation was removed and we return the user now if all was done well we simply just import this I'm confident because we're revalidating the tag and as simple as that guys now because we've done inside of our translation history let's go back to here I passed in the ID of the translation ID so that now this will work I guarant this will work so hello world 124 if I click it it will remove that from the database let me pop my server logs up here because it's a server action that's going to go ahead and happen so let's go ahead and clear it hello world 124 already connected to mongodb Boom it went ahead and did it and it removed it from the database so you can see look at that it says translation removed and it returned the new user and again I'm logging this out for you know debugging but you can feel free to not log out if you don't want to so let hello world 1 23 got rid of it hello Mundo if we can get rid of this German one and now we've got a full you know crud set up so in this case let's get uh let's go Pap 1 23 and again it still all works nothing's broken if I said yo what is up guys and then you see de balance boom there you go nice I can carry on delete in look at that perfect works really really great stuff okay the next thing is this submit button sucks I don't like it I'd never have liked it I want to have something a bit cleaner so let's go ahead and update that button so now over here the submit button so heading back over to translation form we're going to go ahead and create something called a submit form a submit button but this submit button is going to do something pretty cool because it's a child of a form I can do something pretty cool with this by tapping into something called the use form status so I'm going to go ahead and create something called a submit button component so submit button. TSX TSX and I'm going do RFC boom and now this is going to be a use component like so and inside of this guys what we're going to do is it's simply going to be a submit button and I'm going to pass in a disabled prop because we're going to have the ability to say if it's disabled or not and I'm going to go ahead and import two things use form status and the button from our UI library and then I'm simply going to return firstly I'm going to get the pending St so what this does guys is this if you have a child component uh if you have a client comp component which is a child of a form which is using a server action okay so you have a server component which is firing off a server action if inside of your form you have a child component which is for example in this case a yeah it could be anything actually but in this case I'm using it as a submit button because it's a child client component you can tap into something called the use form status and I can check if the form is actually pending so if I'm submitting and it's pending the sort of you know the server action and then when it comes comes back pending will be false so I can actually tap into that and do things accordingly to that so what I'm going to do is I'm going to go ahead and say the following rather than rending this out I'm going to say a button type submit disabled or if if it's disabled or if it's pending and I'm going to basically pass in the appropriate and if it's pending I'm say translating otherwise just translate get rid of that now I go into here and what I'm actually going to do now is this submit button I still need this guys because we actually use for the debounce right but what I can do here is I can make this a self-enclosed um oops I can make this a self enclosed component and I can actually say it's just hidden so it's a hidden submit button so it's still technically there for the Dom to actually go ahead and you know click it but instead now I'm going to do submit button and have this right which is a lot better and I'm going to say the disabled is going to be if there is no input and guys look at this look at firstly if there is no input uh so if I get rid of the input look at that oh nice right and I'm going to go ahead and just sty this a little bit to give it a bit of spacing margin top of five flex and it should be justify on the end and look at that by default on a phone it's full width otherwise on look at that oh so nice right now I want to show you guys something look pay attention to this if I type in hello world translating oh look at that nice guys and if I typ change it to be like you know German for example and I do translate hello what and you see how it just everything flows in the way that it should right and that's how you know good development is like now I'm not worried if I'm going to break something else I just know it's going to work if I revalidate a tag it's going to refret where it needs to refret this is good development okay smash that like button as well guys honestly this build was way more than we originally thought right so this is like a huge learning Cod to add to your portfolio uh I promise you it's a big one that you want to add so just teaching so many skills here honestly it's crazy so while we're done now with this part I'm going to go ahead and add in The Next Step which is essentially to add in the firstly the speaking out and the ability to speak into the microphone okay so let's do that right now so the recorder is what we wanted to do next so the recorder I had listed over here inside of our translation form so I'm going to create this component and we're going to slowly build it out okay and then I'm also going to have the speaking element as well so firstly I mean let's do the speaking element first I think the speaking element will be a bit easier to get out the way so I'm going to do that one first so I'm actually going to have the play audio let's see uh in my second before my text area yeah so here I'm going to have a button and this button is going to be a button and it's going to have just a very few simple things inside of it it's going to be a variant of a ghost so it's you know there's a couple of variants you have out of the box and we're going to fire off a play audio function and then all this is going to have is something called a volume 2 icon so Volume 2 icon right and in this case boom like so now this is going to have a little bit of styling and a size of 24 so I'm going to pop that in right now so there we go boom and let's go ahead and pop that in and now we need to create this play audio so this right here is going to be a function so if I go ahead and get rid of this you'll see that it's going to be there for now right and I obviously start that out cuz it's not ideal that's not where it needs to be so in this case now I'm going to go ahead and um let me just go ahead and put song back on um so in this case boom we've got this so if I type in now into this you see how there you go so like I it's not disabled if that's the case right so I just need to add a play audio function so over here now I'm going to create a function called play audio so let's go up to top and we're simply going to say const play audio equals and it's an asynchronous function and this is going to basically have the following now I'm going to make this one pretty simple right so what we're going to do here is we're going to say syn equals window. speech synthesis this is using a uh API and if you watch my last build from the Siri assistant clone you'll know how this works really nicely right so I've actually allowed you to have different options in that build to select the voice and that kind of thing in this instance I'm just making it very simple by having a default voice that is used from your web API right so in this case if there's no output or there's no synth return defensive programming statement and then I'm going to Simply have the words to say so in this case we have new speech synthesis utterance and what this basically does is it basically allows me to pass in some text and then I can simply go ahead and say to the synth object speak out whatever I have here and that will do exactly what we think it will do so if I go ahead and do speech uh say so in this case I I type in hello there like that now if I go ahead and type in holla so let's do something like German I do translate so now let's do this and now if I type in uh turn the audio up here hello hello there you go hello that's it perfect so now we've got the web speech API side of things right so awesome stuff hello right amazing amazing stuff so in this case we got there hello right and then if I hello one two three hello 123 so I mean it's not 123 but that's fine it still works right so there you go look we've already got that working nicely right so you've got a simple version of that out and working the way you expect it and now I just need to style that accordingly so what I'm going to do is actually wrap the second div so in this case where we have the second text area so between the button and the select I'm going to have a div around all of that so I'm going to cut that outside the second button pop it there as well and here I'm simply going to have a flex container um which if I show you here as I go ahead and save Flex items should be centrally aligned just to be sure and then justify the space between and now you can see look at that boom hello 123 boom and then it goes ahead and blanks out if it's not there you go we have the speaking functionality down right so in that case with the web speech API has been implemented The Next Step guys is actually the uh I'm going to do the um the ability to speak into the microphone so in this case I'm going to show you here for example a quick demo so here if I was to type in let's do it right now hello world 123 and now you can see that this one would say hello world 1 2 3 okay and again I've logged out of my 3001 so ignore that but the point was is that you saw how it would typically work right so in the actual row build this is going to work so I'll show you right now how to do it okay so the recorder let's do it so I'm going to have a recorder component here so we have a recorder and a upload upload audio function now here I'm going to have an upload audio function and this is going to be pass through and there's a reason why we have to do it this way because I'm going to have a few things I'm going to interact with from this component which will help us out a little bit now this recorder right here let's go ahead and just pop in like a dummy sort of um a dummy signature here so in this case asynchronous and it takes a blob now blob is typically a file uh thank you so much you goes thank you for the awesome builds honey I love all your builds there's always something to learn from it even if it's little you're doing amazing work by bringing high quality content and fully functional builds thank you so much I appreciate you every build has a little gem in it that's my goal it always teaches something new in each of these builds so I'm so grateful that you see all of that thank you so much man so for this upload audio we're now going to go ahead and um do the following so firstly I'm just going to prepare two things and then I'm going to start building the recorder so I'm just going to have a MIM type so this is going to be the type of file and then we're going to prepare a file based on the blob that we pass in so in this case we just create a new file with the data the audio uh in this case mime type so here you can actually just say mime type so mime type there we go and the type M type okay now after this we're going to actually um let's do the recorder first okay so at this point recorder let's create a recorder. TSX component RFC boom and this one is going to be a use client component now for the recorder we've got a few things well firstly we you're going to have a m type now you can actually make this consistent by importing that into the previous file where we using used it that's probably a better idea and then for here we're going to have upload upload audio I'm just going to pop it in cuz I've got the signature down here upload audio and remember the signature same thing for that again you can have the type of the previous file and import that in so that's another way of doing it as well now in this one we've got a couple of things are going to happen guys we've actually got um a few a few there's quite a lot of things actually happening here um okay so I'm trying to think about how I can show you this I'm going to show you all of it and and and then I'm going to sort of break it down okay let's do that so first things first let's go ahead and get a little bit of a div a little bit of styling set up right so first thing what we're going to do is have a mic icon with a little bit of styling underneath it yo thank you so much I appreciate you so much dude $20 donation by my guy thank you you so much man huge uh I'm going to go to my page translate uh not this one sorry uh translation form where's the recorder go and pop that and boom like so okay so we should see there we go little microphone right and now with that I can go ahead and start styling out a bit I don't know what happened there what the heck is that happening all right and again as I mentioned before guys if you are getting stuck at any point here remember the first link in the description fill out that form put in your company name which is is just your personal name if you don't have a company and the first link once you get through to that will be all of the code from today's build so if you're getting stuck at any point remember you can go ahead fill out that form first link in the description GitHub repo is right there that'll give you access to everything that I'm doing right now in case you get a little bit lost behind okay now I'm going to have a sort of a quick step which will say get permission now if you don't have permission here we have to collect permission from the user so I'm not going to focus too much on the UI here for this part but all I'm doing is I'm having a US effect which basically gets the microphone permission from the user now all I do here for this function again I'm going to go ahead and pop this in it's more of an explanation step here is cuz it's not too much of a fancy thing happening it's just a function and we basically check if the media recorder is in the window or not we try something we basically go ahead and say navigate or get user media this is where it pops up saying can we access your uh your audio right and if you put in video as well it'll ask to access your video as well now after that we're going to have two bit of state which will C capture the permission and the stream so what we do here this is a media stream API so I'm going to go ahead and pop that in like so so let's pop in our use state so we have the permission now and we have the stream okay so those two things are there ready so now once we have this this will go ahead and say get microphone but in this case I've already allowed it to have access to the microphone so in this case you can see it's microphone allowed so it got rid of that otherwise if you click it it would say get the microphone and also by having the use effect here it would automatically pop up theone first time that you go ahead and actually do it as well so a little bit of a little just nice little trick there okay the next step is if it's pending then we're going to go ahead and say recording otherwise stopped recording okay so underneath this we're going to have pending now if where is pending coming from well pending is actually a Ed form status now in My Demo right now I'm not going to lie to you it's not going to do the pending State because the recorder component is not inside the form action but if you wanted to you could actually go ahead and pop all of this inside there like so and that would actually work the way we want it to so I'm actually going to do that right now in hindsight I should have done that so in this case we can pop the form action like so out of there in there and now because it's a child of recorder it should get exactly what we wanted which is perfect right so I don't know why I didn't do that I'm going to push that to the main repo afterwards as well so inside of this a recorder now as well so now this will have pending yep so pending will work the way we want it so recording status uh we do not have recording status currently will have the following it'll be Rec stat there you go you state and then this one I'm going to have as it will either be active inactive or so you can you can actually add type definitions for that if you would like I'm going to keep it again pretty quick and simple here now underneath for the UI we're going to check against two conditions one if we have permission and the recording state is this is inactive and it's not pending then I'm going to have a button which says speak okay and this will trigger off a function called start recording and now if it is recording we're simply going to have another button which will say stop recording okay so now we're going to create two dummy not Dy functions actual functions for this so I'm going to go ahead and create a function called start recording so the start recording function essentially will look something like this and then I'm going to have the same thing for a stop recording so now we should stop seeing the error so now you can see speak or vice versa right so firstly just style it up a little bit so it's a bit nicer I'm just going to add a simple D div style here which is going to have annary uh operator here which basically says Flex centers everything and then if you're recording it changes the background to red and so forth but you can see that it lines everything up if I click it it will say sto stopping recording uh there you go what it say stop and recording why that's that's ugly stop and recording um P record say should say stop recording there you [Music] go so if I do Hello World boom okay so in this case ignore this this is bad right now we will fix that okay now after this the start recording button we're going to go ahead and tap into this so for start recording first thing we're going to do is we're going to set the recording status and we're going to go ahead and check little defensive programming if we we haven't got a stream so if we don't have permission and we don't have a pending State then we're going to return otherwise what we're going to do is we're going to start recording from the users's microphone so the way we do that is we use it the following media recorder. current now if you're wondering where the heck is the media recorder well we just create it at the top over here like so and we have a US ref like so now media recorder as I mentioned before is when we get the permission for the microphone okay so in this case we'll have it there and then the way you collect data is your actually collect it in something called chunks so when you actually collect the audio it's collected in chunks now when the data is available all we do is we essentially just push those chunks together so basically as in when the data is available through the recording it just we just push the chunks eventually we have a uh like an array of that audio file and then we're going to set the audio chunks to be a piece of State okay so the audio chunks will simply be a piece of State here like so okay and then when we hit the stop recording button what we're going to do is similar to that we're going to basically check firstly for a little defensive programming statement and then we're going to set the recording status to inactive and I'm also going to tap into the Stop function so in this case let here I'm going to stop the uh recording and then on stop we're going to tap into the function we're going to say create a new audio blob right and this audio blob is going to be this right here so create a new audio blob and it's going to be basically a file representation of that audio and then we're going to upload the audio so this this is the file that we passed in as a prop and then we're going to set the audio chunks to blank again after it's done okay so the upload audio now is where the magic will happen Okay so if we go to our upload audio file so if we go to translation form this is essentially where it's all happening now so the upload audio is where all the magic will happen so if we go to play um sorry translation form this is where we essentially need to do everything so now what I'm going to do is I'm actually going to mimic it as in a form so we're going to make a post request but firstly I'm going to create a basically a fake form data not a fake but like a form data instance and I'm going to append to that form an item called audio and that's just going to be the file okay and this is basically how we do Post rest API requests right so I'm basically going to make a post request and pass the form data inside of it and what I'm going to do is I'm going to make a response uh I'm going to do con response equals a weit fetch transcribe audio so I need to make this endpoint I'm going to push it as a post request and it's going to be form data okay now once that's done the text will come back once we've created that and if there was Data if there was text inside of the response I'm going to set the input so basically what will happen is I will be able to talk it will go ahead and it will uh go ahead and make a request is transcribe audio which will connect to whisp you know AI transcribe it come back with some text then that will go ahead and pop it in here this will then trigger the debounce that we saw here because the input would have changed and then it would submit it by automatically you see what I mean like what the that's how you do some nice stuff in coding like when it just works like that so nice right so in this case like we're going to go ahead and create the uh transcribe audio uh endpoint okay so transcribe audio and now what we're doing guys is we are creating so if I do route. TS we are creating the whisper AI integration segment okay so now this will essentially be creating this is where I go ahead and I send the audio to um Azure open AI so essentially what I need to do firstly is I need to install Azure openai so this is where we basically are interacting with Azure open AI services so I'm going to go ahead and do mpmi as your open AI like so yeah and then we've got the key credentials and all that stuff which I'll show you how to do in a second we also want to get the next response here as well now I need to get the form data so remember we passed it through as the audio file so what we need to do to get the actual audio through so whenever you send audio across a post request like that easiest way through a form data do await request. form data get the audio as a file and then you go ahead and you can console log it to debug to make sure that you're actually getting the file sent through which is what I would do to make sure you're correct now what I would do is I would check to get make sure all the Azure credentials are present so check all your process you know environment keys to make sure everything is set and this is all going to be the stuff that we set earlier on and I'm also going to check if the file size is zero if the file size is zero I'm going to return sender and one saying y nothing came back okay and at this point I don't actually check against sender and responses that kind of thing I mean here you can really change it up to be text nothing text could be blank and so forth and then what I'm going to do is I'm going to create a basically I need to convert my file into a a format which you know um is expected by the open AI client so in this case what I'm going to do is I'm going to get my file trans translate to an array buff which is like a string of text basically uh make it a new UI uint 8 array so basically this just think of this as one long sequence of characters okay and then what we do is we create a client instance of open AI so in this case boom say open a new open AI client and we pass in the endpoint we pass in our key credentials which is our AP I key again we set all this up in the beginning and then we basically go ahead and say await client do get audio transcription we push it to the deployment name we push the audio that we're trying to get the transcription for and then if all went well guys we should get the transcription as result. text in which case we simply go ahead and return a next response with the Json of text result. text right so in this case like so and you'll notice as well I did a root Handler earlier I probably should have actually returned this as a next uh response to be honest with you so in this case let's just do a quick little refactoring job here so in this case I did that here so this should ideally just just to keep things nicely should do it like that that's nicer okay just in case you're wondering to get all the correct headers and everything so in this case next response Json result uh there we go result. text so now let's give it a try let's see if it works so the way I will know if this works is because inside of here now we'll hit the trans subcribe audio and you're probably wondering but why did you have to do a absolute URL earlier because when you're in a server component guys you have to basically because you're on the server it doesn't know what the what the URL is that is trying to reach whereas if you're on a client it already knows the host URL the referral URL so you can just go ahead and say for slth current URL whereas if you're on a server think about it you're in a server instances it could be loads of different things that can go wrong it needs to an absolute URL so that's why I went ahead and said if in the dev environment use Local Host otherwise used it for sell URL so that's that's why you go ahead and do that step so let's give this a try now guys I'm going to go ahead and mute my audio and sort of let's see if it works yo what is going on guys it's your boy Papa react and today we are building a Google translate 2.0 clone if all this worked well smash the like button hit stop and now wait for it wait for it let's see what happens let's see if it's doing it is it doing anything did it do anything okay it didn't do it so why did it not do it so let's have a look what went on so if we go down here an error occurred and the error seems to be in aure credentials not set okay so I simply have not passed in my Azure credentials so at this point you would have to oh my goodness I made such a stupid mistake earlier okay I know why oh I made a stupid mistake guys um so here we needed the actual um I actually did something quite okay I did something really stupid there okay so we got to go to translate uh transcribe audio here right so completions name undefined I don't need this in this build for completions right we just needed the assure deployment so we don't actually need that because remember earli I got rid of the completions in the code we don't actually need that so now let's give it Hy and I promise you this will work okay take two all right so let's go ahead and say yo what is going on guys welcome welcome to the Google translate 2.0 build if everything went well I need you to smash the like button and subscribe right now and don't forget to turn on the Bell icon Bell notification icon okay so now it should be transcribing it oh look at that boom ah nice and then it says stop recording at that point so I want to change one thing that I did not like um but firstly that worked really well so look y what's going welcome to Google Translate if everyone well I need you to smash like button subscribe right now and don't forget to turn on the Bell notification oh my my goodness what the hell that is so sick yeah that is so nice I swear to God um the only thing I didn't like there was the pending state so uh in the button so in the recorder when we had the pending state it said recording so it was where was it let's try again it was let me see what it said so hello world 123 stop recording right so stop recording so pending recording if it was pending okay so here I'm not too fuss to be honest with you if it says this or not so I think we can probably safely even remove this I think let's give this a try one more time so hello world two3 okay so recording so at this point it's getting rid of that so I've done it slightly different in my one uh I've done it as recording status is recording okay so we can now do it wouldn't have to be if it's recording or not it could just be if it's translating so translating so translating let's try that now so what's going on guys one two three okay and if I do something like hello world that will still tap in that's the thing so you okay so because it's tapping into the overall submission um okay so it's more a case of if it's recording and so if it's not recording and otherwise it could be inactive okay so inactive recording so we could have a third state to capture this but right now for example it's just going to go ahead and say translating on here as well you can do this if you want I'm not too crazy about this to be honest with you I think in this instance I would be happy to remove the pending um for me it's not really an absolute must but you can feel free I hope that kind of cleared up what I was trying to say but for the pending State here to be honest with you we can go ahead and simplify a code oops I don't actually like the pending state in this example here but you can feel free to mess around with yourself so pending is out um let's give that a try now so if I do Hello World 123 this is a YouTube Demo Smash that like button if you enjoy the video and now you can see it will be go ahead and boom this is look at that perfect nice and look at just like honestly guys I so fast that is using the whisper AI translation service from Azure so Azure open AI we've deployed a model which is the whisper model and then it's going ahead and basically taking my speech inputting that returning the speech through a route handler was in API inpoint that we created it populates the input F the input F de bounces which then goes ahead and and submits the form which goes ahead and hits the Azure AI translate uh API and then it goes ahead and translates it and then it mongodb pushes it into our database revalidates the tag which causes the refetch to happen and boom it happens the way we expect it just easy right like super super simple I'm joking is I know it's a step it's a few things that happen but honestly it's so much power it's just so good like it's so powerful I love this like nextjs is going in such a cool Direction right now and uh I just think it's the way to go and again like if any of this seems like overwhelming remember the first link in the description has all the code for today's video and I again will stress this point over and over again I teach all of this down to such a granular level inside of zero to full stack hero like this is really where everything that I just spoke about if you want to feel so confident in it like then the place to be is zero to full stack hero like we've got OG's in the course right now who literally know how to answer this stuff and talk about this stuff like through thick and through like and as in when it's released I'm constantly practicing in the community that's the first place I go to before I get ready for the live stream so like if you are really wanting to dial in I do recommend you check that out right so without further Ado I think we're actually I think we just conquered the build guys absolutely crazy stuff let me go ahead and get rid of this one look at that boom works right we've got the speech working sahib saying thank you so much for the donation I appreciate you man the everything's working on this front if we go ahead and sign out the only thing I haven't done is the uh the route the homepage so let's do this then we're going to deploy and then we're going to destroy that like button because it were absolutely you know this build was absolutely sick today so I'm going to go to page uh and the page honestly is very I I've done this like very quickly the homepage this one was more to showcase the routing and differences with routing but in this case we've got the we're going to have a H1 very simple bit of text and styling here boom and it say understand your world and communicate across languages right so super super simple stuff here at the top I'm going to have a flex Flex column with the items centrally aligned all right um so I okay I'm going to shout this one out somebody goes but in India web dev is too saturated no job for freshes absolute rubbish I'm sorry I'm calling you out that is rubbish these kind that mindset will get you zero nowhere I have developers from India as well they're they're amazing developers this is a it's about your skill and about what your willing to put in do not let anyone ever tell you that the job market is too saturated for development it's just a cop out answer I'm sorry it is there is so much there to you can go ahead and learn it's it's enough to do so in this case I'm adding in the user authentications by putting in the following yeah hary says I agree I don't know if he's agreeing with me or or if he's agreeing with the person but there you go okay now I'm simply going to check if the user exists I'm going to have a link to translate now otherwise if the user is not exist logged in I'm going to have a signin button now I'm going to import all of these components so I'm going to inut assign button yeah hary says um with sunny it's about to go 100% 100% And I want to call that out because I see so many people freaking out about this guys and it's just not worth it like don't freak about freak out Lauren says if you have the dedication to learn keep up exactly like honestly it's a it's a matter of trying you have to keep up with the trend you have to keep moving fast right so I know I talked over this point but honestly it's just very simple UI stuff like you can go feel free to copy that yourself if I go ahead and sign in get look at that oh my God cluck is so clean like that is just so unreal if you've ever done or manually you know the St like the oh it's just so good like if I go to team. poo.com I don't know if it's going to ask me to sign in okay so let me do that now uh it's going to po. team maybe a separate account I want to show you that it's it's actually linked to a separate person let's see boom now we go to the for SL translate let's go to translate [Music] now uh okay we're here and now if I type in hello world we should see boom translating and then you see how it goes no translations yet to Boom look at that oh and then we go and delete it so nice yo what is going on guys this is a quick test let's see if it works Quick Test debounced boom nice right and look at this this does work by the way I can show you uh if I do like you know Chinese let do um hello how is it going this is a YouTube test smash that like button if you haven't already and look at that just so clean so so clean and look at that it picks it all up it detects your language just so nice honestly amazing stuff so he goes upgraded your skill if you want to stand out uh there you go there you go nice stuff okay so look at that it works super clean you can go ahead and like straight from what we've done right now you can go ahead and manage all of your accounts uh I'm probably going to do that as well but yeah you can see all of this look at that really really clean stuff and it just looks so professional I would definitely recommend adding this to your portfolio and definitely list out all of the skills in which you actually um like demonstrate during this because there's a huge list of skills that we covered in this build so you definitely want to go ahead and list those out as well it's not just a Google translate clone by itself you see there's so much happening we're using like four different azure we're using clerk for the authentication we're using so many nextjs under the hood things like server action server components client components route handlers all that stuff to basically go ahead and get what we want working and it just works in such a nice harmonious way like I mentioned before when you know you make a change on the server action you revalidate because of the mutation you re revalidate the tags it causes the other fetch to go ahead and refetch like if you can explain all of this and show the same level of passion I swear to God you will just you will get that job at some point right if somebody came to me with that energy I would be like oh my God take it like 100% run with that like um so yeah we definitely got a a ton to to go ahead and uh and and and work with right so let's go ahead and right now deploy so the final step is the deployment process now I haven't actually deployed this because I I haven't um so I'm going to go and show you how to do it right now so this will actually go ahead and be an interesting thing to do uh if the if it takes over 10 seconds for any um you know a route Handler or API end point or server action if it's over 10 seconds it's always worth mentioning that it will fail on the free Vel plan until you upgrade to the blaze plan or Pro Plan whatever it is right so right now I've already installed the Vel C so I'm going to type in Vel and this will go ahead and say set up and deploy a build so yes we're going to go ahead and do that we're going to do Sunny Sanga link to existing project no I'm going to have all the default by standard where it's at and this will fail initially because we don't have the um click no we do not have the environment variable set up so what I'm going to do is click on inspect click on open and I want you to go over here head over to head over to this right here and go to settings and go to environment variables now what I want you to do go into your environment variables here and you thought I was going to slip and I wasn't going to do it so you want you to click on environment variables copy all of your values right now I'm not doing I'm not showing you my screen because of that exact reason otherwise you're going going to see everything and then um we're going to go over to the key and value pad I'm going to paste everything okay so at this point I'm going to go ahead and paste in all of the keys um inside of my code okay so let's go ahead and do that so that's fine and I'm going to click on save all right so I've gone ahead and done that pushed it in and I hit save and then so literally what I did is I did this and command V to paste and then it pastes them in and I click save and then it saves them into your uh into your Vel deployment right so now we've got the environment set up so what you can do now is go ahead and do this is going to fail as well so I guarantee there's a build St this failing so if we do Vel build I can show we can debug it locally so if I do a cell build now I guarantee it's like something small happening um okay let's give it a try it's going to probably be a typescript issue it's always a typescript issue let's see what happens s my brother you got announced these things I had no idea again awesome don't worry about idea I don't know what you're talking about but yeah uh oh no idea again oh that I was live yeah I sent out an email so feel free to sign up to the email newsletter Min when netfi recent next round time5 is near enough on power sell worth checking out oh nice I have a look at that so you can has an invalid export so my transcribe audio has an invalid export so transcribe audio let's have a look so promise next respon string is not a valid post return type so let's see what's going on here I'm returning text string send not valid post time okay I see so uh expected void response go response next void string okay so in this case we I mean that's a bit strange to be honest with you I think does it return it's not body in is they oh no um expected void [Music] response but send oh okay my bad um yes because here is the exact reason why so I'm actually returning a stupid thing here so here what we should do is return a you know something like I mean you could do it that way I don't like that way that's not good let's not do that yeah let's do no I don't want to do that uh get rid of this as well return next Jason yeah we got that's spell and same here I want to do a there you go nice all right so we can do something like this let cleaner and now if we do have a cell build so this is why it's good having typescript you know they actually catches out on a lot of bad things Loop leg those good stuff Papa fam if you guys are enjoying this right now all I ask is you just destroy the like button that's it destroy that button and um I see I see I have not been in my few days yeah I know I'm trying my best to get the best way to kind of you know notify everyone but there you go look at that boom we've gone ahead and deployed it so I want to do Vel now to well I've done a Vel I done a local build but if I do a Vel it will push to production now so let's give this a go well it won't actually push to production it'll push to like a controlled environment and then I can from there push to production by either doing a promote to production or I do Vel d-r when I do the CLI command but guys we're absolutely killing it right now I swear to God this is going really well um let's give it two seconds to go ahead and finish up with this let's see what it does here boom cck little water break while we're waiting but remember guys it helps out so much from both sides if you hit that first link in the description because not only are you getting The Code by filling out the Microsoft form and getting access to all of the code as well as my course right here but it also goes ahead and shows Microsoft that our Papa F support is absolutely huge and that's what we need to do to keep the support from companies like Microsoft our way right so it really helps out a long way and same with the guys over at cler as well um okay we got a weird little expected unexpected error there which is interesting um I think okay anyway it got passed that super weird um let's carry on I think it must have restarted the compiler but there you go it's managed to get past that and we even got our middleware deployments which is awesome deploying outputs nice Viber background music and watch your sunning live build is fire I love that dude thank you so much is there any special way to deploy clerk to production I believe not I believe it's just completely fine just to off the butt working the way it is let's go ahead and try this out now again I haven't tried this out in production yet so we're going to see if it works right let's go check out so sign in to get translating boom let me hide this for this session disable for you go sign in to get translating boom sign in we can Google let's see guys sunny. sang Let's sign in is it going to work okay so we've got an error here now there's probably a safe reason why but let's give it a little uh check on that so if we go over here we can go ahead and have a look I think it's going to be something very straightforward and simple to be honest with you so here we are and never the per okay is a dig property is resoled failed to pass URL from at request dependencies BL five lines URL okay so invalid URL so the reason being is because we're trying to push to a 4/ translate okay I see see so this is happening because of our after post request URL so I can show you why this is actually the case so I'm I'm guessing but I'm pretty sure this is the case uh Local Host let me just double check this is my little debugging in live you guys are going to see for yourself so this right here okay now uh I believe where we have that signin button or after sign in yeah so after signing URL so here these are all server components so it makes sense why this error might be coming up so what we might have to do here is do a const URL and do a for/ translate and then we simply do that and now the URL would be something along the lines of this because remember like I mentioned before it's going to be on a server components we need to give absolute URLs right so again maybe the same thing is going to happen here as well there let's go ahead and do the same URL and then let's go ahead and give it uh the same respect and again what I would recommend here is you just make a helper function but for the Simplicity of this demo I think it's okay let's go ahead and do the same thing uh here okay and then let's do the same okay we're good so let's do a redeployment and try again ver so see what I mean live debugging this is what I like right this is scary for for me trust me right but it's the way to go because you guys get to see how I would debug it live and obviously there's no truth there's no actually like I don't know if this going to work this but this is how we debug it's the reality of debugging so let's go ahead and see how that works and again in the meantime while that's deploying guys zero to full stack Heroes a way to go I'm going to Rave about this so much because you know everything that we talked about today right like I can't show you in just simple videos we need long you know really deep coaching calls and this is what we do guys weekly live coaching so honestly I'm in those coaching calls weekly you can see from some of our students as well right like I'm going to go ahead and just play this as well away I mean I'm like I even keep this is our own students guys yep you can what's up dude good to see give us a solution so when we go back to our laptop to work it's like it's easy I can say is among of the best programming channels I this I mean sometimes I these are real people these are real students I post a question and the community is all over there and this is what I'm saying guys like over and over and over again it's about Community it's about mentorship it doesn't matter if you just watch a video and for one day you may know something or you might learn something more that's cool that's great there's so many channels on YouTube which help with that but it's about that constant mentorship right constantly growth constant development it's not just about getting that one win and then you know or just keeping up with the latest trending video which is why I love other YouTubers who do this stuff but I honestly preach that you need to be able to be on it and growing every single week not just watching a video thinking that's cool and then leaving it you need deep deep learning moments like for example in these coaching calls every single week we have honestly the deepest dives into different areas in TCH so I will literally be showcasing so many things at the deepest level it's ridiculous so the third link in the description will take you to the course 04 pap.com like I said weekly coaching Calles we go through all of the things in depth if you want to get a sneak peek you can actually get the react basics for free if you click on this button right here and uh yeah honestly this is this is where we go guys this is the main thing uh somebody some people are saying the cost you can go feel free to check it out uh over at pat.com kick on INR now and you'll be able to go ahead and do it so even yep you can goes you know it's hard to find a community like this hence why I'm still here exactly if you click in roll now you see the different pricing structures and what I would say is guys I always get the question of like oh my God it can be considered expensive but really our guys have got like our guys and girls our students have got like full jobs off of this if you think about it you will spend like upwards of 10,000 20,000 50 I think I spent 60,000 in University fees and if there was a course like this I would be like why didn't I just why don't I just pay for that and I get a lifetime membership as well and it's part of a community I'm not alone like there's so many benefits this is why I've tried to rebuild the education system around coding this is why we kind of push around this area a lot more so it's a it's nothing in the grand scheme of the value you get I kid you not it's ridiculous for live coaching as well like every week I don't know like if you can't put up on that side of things I would say you know there's so much you know free stuff that goes on on YouTube I do it literally in this video today but I always say like Elevate and just be a part of a circle which is way bigger that's why I'm in Dubai that's why I'm doing much bigger things over here so yeah little little bit of a rant there but I think it's so important for you guys to just grasp that if you want to grow put put in and put the effort in and invest like right sign in to get translate let's try it one more time sign in with Google let's go ahead and see what happens continue let's hope it went okay I have a feeling okay I knew that was going to happen so let's see what's going to go on right now if not I can debug this inside of Z full second okay but so your middleware match is configured to match this or page orth C can okay so interesting we don't actually have our middleware is not firing off that's that's interesting so 404 ah okay so I think this is because of my middleware is not Au cool but that's weird that's just think has a problem with my deployment that's a very strange issu what's going on so red colors yes I know it's the fun of debugging okay so let's see CL okay so this weird thing happened with my clerk my middleware I have a I have a belief that it didn't match oh my God I know why it's because it's not matching the URL um for more details matches for your page okay what we can do though is we can actually try to do something we do build and I think I can do a Vel run here uh how do I do AEL run locally I think it's justel run build either way we can do a mpm run build and do it that way so background music was awesome thank you so much dude Vel run let's try Vel Vel Run is it Vel run Dev I don't know is it no it's not res build res play res build um even I'm forgetting now how to run it locally if someone can check that it'll help me out a lot if we do mpm run build mpm start maybe from cell Buel uh run locally Vel Dev on okay so it does what Vel Dev Vel Dev maybe Vel build Vel run build no I know how to do Rell run build but it's the Rell how do I run the build from that it's not Rell Dev Vel Dev I don't think it is Vel Dev guys 3,000 okay so let me stop my port here Vel Dev it's not Dev it's Vel star oh Vel start is it Vel start no it's notel start okay death let's try anyway death crazy what's going on all right got dead Port there you go all right let's try that out let's see let's see translate now oh so my Local Host is working with my authentication side of things it's just my deployment that's okay I think um I'm going to give it I'm going to give it I'm going to try to debug this live anyway just's give it a go even off if it doesn't work out it's fine we Quicks make sure okay so I have a feeling it's it's just a bad deployment to be honest with you because my middleware seems to be okay my middle V process environment Vel URL for/ unless it's unless I'm messing up with for translate and this is just translate I have a feeling it could just be that I could be doing a stupid mistake here let's do something let's do conso log yourl and let's do a homepage check on this cuz I have a feeling I'm doing a dumb mistake and it could be easily avoided and this thing can be very easily fixed so okay so is not it's definitely for/ translate unless for cell URL gives me that Vel Dev no okay that's fine um that's not how you do it I think Vel run Vel build run locally how do I what about sell build prod no I know you guys are right you guys are right but that's not that's not the way um if you have any web hook API then also add the public API yeah that's fine but I think the middleware should be also middleware so middleware some so uh next config I have a feeling it's to do with this okay I'm trying can I deploy Lo bu to a devel build Vel build prod okay let's try one more time I'm going to try and do a deployment to be honest with you let's do deployment to production let's do Vel prod um Vel d d prod can you find ER with F12 so no because locally reproducing it is not doing what I want is the middle wor firing at Edge or node that's a good question that's a very good question I will I will check that but I'm not sure I want to check it right now let's do um CL made it's also worth mentioning that core 2.0 is in beta so it could be an issue F issue however I don't believe that's the thing or R are protected now and you have to opt in I think I have no so Core 2 0 I believe is the other way now all routs are protected or not protected so clerk core 2.0 have a look so I believe it's the other way now so it's actually so let's go to armwar now defaults to not protecting any Roots previously is the opposite going forward do you specify which root you'd like to protect you made it from yeah so that's what I firstly that's actually way better I believe should be the way run middleware on index page but so I want all the all the pages I'm making a stupid mistake here and it's my fault us use the same protect you don't want to be protected okay these are all the files so it should it should to be honest with you it should be hitting the file um M there we go to protect find some examples okay I mean let's give it a try anyway because I have a feeling to be honest with you that let's try this out sign in continue boom yeah so there you go so Google Translate Google Translate clone app oh my goodness Okay one minute so it happened either way so firstly I don't think we need to do that that route that I did second before cuz that definitely did not work the way I expected it to work uh the second thing is the logs where are my logs at where are my logs at deployments let's go back to our deployment boom here uh this one and let's check out the logs and let's pull open oh my god I've lost track of what is what let's just get rid of all okay let's see okay fail to pass URL so that is definitely an issue I think someone's actually tried to access it besides me okay so I've messed up somewhere with the middleware that's clearly the mistake um if you're using Soul stretch I'm not using S stret Tre so I've made a little mistake here around this right now typically I don't do these live kind of streams on a live but it's okay I'm down to do it uh let's see [Music] so this is different we're not using this we're using the other way now excl files Ty files ex Fels M okay so exclude fils re including fils an extension so I think like I don't I don't think this is the way to do it just going to try something quickly go to our launch G first thing is as well is that I think I should I'm going to undo my change that I made recently about the URL because that is definitely not the the Callback URL is definitely screwed up now so if I do my Local Host we should see that I'll be screwed up as well so yeah let's let's do our the local host version npm R Dev I should have probably tested that I don't know why I didn't test that so do Local Host boom check in the after signing CL for cl yeah I did I definitely did um I think that's where um I need to check now that it's not screwed up so if I do yeah look at that oh no that's okay up 10 your okay I think after log in remove the duplicate Ur now and then check in yeah I did after log in I did try that here to be honest with you translate let's try something I want to I want to check if it works with just this cuz then I have I have a theory behind this okay it's okay this is good but this is what we do in our actual coaching course to be honest with you we actually debug at this level but either way smash that like button if you're enjoying live debugging sessions if you're enjoying Sunny literally puzzled right now trying to figure it out then that's it this is how we do it okay do it manually in your pro chck is work so I I did try yeah I did try that it it to be honest if I did Vel okay I actually have an idea let's do mpm run build I want to try doing a production build this is that's not going to Vel build maybe we could do a Vel build and then is this going to populate my build I think it yeah I think it will actually I already mpm start now ah there you go look at that oh there you go now I can see fa to PA your there we go uh-huh okay there we go translation history user there we go guys there we go found it so translate so firstly I think the URL would have been fine secondly it's from translation history so where I did translation history fetch call boom here uh oh but I mean the cell Ur is not going to be defined right now is it that's why transation history of course that's not going to beine otherwise it would have been okay but let's try Vel build and then so this will build it with my Vel build cach now so if we do mpm uh Run mpm start sorry I don't know if that's going to use my invalid Euro so un find okay so one thing I want to try is actually this so I want to try and do obviously don't in real life you wouldn't push a prod like this you would just push it to you is missing slash it's not missing slash here it's okay just SOL more progress yeah this is the main thing really I think you guys like this part the most honestly it's crazy I think you actually really prefer this part let me know in the comments right now put the Vel URL in the Vel environment yes uhuh that's good point actually so but then my Vel environment file no you don't have to you don't have to put Vel Ur in the Vel environment file I mean we could potentially do it here okay so that's just give away more keys um hide up for a second okay so forell URL is actually yes okay so somebody made a good coin here actually let's I'm going to put HTP Local Host 3,000 so inside of my Vel preview local file in the Vel I've actually just forced it into that so I want to try something now and do a Vel build here that also pushed to production so we can test that out in a second um and while that's doing that let's give it a try so this one this is going to probably fail again but now there's a debug which will ping out the URL which I'm going to check against so boom check the logs so the homepage 42 let's go to the [Music] homepage yes so that URL trick is not working the way that we want it if we do a for/ translate okay now if we go to our logs so the main issue here really is actually the clerk middleware is not being detected so that is definitely the main consideration here so middle well matches configured to match this rout page so that's my issue I believe CL middle is used in your middleware or the deprecate or middleware I don't think I'm using the deprecate or middle [Music] middle so I think it should be matched to be against the translator to be [Music] honest but what I may do is actually just do I have a feeling this also could be because I'm using a beta right now Al so that's the main issue really to be honest with you but what's strange about this whole thing guys is that it is actually picking up the so if you look at this right it's actually pushing so this still picks up the or middle room so that's working it's this right now but let's check my log I should have a log now there we go Google Translate go translate hand shade I also uh info yeah here we are okay so you can see look at this it definitely tries to go and to that end point so okay so the end point is live so first things first that is good that's very good so I've actually got my m point so first yeah that's a cool sign so so so my translations are definitely coming through from my live URL the issue here is more around so we're getting through we're getting through so first things first is the translation history is definitely work correct this is definitely correct is when we're trying to go to okay one more try because I went ahead and added it back into the middle if this doesn't work it's okay it's fine I think at that point what I'm going to do is also I'm going to oh my goodness wait a second maybe it's my your maybe it's my mend points guys maybe it's the for translate for/ transcribe audio no but it can't maybe it is maybe it is let's try transcribe I don't think it's this though this is files as well this doesn't make any sense let's do translation history let's just try translation history and then translate P audio and then my actions as well you know could be the delete I mean the delete if it doesn't work it's fine but let's give that a try I'm going to give this a little bit littleit little try now and if it doesn't work it's all good it's all fine after that I will solve this issue inside a zero to full stack hero but it's been a fun debugging session by the otherwise main thing is like on your locals it's working and um this is not that difficult for a bug to be honest we can probably fix this fairly straight forward let's give that a try come on let's wait for that to go down what this is also a really nice representation by the way of community like you can see the main thing is is in the reality when you're working like this it's also root set can be access while sign yeah but guys you're looking at the previous I'm using core 2.0 so a lot of the suggestions are uh for clerk the standard cler I'm using cler 2.0 uh core 2.0 so there's now a change in the middleware which can slightly which can affect things okay so pop this open to the side guys and let's pop this open there let's go over to or sell and let's make this live okay so we got a bunch of requests sign in to get translating let's sign in oh okay so first things first I mean I don't know if someone else tried to go on there but okay same thing okay so in this case it's okay okay I'm going to basically speak to the guys over CL see if this is maybe I probably made a slight slip here to be first probably very small issue that we're facing but I'm going to go ahead and make sure one I let do past 30 minutes info options middleware middleware middle stair blah blah there's morning some look if I go to now for translate do live Boom for translate play I hate it when it does that for Trans now we do it okay let's see what there we go yeah so it's definitely around that middleware so I've just messed something up around the middleware to be fair uh but I will definitely get this fixed and either a I will drop a video on it or B I will so go ahead and explain this inside Z to four stack hero if you want to know the answer to this one I will be giving it out inside of Z to four stack hero because I am super curious myself but the interesting part is it still deployed the end point so this is really down to middleware issue very small I can imagine very easily fixable um but I would definitely consider making a video on that as well so you guys can feel free to yeah figure that one out but okay in the end of the day the main thing is the build is absolutely sick and it works right so let me go ahead and deploy the okay so I'm going to wrap up with the way we know how to do it the only way we know how to do it that was a deep dive guys that was a proper Deep dive okay now let's see if I can actually go to even this page yeah so this one is definitely connecting to mongod DB there we go nice all right cool we're back so hello world let's see if it do and douche okay nice all right plus one thing I would always recommend is that yes you definitely sort this deployment issue out but always get a recorded video of your app and demo explain the breakdown of the tech that you're using inside this deack and all that good stuff but right now I'm going to go ahead and break down all of the tech that you learned in today's build and then I'm going to wrap up the way that we know how to do it so today guys we absolutely crushed it with today's build we've got next year 14 down we use Microsoft Azure we use so many different services including the Azure open AI service where we use the whisper model we use Azure AI translator to go ahead and do the text speech recognition no sorry we to do the transcription so to go ahead and translate the text we've got the web speech API we've got you know the media stream recording API to go ahead and do this cool stuff where yo what's going on guys so all of that is going ahead and doing it right now absolutely awesome aome stuff we've got server actions working we've got revalidate tags you know caching mechanisms and how it all works we've got tawin CSS and typescript alongside Shaden to get this beautiful UI really really nice stuff and we've got clerk authentication with middleware the whole shebang everything working in a really really nice flow and the most importantly you know something that I don't typically do on a lot of these bills lately is DB so I even went ahead and showed you guys how to go ahead and you know use something like mongod DB in today's build so you can go ahead and actually have a database like this where you can go actually and this is really useful because you can end up actually replicating production databases locally working offline things like that it can go a very very long way in the world in the world of development and it's just a good thing to know about especially this right now I really did find that this extension was absolutely phenomenal to my development for this build and I think you guys are going to benefit massively from it as well so if you're watching the replay of this right now enjoy the entire build and like I mentioned before guys the whole code is available in the first link in the description simply fill in the details in that form if it ask for your company just pop your name in and then go ahead and get the code for absolutely free over here in the GitHub repo right so the first link gets you the GitHub repo the second link takes you over to zero to full stack hero and the uh sorry the third link takes you over to0 in description but this second link takes you to our course and if you in the video description the second link will take you to clerk right so if you go ahead and hit that link when you're signing up for clerk it goes ahead and shows them that you came from this video which always goes such a long way in the grand scream of helping us work with bigger and also more Browns so guys remember guys this really was a massive build I want everyone to go ahead and build it yourself because I think it's going to teach you so many core fundamentals and you're going to learn a ton in the process I promise you that but otherwise guys it's been your boy Sunny AKA Papa react and I hope you've enjoyed this one and as always guys I will see you in the next video stay tuned because I actually have a build covering all of the popular ai ai Services coming out this week and if you're enjoying the Vlogs let me know by dropping comments and subscribing to the channel until next time guys your boy Sunny AKA Pap I'll see you in the next one [Music] peace [Music] be

Channel: Sonny Sangha

Views: 13,071

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript, nextjs13, next js 13, nextjs 14, next js 14, next.js 14, openai, ai, machinelearning, machine learning, open ai, speech to text, microsoft, mongodb, mongoose, mongo db, database, full stack developer, azure cosmos, azure cosmos db

Id: sBCUvfNZTec

Length: 231min 56sec (13916 seconds)

Published: Sun Mar 24 2024