React 19 Project Tutorial – AI Code Explainer

Key Takeaways

Improve your React skills by creating an AI powered code explainer app from the ground up. In this course, you'll learn how to design the app, configure an ExpressJS backend, and set up a REST endpoint that communicates with an LLM. You'll then integrate everything into a sleek React 19 front end using VIT and Tailwind CSS. You'll create a fully functional tool that turns any code snippet into clear, beginner-friendly explanations. Along the way, you'll master new React 19 features like use action state and server actions and learn best practices for API integration. Tapus created this course. Study says that the 92% of the people fail to achieve their goals and the majority of these 92% people feels that it is very very difficult to try something out. Artificial intelligence the AI is everywhere and it's everything. Now as a web developer, as a UI developer, if you think I'm far away from trying out AI, I'm far away from embracing AI because it is difficult. I think we are going towards joining those 92% out there. So what we can do about it? We can make our hands dirty. We can get started. And the first step towards getting started would be let's try out something. Let's figure out whether things are really difficult or there are some rumors around it. So the first step we are going to take in today's video for many of you who are still thinking how to start using AI with your web application with your UI code and how to make something useful how to make something cool at the same time start understanding how each of the layer work together that's the reason today we are going to build something using the feature of react 19 along with the essence of artificial intelligence and build something really wonderful so what are we building today a smart application called codesplain. It can explain the programming language. It can explain your source code in plain English. That's the objective of this particular application. So here you can select the language programming language say JavaScript, Python, Java. You can add as many as you want. And then you paste a course snippet for that language which you want this application to explain to you in plain English in as much as detailed possible. Now once you hit the explain code button it start thinking and after a while it's going to give that output that you're looking for. Here you go the explanation is out and let's look into the explanation closely what the code does step by step is going to tell you like it's create an array and how the things work each of the variable each of the iterations each of the brackets syntaxes everything that is going to give an output in front of you. Isn't that amazing? So what we are using at the background we'll be using the power of artificial intelligence we'll be using certain LLMs and then in the UI side we'll be using the power of react 19 the power of react 19 forms and few formatting libraries together to build this application. Are you up for it? Let's get started. If you want to imagine the UI in terms of diagram it will look like this. We will have our UI over here. UI built with React 19 because that's the latest and then we will also create a server using ExpressJS and this server will help us to connect to some of the AI models which will do variety of jobs that we'll ask them to do. So if you think about the flow from the UI, we would send some requests to our server which is built on NodeJS Express.js and the server in turn will use certain AI models, maybe it's APIs and get some work done. After the work being done, the server will fetch the response and the same response server might want to process further and send it back to our UI and UI is going to render. Now if you take any fullstack application which is having a UI having a back end having a database I'm sure at a high level you will be drawing things like this what I have drawn now here instead of a database we are utilizing a service and the service is nothing but related to AI and its model right so that's what we're going to do so far things are exactly similar or mostly similar to the things that you have been doing already not much rocket science right now let's start building this layers one by one let us get started with the AI layer, the AI model that we are going to talk about and what we're going to use and how are we going to configure that. Fortunately, there are variety of AI services out there that we can leverage and we can use. For example, OpenAI. OpenAI has got a developer platform where you can register and then you can start using their APIs. This code snippet shows how easily we can start using OpenAI APIs just by creating this client and then specifying which model you would like to use and what is our input prompt and based on that how am I going to expect the output. This is a very very easy code snippet that if you are a JavaScript developer or you are a Python developer you can just switch between these languages and you can make sense of it right. So, OpenAI is definitely one option for you that you can get started immediately. There is one more project that I would like to highlight is called Nibbius. So, this is the provider for cloud infrastructure and the services to AI and the machine learning developers worldwide. I found this is quite easy to use and there are variety of models exist that you can start experimenting with. For example, if I go to their AI studio by logging into AI studio, you can find the options called models. And here you have a bunch of models based on what you want to achieve. If you want to do texttoext conversion, you have bunch of models. For text to image, there are bunch of models. You know, there are variety of models that based on your use case you can pick up. If you have credits available for OpenAI, you can use it. If you have for Gemini, if you have for anything else, you can use it. Some of these platforms give you some initial credit to try out things so that you don't have to really pay it at the start of it. But eventually the more you use it more you would like to dive into it. You might have to pay some bucks maybe $8 to $10 to recharge the account and that will really go for a longer period of time for you to experiment it out. So if you are really keen to enjoy learning this doing something about it, I think it's worth spending that amount of money if you can so that you can start using these APIs and start building something really solid based on the use case that you have in your hand. So today I'm going to show you one of the use case using one of this model which is based on the texttoext model. Maybe I'll pick up this one alone. That's all about it. So I'm going to get into understanding how to utilize this particular model and its APIs in my code. For that if I just scroll down and click on this particular sign for the code, it gives me the code. You see it gives me the code for Python. It gives me the code for curl. It gives me the code for JavaScript. Now what I'm interested in, I'm interested in the JavaScript code because just now I told that my middle layer is nothing but a server which we'll be building using ExpressJS. So that's JavaScript, right? So if I want to consume some API from any of the AI model, it has to be JavaScript. That's the reason from here I'll be picking up the JavaScript equivalent. If you're using OpenAI, you'll be doing the same thing. You'll be picking up a JavaScript equivalent and then I'll be following the specification that is provided by this model or this particular platform that I need to follow. For example, I have to create a client over here. If I'm using this and for client, I need an API key. So I have to generate an API key. I'm going to show you how to do that. and then the best URL for the model to access. And once I have the client, then I can actually specify the model that I want to use. In this case, this is the model GPOSS 12B I'm going to use. And then my prompt, the role, etc. I'm going to talk about each of these things as and when I'm progressing coding using this. If I'm using OpenAI, I'll be again specifying the model whether it's a GPT5. This is a recent one you guys know. and then the input prompt and then again I have to have the API key for this as well. I have to generate the API key for this too. If you're using OpenAI or want to use OpenAI click on this settings icon and then here click on the API keys over here you can create a new API key. I've already created an API key sometime back but if you want you can create it. Similarly for this guy also if you want to create an API key you go to your profile there will be API keys click on this and then get API key just create a new API key and then note that API key down somewhere because that's all we need to get started so I hope with this explanation we are good we are set now to start using the model and I told that for our use case it is text to text it means that you'll be providing bunch of text in form of your source code and then what you're expecting back a bunch of text which is nothing but the explanation in English for that particular source code right so it's a textto text so the model that I can pick up any of them I'm just picking up this one GPT OSS 120B you can pick up any other that you wish to after understanding this the next thing would be creating our express server that will talk to this model using the API and get things moving let's start creating the server for that on VS code I'm going to create a new folder called server and then I'm going to open the terminal. Now inside the server folder I have to initiate a new node project. For that I will do npm edit. Yes, give the package name as server. Let's accept all the default values for now. All these inputs are fine. Let's create one. So I have a package json file created because I have given npm in minute and it has created this. Now to get this server up and running I need to install a few libraries. So I want you to follow this step to install a few libraries. You can use npm command. You can use yarn. You can use pnpm whatever you comfortable with. I use yarn. So I'll be starting with yarn. So I'll say yarn add. And then I list down the package name that I want to install. So first one I'm installing is express. Then I'll be installing something called course. I need env because I need the support of env variable the environment variables. Yes. Then install a package called helmet. I'm going to explain what it does in case you are not aware. And let's use this package called express rate limit in case you are going to host it somewhere you know publicly. you might want to do some kind of rate limiting because each of the call that you'll ultimately be making into your LLM AI side of things you have to pay certain cost right because I spoke about recharging it topping it up every time based on your usages you have to provide that money hence you have to make sure that the rate limiting is there so with this let's install them so things are getting installed and I found a node modules also created the package as JSON got all these libraries as dependencies also over here. Great. Now the next thing that we're going to do inside the server folder, let's create a new file called server.js. Okay, this is our server file and we are going to run this server file using a script that we're going to put inside the package.json file. Here inside the script section, put dev and over here write node server.js. So that next time once you run npm rundev or yanddev or the command with pnpm it's run server.js file in the node environment and inside the server.js file now we are going to code things one by one. All right. So first thing that I am interested to import is envig because I'm going to use environment variable things like API keys and all. I don't want to keep inside the code and want to just commit. I will be rather keeping them under av file and would love to load all the environment variables from the env file. That's the reason I need this import. And then of course I need to import express. I have installed just now import cost because we want to take care of cross origin resource sharing the policies and everything. I'm going to show you how to set them up. Then let's import rate limit from express rate limit that we have installed. And finally, let's import helmet. Why helmet is required? Helmet is actually a cool library that secure express apps by setting HTTP response header. So it sets up a bunch of policies like content security policy like origin resource policy which is nothing but the course policy. A bunch of policies to make sure that your app is secure. Right? So if you are developing an ExpressJS application, helmet is something would be your friend. So whenever you are instantiating your application or the server, make sure that you are using helmet also with that. So we're going to do all these things in our code right away. Let's go back. So after all the import, the first thing that I am going to do is to instantiate my app constab equals to express. Now we're going to write the security middleware. Security middleware. Here we have the app which is nothing but an express app. And we'll call the method called use. And inside this I'm going to instantiate helmet and pass. Okay. So that's the way all these policies that we just now spoke about are already integrated with my express application. Next thing what I'm going to use I have incorporated the course right. So what we can do we can use the course with certain settings. What kind of settings we're talking about? First thing we can tell like okay from which origin we allow request to this particular server. We don't want this server to be hit by all the origin all the IP address from the globe. Rather we want to restrict that if my UI is hosted on a particular domain only from that domain I am going to provide access to this server. So that underlying the API the AI LLM APIs also can be accessed only from my UI domain. Can I do that? Yes, that's the exact thing I can do by setting up the course origin policy. So do that using the origin property over here. You can say allow my front end URL. If the front end URL is not there, it looks like that I am running on local host because I am just now developing and my local host could be you know running on 3000 for example allow only this now from where this process env.frontend URL is coming from that's what is supposed to come from a file called env. If you are new to environment variables and managing environment variables, you create a kind of hidden file because it starts with dot say env. And inside that you define a key value pair and you why we call it as hidden file because you want to make sure that this particular file is never gets checked in into your source repository. So that's the reason I'll be also creating a get ignore and inside the first thing that I'm going to do is env specifying it so that by mistake also I am not going to check in commit push this particular env file where I'm going to have a bunch of details which could be sensitive for example I want to define my front-end URL let's say it's running from localhost 5173 because I'm going to create a react application in a while using vit and vit by default run it on 5173. So I'm saying that front end URL is going to be http localhost 5173. Now once I deploy my front end on versel netifi render azure I'll be getting certain public IPs right or public URL then I can come and specify that public URL over here which will tell my server that this particular server can be accessible only from my public URL. Right? So this is what I'm specifying over here. Along with that, let us provide another options called credentials. Making credentials is true. So helmet is done. Cost setting is done. I think then last thing that we'll be doing about the rate limit setting. So for that also do app dot use. And we need a limiter. So we have to create a limiter. Let's create a limiter first. Con limiter equals to we have imported rate limit, right? So we'll take rate limit and we'll configure the rate limit now. So first let's create a window in millisecond. The property for that is window ms. Here I'm going to give a 15 minutes of window. So 15 into 60 into,000. So this is a 15 minutes of window. Within this 15 minutes window of let's say 100. It means I'm limiting each IP to send maximum of 100 requests within this 15 minutes of window. And if it exceeds that also you have to take care. So in that case we will have something called a message request from this IP. Please try again after some time. You know if you try to access GitHub APIs for example you know too many times you will have this red limit right after some time you won't be able to access the APIs anymore because there is a rate limit provided over there. This is how you do it. Now I have a limiter. So I'm going to take this limiter and simply passing over here. That's it. My limiter is also set. So along with rate limiter I can also do like what is the data size that I want to limit to. For example I can do things like this that I limit it to 10 MB maximum. beyond that you know is going to throw out the error. So the idea over here to show you that how easy it is to create an express server and then you create a bunch of middleware using the use method of it and then you pass whatever you want to configure. We have done with helmet we have done with course we are done with the rate limiter we have also done with the size of the body that we will be dealing with other responses that we'll be dealing with. Now after doing all this I think we are set to start using the LLM and the power of it using the API keys that we just now spoke about and then start writing the logic in the server side. But one thing over here this is an express server. So finally what will be the outcome of it? The outcome of it will be a bunch of API endpoints. Now if you're familiar with REST endpoints already, I have created a video explaining what is an API, what is REST API, what is GraphQL and etc. You can check it out. If you're already familiar with REST APIs, you know that by REST standards, there will be endpoints and each of the endpoint would point to one of the resources that your server is managing or handling. Now the management and the handling of the resources come from the fact that either you will be creating a resource, you'll be reading it or you'll be updating it or you'll be deleting it. A bunch of operation that you can do the crowd operation that's what we say. Now a tool a framework called express enable you to create those endpoints. So what I'm going to do next I'm going to create an endpoint called explain code. So if someone hit this endpoint says / API/explain code passing certain information while hitting this API on my server they are going to get back the response from that particular API which will be the English formatted text of the source code that that they will be passing while calling that API. Right now to create that is very very easy. You have to first determine okay using the express server which is my app because I have done app equals to express over here what kind of method we are talking about it has get post put delete all these kind of methods are there what kind of method we are talking about don't you think we are talking about the post method because post is the method through which you can pass certain payload certain information from your client to the server now if you remember the UI that I have showed you in the beginning you were able to select the language whether it is JavaScript, Java or Python and then you are able to paste a source code then you are able to click on a button and then you will be sending a bunch of information to the server side. Now from the client side you have to send a bunch of information to the server side for processing. That means the method that you will be inclined to use is the post method. And once you do appost you have to pass a few things. First thing is the URL. The URL means the API URL. The API URL what you want to do is should be constructed by yourself. For example, I want to create an API URL say / API/explainy code. So whenever someone do / API/explainy code from the client side be it postman or react application angular application whatever it is with a post call this will be called but this is not enough you also need to handle the request and the response while making this call isn't it so for that purpose I have to do a request and a response handling mechanism over here this is a pure call back function fun. So this call back will be called whenever somebody is hitting this particular endpoint with using this method. So that I can get the request and I can see what is there inside the request and from the request I can extract out information and I can do whatever I want to do with that and once that piece is done I can form a response and then I can return back. So the caller of this particular endpoint using this method can get back something after I process the request over here. You understanding? So far we are in the box of the server side alone. But still we are able to visualize that when some requests come from the client. I am now having the ability to do something over here build a response and send it back to the client. What am I going to do in this case? Probably I'm going to call something on my LLM because LLM also gives me an API and then I want to do some processing based on what I get out of request and then send back the response. Let's keep writing the code. So if we come to our LLM list and then look forward to get an LLM for example GPTOS 120B and then look into the code for this which we have seen a while back and go to JavaScript we see that there is an use of a package called OpenAI also we need the API key once you log into the AI studio you can click on this get API key and once the API key has been generated you can copy this secret key come to your code editor open up the env file and then add the API key over here. We already had the front end URL. Now I have added the API key information as well. That's all we need for connecting our express server code to the API to interact with that l. That's it. Now next thing is to continue on the server.js. Now once this post call has been made, there are two information that you'll be passing from client. One is the language whether it's a JavaScript code, Java code, Python code, whatever it is and the source code itself. So on the request body we can expect code and language to come from the client side. So we have dstructured those code and the language information. It means it's going to create two variables called code and language and assign the respective values that are coming from the client side to these variables for us to work on. You can always handle error conditions. I would definitely suggest you do it. So for that purpose let's put a try catch around. So here I have put a try catch and here I'm handling the error in in case there is an error putting it into the console error and also if you notice it over here I was talking about the response I'm setting the status code for the response in this case is 500 means server error and giving a message saying that hey this is a server error and the details of the server error is inside this error dossage. So on the client side I can extract error dossage I can extract the details and everything and work on it to show it to the user like there is a server error in case it happens. All right. So after getting the code and language there are few basic validations that I would suggest that we have. For example, if user has not passed the source code itself, then I can say that the source code is mandatory, right? So I can again return a status code of 400 and then of course more information about the error saying that code is required. So if someone is missing to pass the code, I'll be able to send this status code and the error message so that again it can be handled in the UI. Now it's all about executing this code guys. So I have to create a client and for that I need the openi package and then I have to construct a message. I have to tell which model I'm going to use and that's it. Once I make this create call an asynchronous call is going to happen. I have to handle the promise to get the response and that I have to send it back to my client side. So first thing first let's install OpenAI. This is the OpenAI TypeScript and JavaScript API library. You can do npm install openAI or add OpenAI. Let me do that. I'll go back to my command prompt and over here I'll do yarn add openi is getting installed. Awesome. It's got installed in the package.json also I can see openai is here. Excellent. So I'll go back to server.js and in my import section let me import openi from openaii. First I need to construct this client. So let me just copy paste this code. Go to vs code and over here I'll paste it out. The base URL remains same. In case you use this API key in multiple places in your service or in your server, it is also advisable that you create a variable called API key and then this API key you can use in multiple places so that everywhere you don't have to really do processb dot you know your API key name. So this is a practice that I follow thought of showing you. So I have the client created now. So next is I have to create this messages this particular thing through which I'll be providing the prompt and few other configurations and also I have to specify which model I'm using for this video I'm using this particular model so I'm going to go with this. So coming to our post call where we say / API/explain code after all this validation been done let's construct the messages array in the messages we have to specify two things one is the role and another is the content the prompt so the role we will specify as user and then the next thing is the content that we have to specify in a string so it is like the prompt I'm sure like all of you are aware what prompt is by now prompt is a way to tell the AI model to take certain actions or take certain queries and in turn get you the response that you are looking for right at a very high level that's what the prompt is now if I have to create a prompt what kind of prompt that I'll be creating over here here I'm telling my model hey I have this language see JavaScript python whatever it is and I have this code source code for this particular language please explain this okay so I will rather start it like please explain in this and then I can put certain conditions over here. If I have the language, do I have the language? Yes, I have the language. If language is passed, great. So, I'll say language. In case language is not passed, let's take an empty string. So, I'm saying please explain this JavaScript Java Python or if it is not passed, if it is undefined, then please explain this and then there is an empty string. And after that I'm going to end this prompt saying code in simple terms then colon and then if you are giving um you know some code you usually give it the what back ticks and then type js python whatever it is like so let's give some back tick with escape and then I am going to put the language information over here say language if language is not there again you know fallback is the empty string and Then I can do again new line slashn then I will do the code then again slashn end with three back ticks. So what it may look like if you pass a language say JavaScript and there is a code JavaScript snippet it would look like this these three back JS then then the next line here it will be like const x equals to 23 and then you have this back tick ends right this is how we provide the code snippet right this is the exact thing I'm constructing over here But in terms of string if the language is supplied and let's say language is JavaScript then it will be like please explain this JavaScript code in simple term then new line here it will be JavaScript and then the code over here and then it ends with a back tick in the next line if the language is missing then this won't be there and the prompt will be please explain this code in simple terms then the code alone will be there. So both the scenarios we have handled. I hope you got this one. So that's how the messages look like. We are passing one prompt in the array and we can now utilize this messages pass to a API which is called create and we have to do client client we have already created client.hat docomp completions dotcreate and here we are passing an object in this object we'll pass the model and the messages as it is. I will also show you by passing few more parameters to it or few more options to it. I'm going to explain those as well. So let's go back to code. So right after this we're going to say const response equals to this is an asynchronous call so starts with aate the API that we'll be calling is client.comp completion.create passing certain options and ending the parenthesis. Now what are the options that we're going to pass one by one the first is to talk about the model right so the model we are we have told again and again that is the model we're using for this video. Then we have to pass the messages. I can just take the messages pass over here and there are few other things also you can configure. For example, you can define a temperature and a max tokens. But what are these? It is very important that we understand some of these terminologies. I think that is where we find AI or stepping into AI a bit difficult because some of the terminologies are little bit you know odd. So once you understand those terminologies it becomes very very easy. So let me explain this to you. First is the model. What it is? model is something that tells the API which AI brain to use. We which which AI brain we are using in this case we are using GPTO OSS 120B this is the one that we are using a specific large language model which is nothing but the LLM. Now different models will have different capability different speed and different kind of cost. Next is the temperature. Let's talk about the temperature because messages is what we have already discussed. That's a prompt user given prompt. Now the temperature what it is it control how creative versus focus the response should be. If you give a value say zero it will be more deterministic answer. For example always the same answer if the input is the same. If the value is one then it will be more creative and the varied more randomness in the output that what you will realize and if it is two then it will be like more wild and unpredictable. So we don't usually use two in production. So temperature 0.3 means it is like between 0 to one. So you want it to be deterministic at the same time a little bit creative and little bit varied every time you ask the answer. But in most of the cases it will be deterministic because you would like to get the similar kind of response or the explanation for the similar kind of code snippet. The last part is the max tokens. Max tokens determine or limits the length of your response. A token is roughly about four characters or say 0.75 words. Depends on the language of course. I'm just talking very very high level. So 800 tokens if we do the math it will be like 600 words of maximum response at a very high level. So why we require max tokens because we can prevent the AI from giving super long answer wasting the computation power wasting the cost and everything. Hence if you're giving an snippet to explain you would require at least 500 600 words of explanation so that you can understand like what exactly happening. That's the reason the max token is given as 800. So I hope all these things are clear. Now let's continue the code and finish this up. Now as we have the response from response we can get the actual explanation of the output that we're looking for. How do we get it? So once we get the response inside response there will be an array called choices. So we will take the choices array. In the choices array the first object is what we will be looking for and inside that there will be a object called message. Inside message there will be a property called content and this is what we are looking for. Inside this we have the explanation. So we can write const explanation of variable and this is what is going to give us the explanation. Again over here also just like before you can have a validation. If you haven't got the explanation then you are giving a 500 saying that I have failed to explain the code right. So that UI can handle this. So after this the last remaining thing will be to create a response with the explanation that we got and we can also return the language the language that we got because once someone getting this response they'll be double sure that for for a specific language they got a particular expression and if we don't get anything we are sending basically unknown. So that's all about this endpoint we wanted to create to deal with the code as a resource or the code explanation as a resource and we are creating the explanation and we are returning back in form of a response. Now the last thing left is that we do the essential part to make sure that we can start this server. For that purpose we need a port on a port that we want to start this server. So let's define a port con port. You can hardcode this over here or you can also take it from the env that's also a good practice. Process env. If this is not available then I'm hardcoding to 302. So I'll take this port information. And now I have added a port called 3001. If it is not defined it will be 302. If it is defined is going to take 3001. Then we have to do app. App is nothing but our express. And there is a method called listen. That's take the port that we have defined and again a call back function inside that we can do whatever we want to do for example I can give a console.log log off our API server is listening on you know HTTP local host whatever the port that we could get right so this is good this looks great I think it's time that we can start this server and see how this particular API works now one thing that I want to do over here before I start writing a single line of UI code I want to test this API from Postman so I'm going to open Postman and then pass this code and language as my request body and then I'm going to see whether it is really returning me this explanation or not so that I can test out my code well before I finish writing the client side react code and done all the integration and towards the end before that I should test it out right so let's do that you know in the package dojson file we already have a script called dev that will do node and then the server js where we have written everything about the server so you can do either node server dojs here or can do just npm rundev or yanddev also another thing I want to point out make sure that your package of JSON is having the type called module because we have used it like a module and hence we have used lot of import commands. If it is not module you have to use require. Just for your information I have already created a video explaining what is the difference between module what is the difference between require and then the common JS and everything and when to use what you can take a look into it for more deeper understanding of these things. But for this one please use type as a module in case your package.json is missing that. All right. So coming to this command prompt let's do eondev and now my server is listening on the port 30001 because 3001 is available for me. The next thing I would do I'll bring my postman. So this is a postman. Here I have created a collection for AI because I have been testing a bunch of things you know recently to create videos. So one of the thing that we are doing today is called explain code. By the way stay till the end. I'm also going to explain to you how to do this summarizing a paragraph, initiating a chat message or how to write a write assistant so that you can create a react project using this as a back end. All are easy once you understand this. So stay till the end. Now I'll go to explain code. So for this it will be a post call and we are running on 3001 API explain code and we have to go to body and we have to pass certain parameter isn't it? So for that purpose I'll go to raw data and select JSON as a format and here I'll be passing the JSON where I'll be passing the language information and the code information. So my payload looks like this language is JavaScript and code is a function called greet takes a parameter called name and then just does a return hello this particular name and then there is a console.log log and I'm saying greet tapus that's it simple thing now if I execute this code what I'm expecting an explanation because / API/explainy code is the API service written by me that is internally calling the API on that llm and passing this information the way that is requiring for creating a prompt and giving me the response all right now you have to pass this in a stringify format when we are going to react where user is going to give me uh code I to handle that to stringify it and pass it so that it can be passed as a string. Now let's do the send. It's going to take some time. I hope that it becomes successful. It does. So I get a 200. Okay. And I'm getting an explanation. If you see the explanation comes as what the code does step by step then slash slash look like some kind of MDX format over here of a table and then it explains this code inside the function. It builds a text string blah blah blah. Awesome. Right? And it also returned me like which language that I have passed a JavaScript language and that is what is responding to me. So it means my API is working now. As my API is working now I can now think about my react code isn't it? Let's build the React code and this is where I am going to introduce you a lot of concept about React 19 especially the form handling along with consuming this particular API and handling it response. Let's do that. To start with the react part, we are going to use an existing repository to bootstrap our project and this is vb based tailwind CSS based. So everything is configured. We're just going to bootstrap using it. So for that I have a repository on my organization GitHub aus. There I'll go inside repositories and here it is called code in react 19. You go inside that and then once you scroll down you have this command. Just copy this one clicking here. go back to VS Code or the editor that you're using and at the root of it make sure that you're not inside the server folder that we have created before just come out one level above and then paste it change this project name with something that you feel like for example I give it as code explain it sounds like code explain and then do an enter it cloned this entire repository code in react 19 inside this folder you see over here so I have this entire ire code base coming over here. Now I will do a CD of my new folder codes. First thing I'm going to do an yan install. So it's going to install the node modules and everything. Excellent. And then I'm going to do an yanddev so that initial UI start running. The initial UI is say localhost 5173 running using vit. So if I go to browser now, open up another tab and do localhost 5173, I see the initial version of my application is running basically. But we don't need any of this, right? So we're going to delete and start putting our own code bases, start putting our own components one by one. Let's start doing that. So inside src, you will find something called app.jsx. So coming to app.jsx, I have all this code over here. I'm going to delete them all together. Okay. And inside src, I'm going to create a folder called components. And inside components, let's create one component called code entry. JSX. And let me create this component once quick. So I have created a component called code entry. And it has a div for now. And I'm exporting from here. Going to app.t jsx file. Let me just import code entry. And over here, let me just return code entry. That's all. Right? So if I go to the UI right now, it just says code entry. Fair enough for me because that's the only portion of code I have written inside code entry. I forgot to show you one thing. If I go to the package.json file of this react side of thing, you'll see the dependencies are added as react 19.1. React.19.1. And you also see the telin cs 4 is what I'm using. Excellent. So let's proceed. Now let's imagine how are you going to break this application into different components. So anytime especially work with react which is component based it's always a good practice that you start from scratch by thinking how your component should be and what are the way that they want to interact with each other. Then you will identify the state and all the things pretty easily and pretty fast right so that's how I always teach like whenever you are doing something with react think from the component way early in the design phase itself. So we are thinking a UI something like this right here we will have some heading and then we will probably have an area over here which will have a text area for me to give that code snippet and then there will be a button over here and then let me just expand it a little bit more that some area over here where I will see the explanation right this is how the UI is so This is the area where you'll be giving the codo. There will be one more thing. I'll push this button below. I will push this guy below. So there will be a language chooser right. So there will be something through which you can choose the language. Then here you will be giving the code. This is the button you will hit. And then once the response comes back, it will show the explanation over here. This is how I am imagining my UI. Now to do that this entire UI this entire thing from here to here what we calling as code entry. So this is what is code entry. Now this heading one we can have a component which we can name as say header. So I have header which is inside code entry. Now this entire thing this guy can go inside something called a form because there is a submit kind of thing is there after you select a language after you provide what is the code and hit this button. So this can be a form. So we can call this as code explain form and then this particular thing we can call as explanation. Now this guy if we want we can also keep it inside the form itself or we if we want we want to keep it outside we can do that as well. Right. But overall, I think these are the components that I'll be looking for. I already have app.tsx. Inside that, I have created a code entry already. Inside code entry, I'm going to create a heading and then I'm going to create a code explain form. Inside that, I'm going to use this element of form. And once the form gets submitted, I'm going to make that API call that I have written / API/explain code. And then once the response is back, I'm going to show the response over here. Now, one more thing that I want to add over here. I want to show you how server action works in react 19 along with this particular form. So I want to use the capabilities of react 19 form along with server action to make sure that I call my endpoint. So whenever this form gets submitted by clicking on this button I will invoke a server action. This server action in turn going to call my API which is nothing but this / API/explainy code. Understood? The enter picture is in front of you. At the design level itself, you are deciding what you're going to do. Now, it's just a matter of time to put this thing in the code and execute it. So, in the code entry app, we need a header and then the explanation form, right? So, let's create a header component. First, we'll go inside the components, create a So, this is a skeleton. What we can do instead of returning a simple div, we will create a semantic header. And here we can give one H1. And you can give it like our application name which is code splain. And let's add a few classes so it looks better. I added a flex layout and then justify between item center you know full width some merging bottom. Why I have done a flex layout? Tomorrow if you want to add an app bar you can easily add it after H1. So I'm leaving up to you. And on H1, let's add a few more classes to make it a bigger one, bold one, etc. So, header is done. Now, we'll go to code entry, we will import. And then I'm going to get rid of this text. In the div, I'll be using header. Let us also add a few classes to this div because it's a parent of everything where we are giving a minimum H screen. You can see which is like minimum height of 100 VH so that it covers the entire area. Then giving a flex because there will be more elements coming. Of course, a form will come over here. Giving a flex call so that they stack one after another making item center and some padding. That's it. Very simple. So the header part is done. Now it's time that we go to the UI once. Yes, I see this header coming over here. Course plane is here. Now next thing we're going to do is to create the form. Let's do that. To create the form under components, let's create a folder called forms. In future you might want to enhance this application to add more forms. So I'm just keeping that option for you. A new file called codeex explain form.jsx. Let's create the component structure. Basic component structure is ready. So I what I can do now I go to code entry. I import code explain form and then put it right after the header. And I want to quickly check whether my basic code stuff working. Yes. So there is a header and I can see this form coming. So if I go to the form now and start adding all its element, I'm sure that is going to start rendering over here. Right? So let's go ahead and do that. In this application, at least in the UI side, the form is very important for you to understand because once you understand like how I'm using the React 19's capability uh to do this form, server actions and etc. I think you will understand the entire picture very very well. Moving to the form, let us first complete the entire JSX part of it. For that, I will take this div inside this parenthesis because I'm going to add way more thing into it going forward. I'll remove this guy. And inside this div, let's add a form. So, we wrap the form inside a div so that we can provide a few styles to make things look better. The styles are like making the full width 100% width W full then give a background of white color give some padding give a rounded border corner and some shadow right that's what we want to do and inside that we are putting the form now of course the form will have few form elements what are the elements that we're looking for first thing is like a select box to select the languages so for that purpose let's add a level so I've added a level saying it's language and for this level let's add a select Select box for select box HTML element we can provide a name called language you can provide a bunch of class names for example giving a border giving a rounded corner you know make the background transparent because you're already dealing with a background color of white there of course the select box need the options right so we need three options over here JavaScript and Java and Python you can add many more you can add go you can add rust whatever you want just enhance this code because all the thing that I'm writing It's on the GitHub and the link to the source code is in the description of this video. So go ahead and check it out. So let me add those three options. All right. So my first element level and the select box now should be inside the form where the form is inside the container. Let's see how this thing's coming out so far. Excellent. So I have this I have this JavaScript Python Java. And now I'm going to bring a text area below it and then the button to submit the form. Now for the text area again let's get a level first. So the level is saying it's your code where user will be copy pasting the code and for this we will bring a text area. Let's give this text area a name called code. We will make it mandatory means it's required. Let's provide a placeholder saying hey paste your code here. And we can also give a bunch of class name with a border rounded border you know some kind of padding all this kind of setup. So as it is not going to have anything inside, I can just close the text area here itself. So my text area is also there along with the label. I'll go back to the UI once. I should see the text area. Yeah, great. So I have a language. I have the text area where I can actually start writing the code or start copy pasting the code. Now I need a button to submit this form so that I can call my server action along with the value that user is selecting from here and copy pasting here. So let's go back to code again and let us bring a button right after this text area. This is the button. We'll say it is for explaining code. So explain code and a few options of it. The type will be a submit button. Fair enough. And of course we'll add a few classes so that it looks like a button with a background color, white text color, rounded border, you know, font semi- bold. when I mouse over I'm making the color little more darker so that user understand hey okay something happening something action is happening so my button is also ready now with that I'll go to the UI once more excellent so you see this color change yeah now it's time that you start doing something about the form submission now for submit