Build and Deploy Your Own GPT AI Website with React and Turn it Into a SaaS Business ($$$)

it's 2023 and everyone and their dog is using AI Duolingo and Khan Academy integrated AI assistance into their apps but it's no longer only the big companies that have the power to use AI if you're a solo developer in 2023 and Beyond you now have the power to build AI software startups and that's exactly what we'll do today by building an article summarizer application using open ai's GPT model with a modern user interface connection to open ai's GPT model the integration of Redux toolkit query functionalities like copy to clipboard browser history storage and many more summarizer is the best AI based web application that you can currently find on YouTube so how does it work well you take the URL of a lengthy article pasted here and the AI will quickly provide a summary it's as simple as that building this single web application with me will give you the knowledge needed to use all open AI apis to build any application you can imagine you'll even deploy to the Internet so you can share it with your friends potential employers and put it on your portfolio and later on you can even start making money by offering it as a software based service you might be wondering what are the prerequisites for building such a fantastic website this course is entirely beginner friendly we'll use the most in-demand Technologies such as reactsgs Veet Tailwind CSS Redux toolkit and of course one of the versions of open ai's API but this time we'll be using it through Rapid API we're going to start simple and then move to more complex Concepts I'll explain every step of the way alongside building this application you'll also learn how to set up a reactions project using Veet create a responsive beautiful UI ux with a nice Touch of Glass morphism using Tailwind CSS make advanced Redux toolkit query API requests that fire on condition save history using the local storage handle form events and catch errors Implement copy to clipboard functionality and of course Write Clean code now before creating a folder for our project code we must first visit rapid API the link is going to be down in the description the making of this entire app is Possible only because of Rapid API we're using their AI summarizer API that quickly extracts and summarizes length information from the article just by giving it a URL AI does the rest of the work to use this API click the rapid API Link in the description and then you can click sign up or log in in this case I will log in since I already have the account and once you're in you'll be redirected to Rapids API Hub where you can find hundreds of thousands of apis this was the first step of our course now let's create our grade AI application and then later on we'll call this API straight from a react app if this video reaches 20 000 likes I'll record more AI applications with that said let's dive straight into the build [Music] as we always do on JavaScript Mastery let's start from bare Beginnings by creating a new empty folder on our desktop and let's call it something like AI summarizer once you have it just drag and drop it into an empty Visual Studio code window once you're in just open up a new terminal by going to terminal and then new inside of here we can initialize our new react application to initialize our react application we're going to use a tool called Veet so just head to veetjs.dev click get started and scroll down in here you can find how to create a new application it's just going to be as simple as running npm create Veet at latest so back in our terminal you can run npm create Veet at latest and press enter for the project name you can just type dot slash to create it in the current repository choose react JavaScript and that's it if you open up your file explorer you can see that now we have the source and all the files needed to run our react application now to start even more from scratch we can open up the source and delete everything inside of it besides the main so just select it right click it and delete we're going to start from bare Beginnings also in the public you can delete the Veet SVG great before we get started with re-adding the important files and folders let's first install all of the necessary dependencies we'll be using throughout our project we can do that by running the command npm install at reduxjs forward slash toolkit yep you heard that right we'll be using Redux toolkit for this project and there is absolutely no Redux knowledge required for you to be able to follow along and build this application with me you're going to learn it from scratch in this single video and that's it this is going to be the only dependency we're gonna install everything else is going to be done by ourselves by hand great now that we have our dependency we can go to files and start creating our basic structure of course we're gonna need some icons and images for our application and just to make the process easier for you I've already prepared everything you need so down in the description you'll be able to find a zipped assets folder simply download it unzip it and then drag and drop it to the inside of the source folder it should look something like this there you can see that we have some icons svgs but that's about it you'll also notice that there we have this icon which you can then drag and drop into the public folder great with that said we can create a new app.jsx this is where our main application will go inside of there you can run rafce this is a special command that's going to create a basic react Arrow function component if this didn't work for you go to extensions and search for es7 plus react react native Redux Snippets you can install this and then it's gonna work great now that we have the app we're gonna also need the app.css so simply create a new app.css file inside of the source and then from the GitHub just down below copy the Styles we'll be using throughout this application you can notice it's about 100 lines of styles but it's mostly positioning some elements and then gradients as you can see that take more than half of this file so no worry besides this everything else is going to be done by hand wonderful and before we begin you might have noticed in the CSS that we are importing Tailwind Tailwind is a great utility first CSS framework packed with classes like Flex padding top for text Center and more essentially you can create beautiful layouts completely custom just by adding classes to your jsx so to get started with installing Tailwind CSS click get started and let's search for Veet click install Tailwind CSS with Veet copy the installation command open up the terminal and then paste it or type it out with me that's going to be npm install Dash D Tailwind CSS post CSS and auto prefixer and press enter we can close these files after that we need to initialize it so copy the second command that's going to be MPX tailoring CSS init Dash B finally we need to configure our template paths so simply copy this tailwind.config.js and paste it in your own tailwind.config.js file inside of here later on we'll also be using our own custom fonts so why not add it immediately you can modify a Tailwind config by specifying things like a font family where you can enter your own fonts like in here GitHub got pilot gives me an example of using Sans but we want to do something more custom so let's use a Satoshi font that's going to be equal to an array of Satoshi and Sans serif and then also let's do inter font that's going to be an array of inter and then Sans serif this is going to allow us to utilize these fonts from within our application but of course to be able to use these fonts we have to import them and we're going to do that in the index.html in that same GitHub just down below you can find the modified index.html containing these two new links one is going to be for the Satoshi family and then one is going to be from Google fonts for the inter font great now our index.html is going to provide those fonts and our Tailwind is going to listen to it and take them in not to forget we are already utilizing the Tailwind configuration from within our app.css so with that our setup should be done what we can do next is open up the terminal clear it and run the application by running npm run Dev ite is immediately going to spin up our application on localhost and there we go we open it up but with an error it says that we have an error in the main.jsx that's okay we just forgot to remove the import of this index CSS file which we no longer have and if we do that save it and go back we can see a little app right here on top left which means that we are ready to start developing it also if you want to change the title there on the top simply go to index.html and change it right here I'm going to call it open AI article summarizer and if you want to get this great favicante show we just need to rename this link from veet.svg to favicon dot Ico if we save this go back and reload you can see we have our great favicon as well as the title appear on top which means that we are completely ready to start with the development now I'm gonna put our browser side by side by the editor so that we can see the changes that we make live there we go this is looking good to me so we can of course start from our app.jsx this is going to be the main part of our application inside of which we're going to import and use all of the other components so what we can do is we can immediately create a structure for two additional components we're going to need in our application new folder called components and it's going to have two components one is going to be called demo.jsx where we're going to actually show the summary part of the article and there we can run rafce and the other component is going to be called hero.jsx meaning a hero section of the website a big title telling everybody what the app does of course you can run rafce there as well and we can get back to the app now inside of the app we can of course import the hero coming from dot slash components forward slash hero we can duplicate that and we can also import the demo component and in newer versions of react we no longer have to import react from react so this is looking good now if I'm not mistaken we have all the Styles we need in the app.css but we're nowhere importing it so app.jsx is the best place to import that style sheet so let's say import that slash app dot CSS and you can immediately see that the font changed wonderful now let's create the structure of our application by renaming this div to an HTML5 semantic main tag inside of which we're going to have a div that's going to have a class name equal to Main and it's going to have a div that's going to be a self-closing Dev with a class name equal to gradient if we save this we're going to immediately get this phenomenal looking background and a gradient so we have a nice slate to work with finally below this div we can create another div which is going to be of a class name equal to app meaning everything else in our app is going to go here primarily the hero section a self-closing component and then finally a demo section where the magic will happen and that's it believe it or not we're done with our app.jsx component when working in react you always want to keep your components small and separate that means that now we can close all of the currently open files and just jump into the hero section which is going to be our next task just to pump you up for what you're about to develop I open up the deployed version of the application and in here you can see that we're going to have this navigation bar with a link to our project and then we're gonna focus on this part right now a big title and then a description telling us what this application can do so without any further Ado let's get started inside of our hero.jsx we can import logo coming from dot slash assets and we're going to return something known as a header that Heather is going to have a class name equal to W Dash full meaning it's going to take 100 of the width Flex justify Dash Center items Dash Center and flex Dash call meaning the items are going to appear in a column and not a row now if any of these properties are new to you that must be that you're new to Tailwind and don't be afraid as I told you at the start Tailwind is a great technology to learn it allows you to style completely custom applications incredibly quickly and easily now it is true that it has a bit of a learning curve but it is not as steep as you might think if you're wondering what any of these class names mean simply go to search and then type it in here for example W-4 it's going to tell you right here that that's going to take 100 of the width or maybe you're wondering about padding how do I do padding we'll just go here and immediately it's going to tell you that you can do p p x p y and so on so what I'm trying to say is read the documentation whenever you're stuck with something or whenever you're unsure with something in this video Don't simply go with the flow and type it out go to Tailwind CSS search it and be 100 clear of what you're doing now one thing that may also help is if you go to extensions and search for Tailwind there you'll find Tailwind CSS intellisense and what this extension does is if you hover over the tailing property it's going to show you the corresponding CSS style for it it's incredibly useful if you're just starting to learn Tailwind my goal is for you to fully learn web development and I don't mean just be following these videos I want you to be an independent and confident developer so I just want to take a moment of your time and point our attention to JS Mastery Pro the master class we have created a six month long boot camp where we teach you how to become a software engineer with a complete money back guarantee which means you are destined to succeed so if you want senior developers myself included to Mentor you on your growth if you're feeling confused while learning on your own or if you just need some assistance in a path to get you to where you need to be GSM masterclass is the way to go so just go to jsmaster3.pro and I'll see you there with that said we can proceed with the today's great build by putting something inside of this great header that something is going to be a nav that nav is going to have a class name equal to flex it's going to be justified between which means that the content is going to show on the left and on the right side we want to Center the items so items Dot Center that's going to be vert that means vertically centered and flex Dash call meaning they're going to appear in a column inside of there we're going to have an image that's going to be a self-closing tag that's going to have a source equal to logo that logo needs to have an ALT tag of course as all images need to and that's going to be sums logo class name is going to be equal to w-28 meaning if you hover over it with off 7 Rem and it's also going to contain object Dash contain there we go this is looking good now just below that image we are creating this as an open source project so we want to add a button that's going to point to our GitHub repository so we can say something like GitHub we can give it a type equal to button and let's give it an on click something like a callback function where we're going to call the window dot open and then in here you can provide the link to your project so something like https colon forward slash forward slash github.com and then your profile and finally the link to your project for now I'm going to leave it like this and also let's give it a class name equal to Black underscore BTN if we now save this you can see it appear right here now this is not looking exactly as it should right so what was it thinking adding the flex coal right here on the navigation bar we want it to appear in a row so this was a mistake from my end instead of that we want to give it a w Dash full meaning full width and we also want to give it a margin bottom of 10 to divide it a bit from the content below and also a PT or padding tab of three and this is going to give us a great looking navigation bar that is of course fully responsive with that said we can scroll down of this button and also down below the nav bar there we can add a new H1 element our heading that's going to have a class name equal to head underscore text we want to say something like summarize articles with let's give it a Break Tag and then below we want to add a span that's going to say open AI GPT 4. now if we save this you can see everything in this wonderful font family but it's a bit too dark so what do you say that we give a gradient to this span something like class name equal to Orange underscore gradient this is looking much better this was a gradient that we have prepared for you so if you're interested to see how it was done go to the app.css search for orange and you can find it right here essentially it says BG gradient to write from Amber 500 via orange to Yellow text transparent and that is it great now we only want to break this on smaller devices not on larger ones so we can say on this Break Tag class name is equal to Max MD is hidden so we only want to do it on one type of the devices there we go this is looking good and then as we break it it looks like this this is looking great to me we now have our great title but what is a title without a subtitle so let's go to create an H2 element that's going to have a class name equal to desk or description the ESC for short and inside of here we can say something like simplify your reading with semis an open source article summarizer that transforms lengthy articles into clear and concise summaries of course feel free to type whatever you prefer into here you can pause this video and give it a go I'm happy with what we have here and as you can see we are now fully done with our hero section we know what our application is about so we can close it and we can go back to the app.jsx rather we want to go into the demo part right here this is where the rest of the magic will happen as from here we're gonna actually create that input we're going to make a button that's going to make requests to our great API summarizer coming from Rapid API great job coming this far let's take a breath and then let's continue to a more interesting part of this video and that is first of all doing the jsx for this but then doing the API fetching functionality so to get started let's first import two hooks coming from react the first one is going to be the most famous hook there is the use statehook and then its Contender they use effect hook alongside those we're going to also import some icons such as the copy copy the clipboard button the link icon loader and then the tick and these are coming from assets that's all that we need for now with that said let's start creating the GSX we need to create this wonderful looking input to start with so let's turn this div into a semantic section tag and let's give it a class name of mt16 meaning margin top for REM to divide it a bit from the top W Dash full a full width Max W XL meaning maximum width of extra large inside of there we want to now create a search so that's going to be our first component we can first wrap it in a div that's going to serve as a container it's going to have a class name equal to flex Flex Dash column or call for short W Dash full and then gab Dash 2 to divide it a bit from surrounding elements immediately within that container div we can create a form element that form is going to have a class name equal to relative Flex justify Center and items Dash Center and of course every form needs to have an on submit which is for now going to be just an empty callback function to which we're going to add the logic later on and now inside of this form we can start creating our input let's start by creating an image a self-closing image tag that's going to have a source equal to link icon it's going to have an altag equal to link underscore icon and a class name of absolute left-0 my-2 meaning margin y on top and bottom mL of 3 margin left of 5 and then W of 5 for the width if we save this you can see this great looking link icon which is going to be a part of our URL so let's create that famous looking input through which all of the logic of our application is going to be connected if you didn't know there is a type of an input called URL so we can place that right here and we can add a placeholder something like enter a URL of course every link has to have a value and for now we can put it as an empty string also if we have a value we have to have a way for us to change that value so we can add an empty handle change just for now or rather an on change we're going to make this input required as it's the only part of our form and we're going to give it a class name equal to URL underscore input and then also space peer this means that when you need to style an element based on the state of a cyclic element you can mark that sibling element with a peer class and then we can use modifiers you're going to see later on what do I mean essentially we want to change the button depending on the state of our input now if we save that you can see that we have a wonderful looking input right here let's add that button which is going to be a sibling element button is going to be of a type is equal to submit since we are inside of a form it's going to have a class name equal to submit underscore BTN and inside of here we can just say something like submit or I found this great icon online which is essentially an enter sign and there we go this is looking great so just feel free to Google to submit I can submit Emoji or whatever you want to put in here great now let me show you what I meant when I added this peer class name right here based on this we can now say peer Dash Focus border Dash gray Dash 700 and Pier Dash Focus text Dash gray-700 this means that if we focus this element the button is going to get focused as well and you can see how simple that is to do it with Tailwind great that is it for our input below the input of course below our form meaning right here we want to show the history so we're going to show the history browse URL history we want to see which URLs have we seen so that's going to be the next part and then after that below this div below we want to of course display results I'm just adding comments so it's easier to see where we are now of course we cannot display a browse URL history or display results if we don't have the logic so what do you say that now we focus on adding logic and functionality to our application by of course making the API request to our article summarizer API coming from Rapid API and we can do that by adding a new use State field at the top so let's use a use State snippet let's call the state article set article and that's going to be an object that's going to have a property of URL equal to an empty string at the start and summary equal to an empty string at the start as well now that we have that we have to create a const handle submit function this is an error function from within which we're going to make the API request so this has to be an asynchronous function and we're getting a click event right here inside of it for now let's simply alert that we clicked it so let's alert something like submitted and we can call it right here within our form on submit by simply passing the handle submit right here so now if you press the button it's going to ask you to fill out the field but you cannot fill it because we cannot yet modify the input so let's scroll down to the input let's add the value equal to article dot URL and then of course we have to change it by getting the event that is the key press event and then we have to call the set article is equal to an object where we spread the current article value meaning dot dot article and then we set the URL to be equal to e.target.value now we can type test and we can press enter but of course it has to be a URL so let's do test.com still nothing it has to have an https column four slash forward slash at the start and now if you press enter you can see submitted great now once we submitted right here we don't simply want to alert a string we want to make an actual API request to an AI GPT based summarizer and how do we do that well to be able to do that we're going to exit this file and we need to focus on implementing Redux you might think it is complicated but with the introduction of Redux toolkit Redux became so much simpler so let's get started you can think of this as a crash course in Redux toolkit how to make API requests from within your application in a structured and a scalable way first we can go to source and then main.jsx inside of here we can import something known as a provider coming from react Dash Redux and now that I think about it I don't think we imported this package so if we go right here we can see redex.js toolkit and that's true but we haven't installed react Redux so let's stop the application from running by pressing Ctrl C and run npm install react Dash Redux as soon as the package gets installed you can simply rerun the application by running npm run Dev hide the terminal go back to main and the application is going to no longer complain now what do you do with this provider well you simply wrap your entire application with it just like this we have our app which means absolutely everything we have and then we wrap it with something known as a provider and that provider is going to service our app with something known as a store so let's create a store meaning a global State inside of the source we can create a new folder called services inside of the services we can create a new file called store.js inside of there we can import something known as configure store coming from add reduxjs forward slash toolkit they made it so easy so that we can simply import something known as configure store then we can export const store is equal to configure store which we call as a function and pass in an object inside of there we have to have a reducer you can think of a global store or the state is the whole cake the reducer is going to allow us to get a specific slice of that cake so we can reduce the entire state to only grab what we need okay then we also have something known as a middleware this allows us to do something with the state before we get it in this case we just have to do the default setup you can find this in the documentation but just to simplify it you have to create a callback function inside of which you're going to say get default middleware you create an arrow function you call that get default middleware then you call the dot concat on it and then we'll have to pass something inside of here and that something is going to make the reducer work so let's create something known as a service in this case it's going to be article.js meaning this is one specific part of our state of a global store inside of here we can import something known as create API and fetch base query and that is coming from at readxjs forward slash toolkit forward slash query forward slash react ensure this pad is the same as it is here and then you can export const article API is equal to create API you call it as a function and you provide the options object it must have something known as a reducer path which is just a string article API and later on we're going to also give it a base query and the endpoints which we can call but that is all that we need for now to set up the store so let's now go back inside of the store let's import the article API coming from that slash article we have to use it as a reducer inside of square brackets article API dot reducer path is equal to article API that reducer I'm going to expand this a bit further so you can fully understand what is happening here and I'm gonna even Zoom it out a bit so one more time we're configuring a store a store is a global state that saves the entire information of our application but in most cases you don't need the entire State you only need to reduce it to a specific slice of the pie in this case it's going to be the article API meaning we want to just get something from this API to be able to make this work we add it as a reducer and we add it right here in the middleware by saying article API dot middleware if you ask me hey why do I have to do all of this unfortunately I don't have the correct answer for you this is just taken from the official redex tolki documentation if you want to we can explore it together I simply Googled Redux toolkit store and it pointed me to configure store inside of here we can see the parameters that the create store accepts but hopefully we can get a demo there we go a basic example configure store to which you need to pass a reducer and then in here we have a more complicated example and there we go we have a middleware we get default middleware and then we can pass something to it great now if we go back we have everything we need to export our store so we can go back to domain and we can import that store that's going to be import store inside of curly braces from dot slash Services forward slash store and now that we're wrapping our entire app with the provider we simply need to say store is equal to store I think if you hover over it it even says the single redex store in your application now if we save this and bring it back and reload the application we're going to still have an error so let's go to console and it says inject dot endpoints is not a function that means that we have successfully set up our store but our article API still misses some stuff it needs to have the endpoints meaning what do we want to call so let's add the endpoints right here that's going to be a call to the Callback function where we're going to get something known as a builder here to help us build those endpoints we create an immediate return where you can now create your specific endpoint in this case we can call it get summary that's going to be equal to Builder dot query and then in here we can specify which query do we want to get so something like query is equal to a function where we get for Rams and then we return a URL in this case let's just do test that's all that we need for now just to ensure that we're back where we started in our application works great our application works we have successfully set up the store and now we can start working on our create API before we set up our first route let's first set up something known as a base query base query is going to be equal to fetch base query that's a function to which we can pass some options one of the options is a base URL meaning which API do we want to call and of course for that we'll have to head to Rapid API more specifically the exact API we'll be using to make the summarization happen the link to this API is down in the description you can click it read more about the API and then click subscribe to test as you can notice the basic plan is completely free and it allows us for 100 requests a month which is going to be more than enough to test it out and to even have the app deployed and ready for other people to play with it of course if you want to end up using this app commercially you can in that case these 15 bucks are going to seem like nothing because you will be charging for the summarizations straight from the app itself if that's something you would like me to do in an upcoming video teach you how to turn this into a real SAS based startup for article summarization just let me know in the comments down below and I will make it happen for now let's subscribe to the basic plan and go back to endpoints as you can see the API has three different requests it has a post request the summarize endpoint as well as the extract endpoint in this case we'll be using the summarize endpoint so how does it work you have to pass the URL the length which is optional meaning how many paragraphs do you want to get back and just that's it test it you can immediately test it out with a demo article right here it's going to take some time since it has the summary and then you can see what you're gonna get back it's just a single object with a summary and then a string right here this is why I love rapid API not only can you find great apis but you can also test them out right in the browser and see if they give you the data you need for developing your application with that said let's go to code Snippets right here and let's copy this entire options object once you copied it you can move back here and paste it at the top first we need the URL so copy this entire URL all the way to the forward slash without the summarize and then paste it right here as the base URL it should look something like this it should end with rapidapi.com forward slash what else will we need from here well we're going to need some headers because they contain our special API keys that allow us to make requests So Below the base URL you want to add a comma and then say prepare headers is equal to a function where you get headers as the first parameter and then inside of that function you want to say headers dot set and now we can set the header the first header is the X rapid API key which you can pass here and then as the second parameter you need to pass the actual key value for now we can leave that hard coded as a key we can duplicate that we also have to pass the rapid API host which we can do here and then paste the article extractor and summarizer string there we go now see this key right here we want to use it but you don't want to place it right here within your code because then if you publish it on the internet on GitHub or anywhere else people will be able to get to your key what you instead want to do is create a new DOT EnV file right in the root of our folder dot e and V that stands for environmental variables and there you need to start it with a keyword Veet as we're using Veet and then name it however you want to I'm going to do Veet underscore rapid underscore API underscore article underscore key and then I'm going to paste the key that I had copied from my rapid API platform you can save that go back to the article and now you can delete this entire options object and you can say const rapid API key is equal to import dot meta dot EnV dot Veet underscore rapid underscore API underscore article underscore key there we go and now you can simply paste it right here headers that said X rapid API key is equal to Rapid API key which we're getting from our environment variables now to make this truly work you have to open up your terminal press Ctrl C to stop it from running and then npm run Dev one more time to restart it this is going to ensure that the changes in your environment variables get picked up and finally once we set the headers we need to say return Heathers great we have now created our API we gave it a reducer path we gave it a base query a base URL and we set the headers what else do we need to do well the only other thing we have to do is create the endpoint so we're going to say get summary where we get some parameters and what is the endpoint we want to call well if we go back here you can see it is forward slash summarize so let's do forward slash summarize and then we want to pass some parameters you can see that the URL is one of the required parameters so let's say question mark URL is equal to and we're going to pass that to this call through params so we can say params dot article URL we can say and we can hard code the length of the paragraphs by saying length is equal to three you can of course modify that to suit your purposes it can be longer or it can be shorter great finally Redux toolkit query makes it so easy for us it automatically creates a hook out of this endpoint so we can say export const use get summary query is equal to article API now this would be what we would have used if we wanted to call it immediately at the start but we don't want to call it the start because we are lazy we want to call it once we enter a URL and then press the button so we're going to get something from redex toolkit query called use lazy get summary query this allows us to fire this hook on demand we don't have to fire it as soon as the app loads but on demand once the user enters the URL and presses the submit button great finally before we test it out there was one thing that I noticed while creating this application and that is that the article URL that we pass might sometimes contain some special characters which are going to cause problems or errors or in general unexpected behavior in our application so whenever you're passing something in the URL you want to wrap it in a function called encode URI component like this this is built into JavaScript and it says encodes a text string as a valid component of a uniform resource identifier or a URI so whenever you pass any user generated content into the URL definitely wrap it with this function with that said we're now exporting this hook and don't forget we're wrapping our app with the provider that contains the store that contains the article API which means that now we are ready to go all the way back to our components demo and then at the top import the hook that we just created that is as simple as import use lazy get summary query coming from data services forward slash article of course that is a hook so we call it as any other Hook by saying const now since we're using the lazy query the first parameter that we get is a function that's going to execute it so we can call it get summary and then inside of an object we get the error or is fetching so we're going to know what's exactly happening with this URL and that is equal to use lazy get summary query and we don't have to pass anything to it that is it so we now have the capability to know whether we have an error whether we are fetching and hey we have a function to actually call once we click the button to get the summary of an article great that is what we wanted all along inside of this handle submit so the only thing we have to do now is say const data to get data back out of it is equal to a weight get summary and we pass in an object where the article URL is equal to article dot URL finally we have to check if we get something out of it so we can say if data question mark dot summary in that case we want to create a new article const new article is equal to an object where we spread the current article and then we add a summary equal to data dot summary like so and finally we can set article to be equal to new article there we go and of course in our case why not also console login to see what we're working with what do you say Let's test it out I'm going to open up the console and I'm going to put it on the bottom so we can see everything clearly and let's enter our URL oh one cool thing you don't necessarily have to enter article URLs you can enter a website and then immediately have it summarized for you so let's enter jsmastery.pro right here and press enter oh the app gets reloaded that's because whenever you're working with react you have to add a little e dot prevent default this is going to prevent the default behavior of the browser which is to reload the application once you add it let's give it another shot okay we clicked it nothing seems to be happening but if you go to the network Tab and kind of look for that request it should be there let's give it maybe 10 seconds to see if we get something and while I was speaking we immediately get it back we get a URL and then we have the summary right here in this case talking about Js mastery.pro wonderful now as you can see we're currently not doing anything with that URL so that's going to be our next step we have to save it into local storage and then display it right below let me give you an example of what should really happen I'm gonna go to the finished version of the application paste the same URL and press enter we should get this wonderful looking loader and keep in mind this does Take 5 to 10 seconds depending on the article because it's actually processing it it's doing some AI work and then we should get the summary looking like this but we should also get this little thing which is a history button meaning once we search for multiple articles we want to show the last five and we want to store them to local storage so before we actually show the summary here let's make this part of the application work to do that on top of just storing one article the current one we also have to store all articles so let's create a new you State field called const all articles set all articles and then make that equal to use state at the start equal to an empty array now what do we want to do once we set a single article we also want to push it to the updated all articles array so let's say const updated all articles is equal to an array containing a new article and then we also spread all articles like this and then we can say set all articles and we update it with updated all articles hopefully this makes sense essentially we're just pushing the new article to this array now of course we're now displaying that but it's good to know that we have them or at least we do have the Articles until we reload the page so if you reload it you lose everything and that's not a pleasant experience especially not in modern web development what happens if you accidentally close a tab or lose the connection we want to keep access to what we searched so let's store it into local storage it's going to be as simple as adding one use effect hook this use effect accepts a callback function and something known as a dependency array that dependency array is going to be empty meaning we want to execute it at the start of our application as soon as the page loads inside of there we can say const articles from local storage is going to be equal to json.parse local storage dot get item and then we pass in a string of articles this is going to give the data back to us finally we have to check if we have any articles from local storage in that case we want to set all articles to be equal to articles from local storage it is as simple as that now this is only going to add it to our state if there are any articles from the local storage but in here we're just using get item we're never actually updating the local storage so once we add an article right at the end we want to do local storage dot set item we want to update that articles with a json.stringify updated all articles and you want to stringify it because local storage only can contain strings great now the only way to test this out is to actually implement the jsx for our browse URL history so that's going to be our next job but to be able to see what we're developing let's just one more time add another URL right here this time let's go to the master class and let's see what that is about I'm gonna paste it right here and press enter of course we don't have the loading yet so let's let it load and while it is doing that let's just create a new div this div is going to have a class name equal to flex Flex Dash cold meaning we want to show the elements one on top of the other gap dash one to give it some space Max Dash H dash 60 meaning Max height overflow Dash Y dash Auto meaning we want to be able to scroll through the history inside of here we can Loop through all articles by saying all articles dot map we get each individual article or we can call it an item and the index of that item for each one we want to instantly return something meaning you want to use a parenthesis here and not a curly brace now what do we want to return well it's going to be a div that's of course going to have a key equal to a template string of Link Dash index we want to make it custom and unique it's going to have an on click equal to and this is simply going to call the set article so we're going to pass in the item so in case you want to get back to a summary of an article you previously visited you can do that immediately without making another call isn't that great and finally we can give it a class name equal to link underscore card if we save this we can see a new rectangle appear but let's populate it with some content let's give it a div equal to a class name of copy underscore BTN this is going to allow us to copy the URL in case we want to go back to it inside of there we're going to have a self-closing IMG tag that's going to have a source equal to for now let's simply say copy altag is going to be copy icon and class name is going to be equal to W Dash instead of curly braces 40 percent H dash instead of curly braces 40 and object Dash contain if we save this you can see this great copy to clipboard button and right below that image and the div as well we want to Simply add a P tag that's going to contain the item dot URL and there we go indeed the link that we have here was added to the history let's style it a bit by giving it a class name equal to flex-1 Satoshi text Dash blue dash 700. medium text Dash small and the truncate in case it is too long that's going to end it with dots great this is looking good now if we search for more you should be able to see more of these pop up but of course why would we search for more if we didn't yet read the summary of the page that you searched for so that means that we can jump into the display results go just above the closing section and then in here we can implement the most important part and that is displaying results so let's wrap everything in a div and let's give it a class name equal to M Y dash 10 meaning March in top and bottom Max Dash W Dash full Flex justify Dash Center and items Dash Center inside of here we want to check if we are currently fetching so we can say if is fetching in that case we want to instantly return an image that's going to have a source equal to loader alt equal to loader and class name is going to be w-20 h-20 and object Dash contain now if you're not fetching we want to check if we have an error so if we have an error we want to show a simple P tag that's going to say well that wasn't supposed to happen let's style it a bit by giving it a class name equal to font Dash enter Fawn Dash bold text stash black and text Center just to provide a bit more meaningful information let's give it a Break Tag and create a span inside of that P tag where we're gonna do error question mark dot data question mark dot error so inside of here we can see the actual error so if a developer is using the app they're gonna know what to do to style it a bit we can give it a class name equal to font Satoshi font normal and text Dash gray Dash 700 but hopefully we won't even be able to see this error because it's gonna work first try now if we're not fetching and if we don't have an error we simply want to show the most important part and that is check if we have the article dot summary and if we do display a div this div is going to have a class name equal to flex Dash call and gap-3 inside of there we want to give it an H2 which is going to say article and then a span summary we want to style this summary a bit by giving it a class name equal to Blue underscore gradient and we can also style the H2 by giving it a class name equal to font Satoshi font bold text Dash gray-600 and text Excel if we save this we cannot see anything yet and that's because we misspelled summary here so if I fix this we can see article summary below the H2 we want to create another div this div is going to have a class name equal to summary underscore box and inside of there wanna render a P tag that's going to render the article dot summary there we go this means that we have successfully connected their application to the rapid API made the request using redex toolkit and now we're properly displaying that data inside of our application which means that the state is being transferred all the way from our services right here to our application through this get use lazy summary query great let's also style this text just a bit by giving it a class name equal to font Dash enter font Dash medium text Dash SM and text Dash gray Dash 700 this is looking more like it and with that we are done with our demo and we are actually seeing our article summary but now we wanted to test if our history is going to work meaning if we now search for a different article is this one still going to remain here and also in local storage so for example let's use this rapid API website let's summarize the summarizer page we can do that by pasting it right here and press enter now we can see this great looking loading and again it does take 5 to 10 seconds hopefully not too long and there we go we can see our summary the article extractor and summarizer API is a tool that can extract the body of a news article from a URL and summarize its content using GPT which is exactly what we are doing with the power of that API but we're doing it from within a wonderful UI ux developed application so that people can just come to it and get all of the benefits without knowing how to code and essentially that's what a SAS business or a software as a service business is you provide software to people the last thing to make this a business is of course add payment options so as I mentioned before if you want me to turn this into a real business where you can add payments to it and expand it further just let me know down in the comments now the main question is can we switch between the history and we can as you can see the whole summary of the previously searched article is saved in the local storage which means that you don't necessarily have to make another request you're immediately getting the value out of it that is great and with that the last part we have to do is copy the clipboard button right now if you click it it just opens the summary but in case you want to revisit this URL we are too lazy to kind of copy it and then go here and paste it you just want to click here and copy it immediately I'm going to teach you how to do that as well so we can go all the way down below the handle submit and we can add a cons handle copy function that's going to accept a copy URL right here inside of the state we also want to create a new one called use state and that's going to be copied and set copied at the start equal to an empty string of course this is supposed to be set copied now that we have that inside of the handle copy you can say set copied to be equal to copy URL and then use the built-in Navigator dot clipboard dot write text copy URL this is what actually makes the copy button work and then we want to reset the copied after a specific amount of time to be able to show the successful animation so we can say set timeout where we have a callback function where we're going to reset the set copied to false after let's say three seconds so now we can put this inside of this copy icon right here source is copy we have this div and on that div we're going to add an on click where we have a callback function where we call the handle copy and paste in the item dot URL now depending on the state of the copied we want to show a different icon if we have currently copied so if copied is equal to an item.url in that case we want to show a tick meaning a successful copy else we show the copy icon we can also change the alt and now if we save this and click copy you can see how we get this success icon and you can actually paste in the browser and search for the full version of that website if that's what you want to do so we made the copy work as well and with that said believe it or not we came to the end of the development of this great summarizer application now you know that here in JavaScript Mastery I always like to take you a step further be that Landing a developer job through our courses in the master class or teaching you how to deploy this project to the Internet so that you can showcase it on your portfolio and get a job so that's going to be our next step we can close all of the open files as well as tabs and just open up netflify when I have to deploy simple react applications without needing a fully custom domain or speed or anything else I simply use netlify I'm going to teach you how to deploy your application right now using netlify now if I was deploying this app to be a paid software as a service business I would have definitely used hostinger they are cheap but credible and allow you to have a custom domain so in case you want to use them to have something a bit more professional the link is going to be down in the description to get started deploying our app on netlify you can click get started for free login with one of the services scroll all the way down and then in here you can drag and drop your site output folder so how do we get to that well open up the terminal stop it from running by pressing Ctrl C and then run npm run build is going to generate an optimized production build of your application so we can simply drag and drop it into netlify and while I was speaking it was already done you can see this new this folder appear right here you can click reveal in File Explorer or open in finder if you're on Mac finally drag and drop this folder right into here as you can see it's going to open the site and your new URL is here if you click it you're gonna notice that the site is already deployed isn't that great Let's test it out with something like https column forward slash forward slash jsmashtree dot Pro you can see that it's loading but it says well that wasn't supposed to happen an error occurred the reason why that happened is because we have to add our environment variable here as well remember environment variables are local so go to site settings environment variables and then add a variable import from a DOT EnV file and you can simply paste the contents of that EnV file here and import variables it is as simple as that we can go back to site overview we can now close this reload the page and retry it and one more time we get well that wasn't supposed to happen but that's okay this happens when there isn't a lot of content to put into a summary so in this case let's try to focus on real articles I went to medium.com and let's try to go teaching chat GPT to speak my son's invented language okay that seems interesting so let's go ahead and copy the URL and paste it right here as you can see it's loading which is a good sign so we can expand it to see it it's in its full Glory and in just a couple of seconds we have a full result right here just to check if it's gonna work on a website again let's try it with the master class URL paste it right here and it looks like it's doing its thing let's take a moment to go through this a bit to see if it really can properly summarize a huge page that we just passed into it the JSM masterclass experience is a six month program that aims to help aspiring developers land their dream job the program is flexible and remote allowing students to learn on their own schedule from the comfort of their homes it includes hands-on experience on-demand learning and personalized support with a focus on building practical projects to gain experience exactly as you did by building this while watching me but in the master class you will do it on your own with the help of the mentors it requires about 20 hours per week and includes monthly theme projects algorithm exercises mock interviews front-end challenges and more students receive one-on-one mentoring sessions feedback on their code and access to webinars q and A's with me and more I would say this is a pretty good summary of what we do with that said I wanted to congratulate you for coming to the end of this phenomenal video and for building it out with me and deploying it to the internet once again huge thanks to Rapid API not only for sponsoring this video but for creating such a phenomenal Hub of thousands of apis that we can use to develop our applications and once again if you want me to upgrade this project and turn it into a real SAS business by allowing users to purchase a specific amount of summaries let me know in the comments below and we'll make it happen with that said that's gonna be it for today thank you so much for watching and I'll see you in the next one have a wonderful day [Music] thank you

Channel: JavaScript Mastery

Views: 121,029

Keywords: javascript, javascript mastery, js mastery, master javascript, chat gpt, open ai, chatgpt api, chatgpt vscode, react gpt 3, react gpt 4, article summarizer, chat gpt react app, react ai, react ai app, artificial intelligence app react, ai react js

Id: vpvtZZi5ZWk

Length: 75min 27sec (4527 seconds)

Published: Fri Apr 21 2023

Reddit Comments

[u/superjet1]

I'd switch redux to zustand :) other than that, that's a nice tutorial!