Build and Deploy Google Search 2.0 with React & Tailwind CSS (simple!)

hi there and welcome to a project video where you'll build and deploy an entire google search clone sounds crazy right with the ability to search for up-to-date results news images and videos modern ui dark mode and much more this completely responsive google clone is the perfect project you can build to master the use of modern react.js in this one video you'll learn react best practices such as react context and hooks i'll give you a complete introduction to tailwind css what it is what are its advantages and how you can start using it right away you'll then learn how to create a modern ui using tailwind css completely from scratch and most importantly you'll learn how to fetch data from google search api using rapid api essentially you'll become the master of working with apis this is the first project on this channel i've built using tailwind css so if you'd like to see some more tailwind projects or a complete tailwind guide like this video and let me know in the comments if this video gets 5 000 likes i'll create another tailwind video at the end of this video we're also going to deploy this google search application so that you can share it with your friends put it on your portfolio and get a job before we dive into the project i have an important announcement for you for months now you guys have been asking me which visual studio code extensions do you use so instead of creating an entire video to save you guys some time i've compiled all the best visual studio code extensions in just one list you can download it completely free by clicking the link in the description enjoy with that said let's dive straight into the video [Music] 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 due to rapid api because we are using their google search api this api is just one of hundreds of thousands of apis available on their api hub in this video you're going to learn how to use most of the endpoints from this api how to get search images news and even videos so to be able to use these apis make sure to use the rapid api link in the description and then you can click sign up or log in in this case i'm going to log in since i already have the account you can log in with google github facebook or just your regular email once you're in you'll be redirected to rapids api hub where you'll be able to find hundreds of thousands of apis this was the first step in our video now let's create our react application and then later on we're going to call these apis straight from our react application before we go ahead and get started i just wanted to let you know that the entire code base for this project is up on github so the link is going to be down in the description if you at any point get stuck have some questions or simply don't feel like typing some code parts out you can come here and finish your application if you like this project definitely click the link in the description and give it a star now let's dive right in as always we're going to start by creating a new folder on our desktop i'm going to name it goggle a completely unique search engine once you have that you can open your code there of choice in this case i have an empty visual studio code window once you have it simply drag and drop your folder into your code editor of choice and finally once you have it go to view and then terminal we're going to use this visual studio codes built in terminal to create our react application and we can do that by running mpx create dash react dash app and then dot slash to initialize it in the current directory we can press the enter key and we're going to wait about a minute and then we'll be right back and our react application has been initialized as you can see we have a few files and folders here the one we really need to focus on is going to be the source folder this is where our entire react application lies now there are a lot of files and folders we won't need so what i usually like to do is simply delete the source folder completely and then simply right click new folder and create it from scratch that way we can create all the files and only the files that we need the first and most important file that every react application needs to have is going to be the index.js this file is going to be the connection between a react application and our index.html in here we need to say import react from react also import react dom from react dom then we need to import the app from dot slash app this app is a functional component that we haven't created yet and then finally we need to call react dom dot render we need to call our app like this as a self-closing component and then we need to attach it to the dom by saying document dot get element by id and then a string of root what this is going to do is if we go to our public and then index html this html looks a bit weird but if we simply space it out like this remove some of the comments like this one this one and finally this one you're going to notice that this the simplest possible html page that only has one div with an id of root so essentially what we're seeing react to do is we're saying connect our entire application and display it in our div with an id of root while we're here we can also change the title something like goggle should do and that's it now we need to create our application so this is going to be the second file in our source new app.js our app.js is going to be a simple functional component so we can use the shortcut called rafce which is going to create a react arrow function with a normal export there we go and in here we can simply have an h1 that's going to say app now if what i've done just now seems like some sort of a magic to you that's because you've never heard of the extension called react snippets so if you go to extensions and then search for snippets you should be able to see es7 react redux graphql react native snippets you can install that and then you should be able to run the rafc command which is going to simply create this boilerplate code for you great with that said we are ready to install tailwind css to our react application let's do that right now to install tailwind i've split my window in half to have our code editor in one side and tailwindcss.com on the other so what you can do is go to the top right of the page and go to documentation then you can click start learning under read the docs once you're there you'll see that there are a few integration guides the one we are going to go with is create react app the first step is to create your project and we've already done that so let's move to the second one which is setting up tailwind css you have to have node 12.13.0 or higher so keep that in mind and then you can simply install tailwind via npm so you can copy this line right there go to view terminal let's clear it by running the clear command and simply pasting npm install and copy this line this is going to install all the necessary dependencies to run tailwind this is going to take a moment so let's take a short break and we'll be right back once we're done with the installation we have to install krakow krakow is a create react app configuration override quite a clever name so you can simply do that by running npm install at krakow forward slash krakow we're going to give it a minute and then we'll be right back as well krakow installed pretty quickly and now that we're done with that we have to simply use krakow instead of react scripts so what we can do is go to our package.json and then inside of here we have to replace react script start build and then test so i'm simply going to take these three from here and replace these three lines now we have krakow start crackle build and crackle test now that we're done with that we also have to create a krakowconfig.js so right inside of the root of our folder let's create a new file called craco.config.js and then inside of there you can simply copy and paste what you have in the tailwind css docs there we go finally we can scroll a bit more down and we can create our own tailwind configuration file by simply running mpx and then running this command so let's do that as well and there we go our minimal tailwind.config.js has been created if you want to customize your tailwind experience you can do so in this file for now we're going to leave it empty but we're going to change just one line we're going to configure just one line which is the purge so simply feel free to copy this and then paste it instead of the purge right here line two there we go and one final step is including tailwind in our css so inside of the source we're going to create one new file which is going to be called global.css inside of there you can simply copy these three lines finally we have to import this global css in our index.js so instead of here that's simply going to be import dot slash global.css inside of a string that's it let's scroll down and see if there's something more nope that's it we are finished and we are ready to run npm run start so let's maximize our code editor let's close all of our files and folders and let's simply run npm start if we've set up everything correctly we should be able to see our react application initialize on localhost 3000 and there we go you can see app on the top left i can immediately notice that this is not a standard font which means that tailwind has been installed successfully now we are ready to start creating our application of course we're going to start creating our application in the app.js but first we need to create a components folder with a few components so inside of the source let's create a new folder called components and then inside of there let's create a navbar dot jsx also footer dot jsx and then finally routes dot jsx these are the first three components we need to create inside of the routes feel free to run rafc command and if you have the snippets extension you should be able to immediately get the import line and also the export const functional components now that we have that inside of the routes we can simply render an h1 that is going to say routes i'm going to copy everything in this file and paste it in the footer but i'm just going to change the routes to footer and then one more time for the nav bar instead of here i'm simply going to change the routes to navbar now we have three different components that we can import inside of the app.js so right here we can say import that's going to be navbar inside of the curly braces because we're using export const and not export default from dot slash components forward slash that's going to be navbar now we can just duplicate this two more times the second line is not going to be enough bar rather it's going to be footer and third one is going to be routes great our application is also going to contain a state so at the top right next to react we can import in curly braces use state hook so now just below the opening line of our functional component we can create a new state field something like const and then in array destructuring we can say dark theme and also set dark theme because we want to know at all times are we currently on dark or are we not at the start dark theme is going to be set to false now we can start creating our layout we're going to give our first div a class name and it's going to be dynamic last name so inside of there we can say if it is dark theme then we can return a string of dark else we're simply going to return an empty string this is how you use a ternary operator now inside of this div i'm going to teach you how to write your first tailwind css line ever it's going to be a div and that div is going to have a class name equal to and now in here we can write all the different utility classes that tailwind css offers it might be a good idea to put this side by side so that you can see the changes live let's do that right away i've put the browser and the text editor side by side so now we should be able to see real time what's happening let's add something inside of this div something like app and let's save it we still cannot see a difference but let's try adding a background so inside of here i'm going to say bg as in background gray and then 100. as soon as i save that not sure if you can notice it but behind this app there is a background which is kind of grayish of course we can go with a darker gray with 500 and you can instantly notice that so by simply saying bg gray 100 we can notice that nice background color now you might be wondering how did i know that there was a bg class a gray caller class and also 100. what does that mean i've opened the tailwind css documentation page and i'm going to extend it until we can see the left side sidebar there we go let's browse through some core concepts tailwind css is built utility first so if you look at this nice alert pop-up you can notice that this is the classic approach to build it we have some html and then we have separate style sheet but that is not ideal if we scroll below you can notice how that is done using tailwind we have just a bit longer classes but everything is in one space html and css we end up with the same end product but we don't have to have a separate style sheet so now we were talking about background and colors so let's go to colors and you can notice that there are a lot of built-in colors gray red and we can keep going on and on all colors go from 50 to 900 so 50 is really whitish yellow or whitish red or whitish green the lower the number the lighter the color will be so if you go with the red 100 it's going to be really light but red 900 is going to be really really dark now you know that bg gray 100 is going to be really really light gray great with that said let's keep it going i'm going to put this back on the side and the second class i'm going to provide is i'm going to say dark and then column bg gray this is saying if we are in the dark mode then instead of bg gray 100 do bg grade 900 so this is how we switch the modes then on dark mode so dark column we also want to change the text so we can say text gray 200 and we're going to say min dash h dash screen so if you're ever wondering what are some of these classes doing just feel free to go here go quick search for anything or control k and then search min h screen what is that doing that sets the minimum height of an element using the min h that's it in here you can read what is it doing and how you can use it that's going to be all that we need on this div right now you cannot see a lot of change because we don't have different modes yet but let's start creating our navbar and then you'll see the full power of tailwind css right inside of here we're going to render our nav bar then below that we're going to render our routes which is going to be video search or news and then finally below that we're going to render our footer now we're making use of all three components and you can see them right here so the next logical step would be to implement the navigation bar let's head to that component and let's code it out right now our navigation bar is going to be a good example of how we can use tailwind css to create extremely custom styles really quickly we can start off with this div that's going to represent our navigation bar let's give it a class name and let's start typing our classes we're going to say p dash 5 that means padding 5 then we can say pb 0 that means padding bottom zero then we can define this div as a flex container and we can also give it a flex dash wrap property let's save it and as you can see now it has padding on the sides but we cannot yet notice anything else because now there's only one word which is navbar inside of it now we can specify how this is going to look like on different devices so we can say sm colon and then we can say justify dash between that's going to be on small devices usually it's going to be justify dash center then we can say items dash center and also border dash b that means there's a gray border on the bottom then when we're using the dark mode we can say dark border dash gray dash 700 that's going to be a darker gray and then also usually border dash gray dash 200 great now we created the div that's going to represent our navigation bar now this might be a bit weird because this line is seemingly really really long but imagine how many css classes would we have to write again this has some advantages but also some disadvantages we are going to end up with really really long lines of jsx now let's create a div inside of that div and that div is going to have a class name equal to flex to make it a flex container it's going to be justify dash between items dash center space dash x-5 which is going to space everything out on x-axis and then finally we can say w dash screen usually you'll notice the more you start using tailwind css the more is it going to make sense but for example this last one might not be so obvious so let's go to our tailwind css ctrl k and search for w dash screen and in here you can see all of the different properties that represents max with utilities for setting the maximum width of an element great now inside of there we can render a react router dom link so let's import that's going to be link and that link will be coming from react router dash dom now if you've been paying attention you're gonna notice that we haven't yet installed react router dom or any other dependency for that matter so that's why we're gonna get failed to compile let's go ahead and open our terminal by going to view and then terminal and let's install all the necessary dependencies by first pressing ctrl c and then y and now we can install them to install the dependencies we can type mpmi and then we can start listing them out first we're going to need react dash router dash dom we're also going to need react dash player to play videos and also react dash loader dash spinner we're going to also use a utility hook called use d-bots so these are going to be all the packages that we're going to use for this project you can install them it's going to take a second and then we can continue with our application the packages have been installed and we can again run npm start once you do that and reload you should be able to see that we no longer have an error so now we can make use of this link we just imported we can say link and that is going to be not a self-closing component but inside of there it's going to have a two property and we're going to go to just forward slash which is home then inside of there we can have a paragraph and that paragraph is going to have a few class names the first one is going to be text dash 2 xl to make it really really big and we can immediately start adding the text to see what are we actually changing in there i'm going to type goggle i know it's not that creative but there it is and then i'm going to paste the magnifying glass icon which you can find by simply searching this on google i'm going to save it and then we're going to get an error which says that we cannot use a link outside of a react router dom so to easily fix this we can go back to index.js and then inside of here we need to make use of our browser router so we can say import and curly braces browser router as router and that's coming from react dash router dash dom now we can wrap our application like this in here we can have our router and now we simply need to put our app in between the router and that's going to allow us to simply switch to different pages of course we have to add a comma at the end of the router and that's going to be all that we have to do after you save that we can go back and our navigation bar should work let's reload the page and there we go with big letters we can see goggle we're also going to give it bg-blue-500 as you can see that easily switched that and i've just noticed that i'm zoomed in 500 so this is not how it looks like for you i'm just going to reset and there we go this is how it should look like we're also going to say font dash bold to make it bolder and let's say text dash white to make it white let's add padding y that means on top and bottom one and let's say padding x which means on left and right which is going to be two let's save it and there we go this is our button to go back to the front page we can also make it rounded by simply saying rounded there we go and let's define some dark classes so dark we're going to say bg dash gray dash 500 and also dark text is going to be text dash gray dash 900 there we go this is our button and we created it simply by using some of the classes now below that link we're going to have one more button this is going to be a basic button with a type equal to button and we're going to use this button to change the theme so we can see on click and simply make a callback function out of it and we can say set dark theme is equal to and we can say not dark theme which means that we have to pass the dark theme and set dark theme as prompts to our navigation bar component so that's going to be in the app and then inside of here we can simply pass dark theme is equal to dark theme and also set dark theme is equal to set dark theme now we're getting these props inside of here so we can immediately destructure them and say dark theme and set dark theme great let's save it there we go we're good we cannot yet see the button but let's keep adding some classes and then we're going to see it before we add the classes we can simply say something in there so we're going to add a dynamic block and we can say if dark theme in that case we can simply render something like light or else we're going to render a string that's going to say dark so i'm going to zoom it in a bit and you can see there is a dark and it switches between light and dark now let's add some classes to our button i'm going to say class name is equal to text dash xl when it is dark we can say dark bg dash gray dash 50 also the text on dark so dark and then text dash gray dash 900 to make it really really dark and also usually background is going to be bg white we're also going to add a border to it we're going to make it rounded dash full we're going to give it some padding on the x-axis of 2 and also padding on the y-axis equal to 1. okay let's save it and see how does it look like there we go we have our dark button and then one cool thing we can do is you've noticed how i've done dark and then colon or sm to do it only on small devices you can also do hover and then apply a class only if you're hovering over it so we can say shadow dash lg now if we hover over it you can see that there is a shadow that just shows you how simple and how powerful tailwind is now again just to spice it up a bit i'm going to copy and paste some of the icons or emojis so in light i'm going to add a light and then on dark we're simply going to add a moon emoji you can find this icon by simply googling moon emoji great there we go and as you can see it switches the theme but something doesn't look right here the theme doesn't appear to be changing and to make a change we just have to make one simple change i've opened our file tree and let's go to tailwind.config inside of here instead of dark mode is equal to false we can simply set dark mode is equal to and then a string that's going to say class there we go i've saved it and immediately if you reload the page and press dark mode you can see there we go the dark mode now works great now i'm going to zoom it out a bit and i'm going to keep it on dark mode because honestly i think it looks better for now now below this inner div we're going to have a search component so this is going to be a self-closing component that we don't yet have we have to create it and import it so i'm going to create a new component called search.jsx that's also going to be rafc to create search in there i can simply say search for now and we can import it straight into our nav bar by saying import in curly braces that's going to be search and it's going to be coming from dot slash search and then forward slash search one more time now that we have our search we can import it by saying import and that's going to be search in curly braces from dot slash search great let's save it and it says search is not defined let's see why that is so if we go to search search really is there so i'm going to reload sometimes this happens but now after the reload we can indeed see the search so we're going to leave search alone for now because we don't need to implement it yet now we're going to focus on the routes and then only after we have everything else we can get back to search so let's close all of the files and move to our routes inside of our routes we're going to import a few things from react router dom and those things are a switch a route and then finally a redirect component these are coming from react router dom now instead of here this main div is going to have a class name equal to p 4 that means that it's going to have padding of four you can see it immediately moved the routes a bit below now we're not gonna have an h1 we're going to have a switch component a switch can only render one route at a time so let's create our initial route the route route so we can say route the path is going to be exact and it's going to be path is forward slash so if we land on forward slash we're simply going to redirect so we can call the redirect component and then point to forge search that means that our application is not going to have just a forward slash we're always going to be on forward slash search now the second route is going to be again a route and then inside of there we can set the path to be equal to an array like this inside of there we can render a string of force search we can also add one more string something like forward slash images let's also do a string of forward slash muse and then finally a string that's going to say forward slash videos for all of these paths more specifically exact paths we want to render one component and that component is going to be results again results component doesn't exist yet so let's create it right now inside of our components folder i'm going to create a new file called results.jsx one more time is going to be an rafc and i'm simply going to say results in there let's save it go back here and then finally we need to import it by saying import results and that's going to be coming from dot slash results great let's save it and take a look we can see our results right there and notice how we are immediately transferred to the forward slash search we can also go to forward slash videos for example and there we go i misspelled it so we don't see the results but if we go to videos we can see the results right there same thing if we go back to root we're going to be redirected to forward slash search and finally before we start implementing the real results we're just going to render out the footer just so we can see something on the bottom to create a footer we can go to our footer component and we just have to add some simple styling more specifically to this div we're going to add a class name and that's going to be text dash center you can notice how immediately with just one class similar to css name it immediately got moved to the center it's going to have padding dash 10 so that's going to give it a lot of padding margin top mt is going to also be 10 and it's going to have border dash t to give it top border to basically make it look like a footer then we're going to say dark on dark mode it's going to have border dash gray-700 and also usually it's going to have border dash gray-200 and inside of there we can say something like 2021 goggle and that's going to be incorporated there we go this is a really really simple footer you can see those lines even better on our dark mode now is the time that we really get to the point of this application and that is using rapid api to fetch live google results let's do that straight away to implement how results are going to look like we first have to get the results themselves so let's start with that i'm going to close all the files and folders and we're going to create our next file more specifically a new folder we're going to create a folder called contexts and inside of there we can create our new context or a file which is going to be called result context provider dot js great inside of there we're first going to start with importing a few things more specifically react also from react that's going to be create context use context and finally use state all of this is coming from react and i'm going to extend our code a bit so we can see it a bit better then we're going to create our context so we can say result context is going to be equal to create context and we just call it as a function below that i want to specify the base url of our api so we can say const base url is going to be equal to and we have to find it on rapid api so make sure to click the link down in the description that's going to be the google search api and then in here you'll have the key to subscribe to that endpoint it's going to lead you to the pricing section where you'll be able to see that it's completely free for the basic package 600 requests a month great then you'll be able to test the api and also see what you have to do to make a request so here is the url we can copy that go back to our code and simply paste it here as a string we don't need the entire thing of course we're going to implement the search ourselves so we're simply going to go under v1 without the ending forward slash like this and finally we have to create our contacts provider so we can say export const that's going to be a result context provider and that's going to be equal to a basic react functional component and we immediately want to get from props children children is a problem every single react component has now inside of there we want to create a few state fields the first one is going to be const and that's going to be results and also set results at the start that's going to be equal to use state and we're going to initialize it with an empty array then below that we also need to have the loading state so i'm going to say is loading and then also set is loading that's going to be another use state which is at the start going to be set to false and then finally we also need to have the access to the search term we're looking for so we can say const search term and also set search term that's going to be equal to the use state and this one we want to initialize to an empty string then below that we're going to create our function more specifically the get results function that function is going to be an async function because we want to make some api calls in there so we want to say async function and it's going to accept the url we want to make a call to so for example if we want to get the videos it's going to be forward slash videos if we want to get the search that's going to be search and we can also get the images this is what i mean by url a better name might be type so which type of results are we looking for great then inside of there as soon as we get in the function we want to set the loading or set is loading to be equal to true and then we want to make our api call so we can say const response is equal to a weight and then i usually use axios but in this case we can just use basic fetch and then to make a get request to fetch we have to provide a string we want to make a request to so we're going to use a template string and provide that base url so essentially we're calling https google search api version one and then we want to add the type onto it so we can say type there we go now we have the base url and then we are pending either forward slash search for slash images forward slash videos or news that's going to make our complete request as the second parameter to it we need to pass an options object inside of there we can pass our method which is going to be equal to a string of capital get letters and the second thing in there is going to be headers and those headers we can simply copy from rapid api in here you can see that we have three different headers i'm going to copy them and paste them right here of course to make our application more secure later on we're going to store this rapid api key into a process environment variable finally how do we get data from something using fetch well now we have the response so we can say cons data is equal to a weight response dot json and we call it like this and that data represents our actual results so we can do set results is equal to data finally once we are at the end of this function we simply want to set is loading to be equal to false because we're no longer loading this is going to be it this is our get the results function so finally what do we do with all these states and these functions we are going to pass them through the context to the entirety of our react application we can do so by at the end providing a return and we want to return the result context dot provider there we go that's going to be not a self-closing component remember at the top we created that context called result context and now inside of it as a value we can pass some things to it we can make it an object and we can pass the get results function and also all the state fields results that's going to be search term as well as the set search term what else do we need to pass and the last thing we have to pass is going to be is loading there we go let's scroll up and see if we're making use of all of our used states we indeed are and finally in between our context provider we're simply going to render the children there we go with that our result context provider is done and we're also going to create one extra function to make it easier for us to use the values from this context we can do that by exporting another function export const use result context and that's going to be equal to a function that's simply going to call the use context and then we provide the result context as the first and only parameter there we go this brings us to the end of our result context provider now let's use this data inside of our results component to see how does it look like and how we can map over it to show some data inside of our results component we are going to import a few things first from react we're going to import use effect then we're going to import the use location hook that's used location from react dash router dash dom we're also going to import the react player component which is coming from react dash player and finally we need to import a few things that we created one thing is going to be import in curly braces use result context and that's going to be coming from dot slash contexts and then forward slash result context provider finally let's make use of our use result context we can make use of it by saying const and then the structure results as well as the is loading property get results function as well and then the search term and that's going to be coming from equal use result context and we call it as a hook that is how context works we are exporting everything inside of our result context as you can see get results results search term set search term and is loading and we're simply using that result context right here as a hook also an important thing for this component is going to be the location so we can say con's location is equal to use location from react router dom that's going to give us the url for example forward slash images or news or videos and so on now inside of here first thing we want to do is say if we are loading so if is loading then we want to return a loading component which is a self-closing tag of course this loading component is something that we have yet to create so let's go to components and create a new loading.jsx component inside of there i'm going to do rafc and that's going to be the easiest way to create a react component then we can import something known as loader and that's going to be coming from react dash loader dash spinner and all that it's going to be is a simple div that's going to have a class name equal to flex it's going to have justify dash center and items dash center so we're basically centering everything and then inside of there we want to show a loader component which is a self-closing component that has a few properties it has a type equal to puff p-a-f-f also it has the caller equal to hash or bound 0 0 b fff it's going to have the height equal to 550 and also the width equal to 80. great that's going to be all that you have to do for the loading component we just of course have to import it right here by saying import loading from that slash loading great now we are ready to actually return the results the return of our results component is going to be just a bit different it's not going to be a usual react component we are going to have a switch statement which is going to decide how the results are going to look like for example if we are on the forward slash images result then we want to show images and render the corresponding image look if we are on the forward slash news then we want to render let's say cards if we are on videos we want to render iframes so this component is going to be quite different and it's going to teach you that one component doesn't necessarily have to always look the same let's create a switch right there you can use this auto filling so just a few steps down to this empty box and click the switch now inside of there the thing we need to look for is going to be location dot path name let's actually cons a log that location dot path name just so you can see what that is location dot path name if the location path name is forward slash search then for now we're simply going to return something like a string that says search so we can say return a string that says search we don't need this break and on the default case we're simply going to return something like error because we always need to be on one of the specific cases great now let's save it simply so that we can see what the location that path name actually is and after taking a quick look i immediately noticed that we should be importing this from lowercase react and not an uppercase first letter there we go if we now go back and reload we're going to get a different error that's good that's a step in the right direction so the error now is coming from here it's saying that we cannot destructure the results because they are undefined which means that this data we're turning must be undefined as well so now let's do some live debugging i'm going to console log this data right here okay so we are not getting data which means that the error must be happening even sooner that means it's happening here it's trying to do something with the results more specifically it's trying to destructure them from the use result context and everything seems to be fine to me but this is actually one of the most common errors when everything seems fine but maybe we're just missing one really really obvious thing so let me spend some time and try searching for that error and yeah that was the case after some thinking i found the error and it is extremely obvious we are using context but in our index.js we are never actually wrapping this with our context provider so we have to go inside of our index and we have to import our state or result context provider so let's go here and import result context provider and curly braces from dot slash contexts and then result context provider we have to wrap our entire application with our result context provider like this so we can put this right there and we have to change this comma right there there we go now we are wrapping our app with the result context provider and now we have access to these results is loading and everything else inside every single component in our application again i always want to keep this thing in because they definitely happen to all of us even youtubers who are doing programming tutorials stuff like this happens and sometimes you can spend hours looking for a mistake in a really simple thing like this so the point is don't be discouraged just keep it going and you'll get better now let's see what our location that path name is our location.path name is just forward slash search if we are here and if we go to forward slash news then it's going to be for slash news so basically it's anything that's currently after our first forward slash so we know what we can have we can have search i'm going to duplicate this a few more times we can then have images we can also have something like news and finally we can have videos so i'm going to duplicate this one more time and that's going to be videos great so now let's actually create the jsx for our basic search that's when you go on google and just search for any topic instead of returning a simple string we're going to return a jsx block by putting a parentheses here and then in there we're going to have one dev this div is going to have a class name of flex also flex wrap justify dash between space dash y dash 6 and then finally sm px and then dash 56 there we go and now inside of that we can loop over the results so i'm going to open a new block say results question mark dot results it's two times in there and then one more time question questionmark.map inside of here we can render a callback function and instead of normal curly braces we're going to have parentheses because we want to instantly return something right here we are of course getting one result item but now we can immediately structure it to get the link and the title out of it now if you're wondering how they know there's a link and a title on a specific search term let me show you we're going to console log the entire results array so for now i'm going to comment this out and i'm going to go back to our result context provider and i'm going to console log the data right there console log data if we reload the page you'll notice that we are never seeing this kansa log and that's because if you think about it we're never actually calling the get results function so let's go back in our results and create a new use effect use effect in this case is going to happen only on the component that mount that means that this dependency array is going to be left empty and everything that's inside of this function will be run only at the start of our application meaning when you reload the page so inside of there let's now just call the get results and we're going to pass a string into it just a static string for now let's do forward slash search forward slash q and then equal to and then in here we have to enter our search term let's do something like javascript mastery and we can also say and num is equal to 40. that means 40 results now let's save it and take a look as you can see there's that nice loading animation we created and here is our results array we have answers image results and the main results are right here javascript mastery youtube is going to be the first link so the most important thing is going to be the link and the title of that link but of course we can also render a description as well feel free to do that as extra homework to practice a bit but of course you can also add description if you feel like it now let's go ahead and render those results so we're mapping over the results and we want to do something with the link in the title so for each result we're going to show a div that div is going to have a key equal to index and that index we can simply get right here as the second parameter to our map there we go our div is also going to have a class name and class name is going to be equal to md so on medium devices we can see width is equal to two fifths of the screen and also with full again if you're not sure what do these mean simply copy them go to tailwinds website and paste them in in here you can see these are the utilities for setting the width of an element and if you look for two fifths that's basically a width of 40 percent great now inside of that div we're going to have an anchor tag and that anchor tag is going to have an href equal to the link we want to point to a target equal to a string of underscore blank and a rel equal to no refer inside of there we can render two different p tags the first b tag is going to have a class name equal to text dash sm and inside of there we want to render if link dot length is greater than 30 characters in that case we want to render link dot substring and then we want to take it from 0 to 30. otherwise we simply want to render a link so this is going to take only the first 30 characters of a link if it's above 30 otherwise it's lower than 30 so we can render the entire link finally below that we want to render a title so we can do another p tag that's going to have a class name equal to text dash lg hover is going to be equal to underline or column underline when dark mode is turned on we're going to show the text dash blue dash 300 and on normal devices it's going to be text dash blue dash 700. and inside of there we're simply going to render the title now let's save it and take a look in the browser i'm going to collapse our console a bit and reload the page it's loading as you can see and for now we cannot really see anything because we are on the news page remember we're currently doing this only in the case of the forward slash search so let's go here and go to search and as you can see the search results show up they don't look that good on medium devices right now but if you expand it a bit you can see that looks pretty good if you want to go ahead and make it even more responsive for all devices you can use the tailwind properties we learned something like md sm large and so on but for now it works great on large devices and also if we switch to mobile you can see it looks perfect great now we have the links if you click them it's actually going to point you to that specific link and we essentially made the simplest possible google search clone it looks good as well and it's also mobile responsive now of course if you want to search for images arcgis x is not going to be the same it's not going to be two paragraphs of text so let's implement the jsx for images news and videos now for the images images are going to be fairly similar we're going to return something that something is going to be a div and it's going to have a class name equal to flex flex dash wrap justify dash center and also items dash center so we really want to center everything inside of this div now inside of there we also want to map over the results so we can say results question mark dot but this time we're gonna do image underscore results and one more time question mark dot map we want to map over something again just a normal parenthesis because we want to instantly return something and from each image we can immediately destructure the actual image as well as the link but this link is an object itself so we can use one more destructuring assignment inside of there you can do that by saying colon and then one more pair of curly braces where we can get the links href and a links title we're also going to get the index as the second parameter of our map now we want to render an anchor tag that anchor tag is going to have a class name equal to sm colon b-3 and usually on all other devices it's going to be b-5 that's simply padding then we're going to give it href which is equal to href also it needs to have a key equal to index and finally it has to have the target equal to underscore blank and the rel equal to no referrer now inside of that anchor tag we can render the self-closing image tag it's going to have the source equal to image question mark dot src it's going to have the alt tag equal to the title and also it's going to be loading equal to lazy that's going to just make it lazy load so we're not loading all images at the same time and finally below the image we're going to have a paragraph tag it's going to have a class name equal to we're going to set the width to b36 then we're going to have break dash words this is an interesting one so let's copy it and see what does it do back in tailwind i'm simply going to paste it and there we go they say use break words to add line breaks mid-word if needed so that means that if we have a really really really long word it's simply going to break it into multiple lines great then we're going to say text dash small and also margin top empty to great inside of there we can simply render the title let's save it and take a look now of course we have to go to our images so i'm manually going to switch to images we're still searching for javascript mastery but as you can see we're not getting any results if we scroll down and go to image results the length is equal to zero let's see what that is about we're trying to render the image results but are we ever actually making the request to the images endpoint let's take a look we're simply doing everything to just search now we have to make use of the location.pathname not only to get the results for the forward slash search which is hard coded right now but also to forward slash images so we can add an if statement at the top and say if search term exists so if there is a search that we're searching for then we also want to check if location dot path name is equal to for slash videos in that case we want to call get results we want to pass the forward slash search forward slash queue is equal to to the search term and then space videos so just by saying space videos we're gonna get all the videos for that specific search term and now else if we're not searching for videos in that case we simply want to call something similar to the line we already had get results forward slash but now it's not going to be search it's going to be location dot path name of course we have to be in a template string so that we can use it there we go and the query is no longer going to be just statically type javascript mastery we can change that to b the thing we're importing from use context which is going to be search therm and we can leave the number 40 to get the 40 results each time of course we cannot yet know what search term that we have or what the location path name is if we call this only at the start we have to add a few things to the dependency array so inside of there i'm going to add the search term as well as the location dot path name so anytime that anything in here changes this function is going to be reran we also have to add the get results in here there we go visual studio code is no longer complaining now this is not yet going to work because we don't have the search component implemented yet but we can do one quick fix to go back to result context provider and at the start we're not going to let this be an empty string we're going to set it to js mastery that way we can always get results for a specific search now let's save it and take a look in the browser i reload it and look at that we're getting an endpoint or a message saying endpoint api v1 images doesn't exist so let's go ahead and see what that is about we can immediately notice that it's trying to make a request to api v1 forward slash forward slash images so two times forward slash let's see where that is coming from if we go back to results we can notice that we have a forward slash here but if you remember what picons are logged the location.path name already contains that forward slash in there so we didn't actually have to put it here let's save it and one more time reload as you can see we're making a lot of requests right now and you want to stop this from running immediately the reason why it was re-rendering the entire time is because we added this get results here sometimes visual studio code doesn't know what's the smartest thing to do so in this case we're not going to listen to it it says react hook use effect has a missing dependency get results in this case we're not going to listen to it we're simply going to remove it from the dependency array and would you look at that now it's no longer reloading and we can see our images these images are getting pulled from different sources just like google does it this one is from youtube complete path to javascriptmastery.com if some code that we've written here like use effects ifs or even switches seem a bit weird to you then it might be worth checking out the complete path to javascript mastery the link is going to be down in the description but basically our images now work and also if we get back to just search you can see that the search works as well there we go we are done with half of the project right now we just have to implement the news and the videos so let's go ahead and do that right now to implement the news i'm simply going to copy what we've had on the search because they're quite similar with some minor differences so right here we're going to have a return that's going to return a div that div is going to be flex with a flex wrap justify between space y6 and also smpx 56 the only thing we're missing is going to be the items dash center we're going to loop over the results but this time it's going to be results dot entries in here we're not going to get the link but rather it's going to be links we're also going to get the id so let's do links id source and the title these are the things we're getting from one specific news entry now keeping in mind that we have the id there is no need for this index our first div is going to have a key equal to id and the class name equal to md width is two fifths and w full our anchor tag href is going to be equal to links question mark dot 0 and then dot href so this is how we're going to get the link of a specific news entry we're going to leave the target and the rel but we're going to add one class name which is going to be equal to hover and then underline we're only going to keep one paragraph so i can delete this one and this paragraph is going to have the text lg hover we don't need this hover underline here and these properties are going to remain and there we're going to render the title finally below that paragraph we're going to have one more div this div is going to have a class name equal to flex and also it's going to have a property gap dash 4. inside of there we're going to have one more anchor tag and this anchor tag is going to have an href equal to source question mark dot href the target is going to be equal to underscore blank and rel is going to be equal to no refer finally in there we're going to render source question mark dot href great this is going to be it for our news article let's go ahead and save it and take a look okay to get to our news we have to go to forward slash news and if you look into it you'll see that refers get an error results.entries.map is not a function this is a really interesting occurrence happening right here because we're getting an error even though we have question marks right there these question marks should prevent us from having an error even if results are empty another thing that we can do is at the top we can destruct the results because as you can see we're repeating ourselves quite a lot results.results results.imageresults and then results.entries so let's scroll to the top and we have results we can say column and then curly braces to destructure things out of it first we're going to destructure the results also image underscore results and finally entries but entries also mean something else in javascript whenever you have an object you can call the dot entries from that object so in that case this might not be the best name for anything that corresponds to an object so what you can do is say colon and then rename it in this case we're going to simply call it news so now we can scroll down and we can simply remove the results it's only going to be results only going to be image results and finally it's not going to be entries it's going to be news now let's try to save this and take another look i'm going to reload the page and we get news that map is not a function so the same error still happens let's add a few cons of logs to check it out and we're going to do kansa log where we simply want to console log the news let's save it and take a look i reloaded the page and if i scroll to the top or if i simply click here and then info then you'll be able to see just the info messages as you can see even though we can't unlock just the news we're still getting a function of entries and not our actual news entries which is not good that means that even though we renamed this it's still taking the basic object property called dot entries which is a function we need to get the actual results so we need to make some modifications to how we retrieve the data from our api for now i'm not going to structure this from here and i'm also going to simply comment this entire part out now we're going to go back where we get the data from our api that's going to be use result context instead of here we get the data what we can do is we can simply check if type is triple equal to forward slash news in that case we want to do something else with the data let's simply rename what we return let's do a simple kansa log right there where we're going to consolidate the data inside of an object like this now i'm going to reload the page and we cannot see anything yet even though we are on the news let's do one more time still no errors i'm going to pull this outside of this type and i'm also going to console log the type itself to see if it may be missing okay there we go the type is actually news and then we added the query to it so it's not going to be the same but we can check if the type starts with or includes so let's do if type dot includes and that's going to be a string of forward slash news in that case we want to consolidate the data so now if you reload the page you can see that we indeed do get the data here that data has the entries which we need to rename so let's simply return data dot entries great and we can do the same thing for all types of different search results so we can have an else if and we can say if type dot includes forward slash images if it includes images then we need to return that's going to be data dot image results and let's check what else do we have if it's normal results then it's just going to be results.results so else that's going to be return results or rather data dot results great of course what we should be doing instead is not returning the thing but rather setting the results to be that thing so right here instead of these returns i'm simply going to use set results and then set them to be just that i'm going to return that i'm going to add a parenthesis at the end there we go so now we're not setting the results manually as data always we're always setting them to be something specific great so now if we go back to here we no longer have to destructure this and it's always going to be just results for all different use cases because depending on this thing we're returning different things i know this was a bit confusing but we really encountered something that doesn't happen often the api we are fetching the data from named something entries and entries is a built-in function on a javascript object so that's really not a good name to name something so now i'm going to switch this to results.map results.map here and finally this is going to be results as well there we go results now let's try to save it and take a look make sure to save this file as well and let's go ahead and open up our browser i'm going to reload the page and would you look at that our news results are here you can hover over them you can see the title and also the link you can go to now i'll try to go to search to see if we mess something up there we go the search is here works as well and finally images and the images still work great that part is working perfectly and now we can go to the last part which is going to be forward slash videos to implement the videos we're going to do a similar thing we've done so far but it's going to be even simpler we're simply going to return a jsxdiv that div is going to have a class name equal to flex and flex wrap then inside of there we also want to map over the results that's going to be results dot map and in there we're going to get the video and an index and finally for each video we just want to return a built in component but first we want to wrap it with a div that div is going to have a key equal to index and also class name which is going to be equal to p dash 2 to give it some padding and finally inside of there we're going to render our react player which we imported at the top that's going to be a self-closing component we need to pass the url to it and the url is hidden under video dot additional underscore links and then question mark dot 0 and then dot href there we go finally we also want to give some controls to the video and we want to set the width to be equal to 355 pixels and also the height to be equal to 200 pixels there we go now if we save this we should be able to go to forward slash videos and as you can see the videos started loading immediately i'm going to reload one more time and it looks like we're only getting the players but the urls are not there so that's going to be video dot additional underscore links and then zero dot ahref let's try to console.log it we can do it right inside of here console.log video just to see if we're missing something there we go we're getting each video and in there we have a link but this link is not the link of the video it's a link of the actual search result so we need to be able to get the videos let's see what's happening if we go right there to the top you can notice that if we are under videos then we're going to search and we're searching basically for the same search term but it includes the word videos so if we go to result context provider in here we should be getting the same thing as if we go with just everything else we're returning data so one more time let's check if our video has some additional links let's do it like this and i'm going to scroll to the bottom and indeed it has you can see there are a lot of different additional links so did i misspell this possibly no it looks fine and we want to get the zero element from each link so let's try to console log that as well and reload the page now as you can see we really do get all of these links and they indeed do have an ahref property which means that this is completely fine there must be some other reason why our video player is not rendering it looks like that our current search term is javascript mastery and although we do have a lot of videos the link that it's pulling are not the actual video links this is just the link to the youtube channel so it cannot actually display it therefore let's go to our context right here and let's change the search term to something like let's do elon musk now as soon as the page loaded you can notice that we got a lot of elon musk videos great videos now work now we just have to implement the navigation bar so that we don't have to manually switch between those urls and also the search so people can search anything they want but with that said our results page is now done let's go ahead and focus on our search and our links so we already have the search component listed in our navbar there we go and we've already created the search page itself so now we have to implement the search functionality as well as add those navigation links we can start by adding the links first links are going to be one new final component links dot jsx we can again do the rafc to create the links again just type links in there and then import it inside of the search right here import that's going to be links and that's going to be coming from links grade and then finally below the search we can render the links as a self-closing component there we go let's go ahead and test it out there we go now we can see the search and the links i'm going to go back to just forward slash which is going to redirect us to search and there we go now we are ready to implement the links so we can go to our links component inside of here we're going to import something known as a nav link and now link is coming from react dash router dash dom now inside of here we can first create an array of links that we're going to use const links is going to be an array and then each element in an array is going to be an object that's going to have a url something like forward slash search and also it's going to have a text which is going to be something like let's do all news and then in there we can also simply paste some kind of an icon like this just so you don't have to search i'm going to simply copy and paste the entire links array and you can copy it from somewhere in the description again it's just four different objects with different icons and texts and urls now that we have the links we can actually loop over them but first let's create our container div we can do that by saying class name is equal to flex and then on small devices we want to say the justify around on devices of all other sizes it's going to be justify dash between also the items dash center and margin top is going to be four now inside of there we can simply use those links to map over them we're going to get one individual link and we can immediately destructure the url and the text from that link now for each link we can display a nav link which is going to be a self-closing component it's going to have the two property which is going to be two url and it's also going to have the active class name which is going to be set to text dash blue dash 700 also border dash bottom or b 2. and on dark mode it's going to have the text dash blue dash 300 now we can scroll a bit to the right and collapse this then next to that we're also going to have the border dash blue dash 700 and finally on devices of all sizes and all different modes we're gonna have the padding bottom two there we go and i didn't say that correctly this is not going to be a self-closing tag rather we are going to close it and then inside of there we can render our text there we go that's great now let's go ahead and save it we are already importing the links inside of our search so we should be able to see all of them and there we go as you can see we have news it immediately redirects the news we can also redirect to images when i clicked on videos something broke and it says that the error is in results jsx64 so let's go back to results that's going to be line 64 right here even though it's saying that this is news so this might not be the case but i do see that we have one error this anchor tag here was supposed to be closed right here and then this one is supposed to be closed right there there we go so let's now space everything correctly we have a div inside of that div we have an anchor tag with a p tag below that anchor tag we have another div with another anchor tag great let's save it and one more time reload as you can see now the videos are loading and let's try to switch one final time to all to see if we can see all results there we go that works as well i'm going to close the console to see how does it look like and it seems like all of these items are too close together so let's go ahead and fix that we can go back to our links and we can add a margin right here by saying class name is equal to and we can simply say margin and let's try to do two let's save that as you can see this separated all of them and now it looks much better as you can see now there is some space between this border and the icons from the border of the navigation bar so let's go ahead and remove that margin on the bottom by simply saying margin bottom dash zero as you can see now this blue line is touching the border bottom of our navigation bar and all of the links are still properly spaced out now the last part is to implement the search so let's go ahead and start with that right away we can go back to our search and inside of here we're going to import a few things from react these things are going to be use effect as well as the use state we also want to import that special utility hook we installed which is going to be called use d-bounds and that's going to be imported from react use dash d-bounce once you start working on more complicated projects you're going to hear that word a lot d-bounce so what does this word d-bounce actually means well when you work on more complicated projects and you have an input field like this and whenever you want some changes to happen once the user types something in for example if he types let's say we're searching for movies he starts typing superman and as the user is typing each individual letter a new request is going to be made so in here request then again for you we're going to do a request and then for sup another request this means that we're going to spam the api server and our application is going to become really really slow so what you want to do is you want to debounce that input that means that we're not going to make a request once every letter changes we're going to make it only after a certain period of time for example 300 milliseconds or 500 milliseconds in that time a user if he's fast enough with the keyboard can type the entire word out and then after that we can fetch that with only one specific request so that's what we're going to use the debunks for now we also want to import our context so we can say import use result context and that's going to be coming from dot slash context slash result context provider now in here we want to define some use states more specifically we want to say the text const text and also set text property which is equal to use state and then in here we can provide a default value like elon musk then we also want to get something from the context and we can do that by saying const set search term and that is going to be equal to use result context great finally we can get the debounced value by saying const d debounced value and that is equal to use the bounce and then in here we can specify which value that we want to debounce in our case that's going to be text and we want to debounce it every 300 milliseconds finally we can set the use effect we want something to happen when so let's create our use effect and as a dependency array we're going to say debounced value that means that this function is going to be executed every time that the debounce value changes and the value changes only every 300 milliseconds so what we can do is we can say if we have a debounced value in that case we want to set the search term to be equal to the debounced value great now we are ready to start implementing the actual jsx for the input we can do that by adding a class name to this div equal to relative also on small devices margin left is going to be 48 and on medium devices margin left is going to be equal to 72 and on small devices we're also going to have margin top which is going to be equal to 10 and usually margin top is going to be set to 3. these are some values that i found that work the best now inside of that we're going to have our actual input which is going to be a self-closing tag and every input needs to have a value in our case that value is going to be text also we can set the type of the input to be text we can give it a class name and again in here we're going to work with some different device sizes on small devices the width is going to be 96. usually the width is going to be set to 80. our height is going to be set to 10 on dark devices the bg is going to be gray 200 usually we're gonna have a border it's going to be rounded dash full we're also going to have a shadow dash small we're going to remove the outline by saying outline dash none we're going to give it padding of 6 text is going to be black and hover is going to be set to shadow dash lg so we're going to increase that shadow once we actually hover over it in here we used a variety of different utility classes so with this line you can really see what is the full power of our tailwind great now we added the class name and we just have to add the placeholder and the unchange our placeholder can simply say something like search goggle or type url and below that we're gonna have the on change where we're gonna have a callback function in which we get the event and once something happens we simply want to set the text to be equal to e dot target dot value great and we also want to show the button to clear the text so we can say if no text and which means only then show the following code we're going to show the button that button is going to be of a type equal to button and it's going to have the class name equal to absolute top dash 1.5 write dash 4 text is going to be a bit bigger so that's 2xl and also we're going to have text gray 500. finally we're going to give it an onclick property and on click we simply want to clear the text so we can say set text is equal to an empty string and the button can simply display an x sign there we go this is going to be it this is our search component so let's go ahead and save it and see how does it work now is the time that i can make this chrome look bigger and there we go we have goggle we have the entire search bar right there and we also have our navigation bar right here now that i'm looking at it this doesn't seem to be aligned we need the search to be aligned with goggle icon so let's go ahead and see what that is about right here we added the margin top 10 but it was supposed to be margin top minus so minus margin top 10. there we go now you know that you can use minuses as well let's go ahead and see if this fixed the issue and there we go now this is straight on the top and as you can see it looks great we can switch between all also news as you can see right there they have a bit of a different view and images as well and finally let's try switching to videos we get another error saying can it read properties of undefined reading zero that's most likely happening here from our additional links because we forgot to remove this kansa log so if we go back to our code we're going to remove this kansa log and we're also going to add one more fail safe to only render this react player if there is a video link so what we can do is at the start we can add a curly brace and say if video question mark dot additional links question mark.0 question mark.href only then render this react video player else don't render it we need to close this curly brace and that's going to be it let's save it and take a look and as you can see our videos started loading immediately it seems like there are still two videos that didn't load correctly so let's reload and see if that's going to fix the issue there we go that if check that we added indeed fixed the issue great we can also check the dark mode and with that it looks like we're completely done with the entire goggle application this is a real custom-made google search clone you learn how to use react context also learn how you can utilize rapid api to pull from hundreds of thousands of apis and finally you learn how to use tailwind css tailwind made all of the styling so easy and with that we are ready to start with the finishing steps of this video you know that i always like to take you from the entire beginning of the creation of the empty folder all the way to deployment so if you appreciate that and if you appreciate me going through all the errors together with you definitely make sure to like and comment down below with that said let's do one final security fix we talked about inside of the result context provider we need to save this into environment variables so you can copy this key go right here in the root of your folder and create a new file env inside of there we can do something like react underscore app and then underscore api underscore key and that's going to be equal to to the key you copied then you can go back to result context provider and you can simply switch this to process dot env dot and then the name you used right inside of your env in our case that's going to be react underscore app underscore api key so let's go ahead and paste it here and that's going to work if you want to see the changes live in the development server you have to reload your app by simply closing it and then starting it one more time we are not going to do that because we are immediately going to deploy our project to the internet so to do that you can simply run npm run build now react is going to prepare an optimized production build it's going to take a minute and then we'll be able to use this build folder to upload it to netlify there we go our build finalized and we are ready to right click the build folder and simply click reveal in file explorer once you do that you can go to netlify.com and log in or create an account inside of there you can go to sites and then right inside of here you can open that build folder and simply drag and drop it right here the deployment process is going to take just a second so if i still continue speaking you should see that this is going to turn green there we go before we check it out we can go to the domain settings and simply edit the site name to something like goggle search jsm and let's save it as you can see your website is now live under this link and as soon as we open it we have that nice loading and immediately we can search for different news also that the bounce is going to work so if we now try searching for javascript mastery we're not going to make continuous requests only one every 300 milliseconds and there we go results for javascript mastery we can also search for images news videos and everything else with that said we've came to the end of this video i just wanted to quickly thank rapid api not only for sponsoring this video but also for making an incredible api hub with hundreds of thousands of different apis that we can use to make different applications again thank you so much for watching and if you like this video i would strongly encourage you to also subscribe to my new mailing newsletter that way you'll be up to date with the process of building the new javascript mastery pro platform and you'll be able to choose the future projects that i put on youtube and on the platform itself so definitely make sure to subscribe thank you so much for watching and i'll see you in the next one [Music] you

Channel: JavaScript Mastery

Views: 32,248

Keywords: javascript, javascript mastery, js mastery, master javascript, tailwind css, google clone, google clone react js, google clone project, google clone website, google search clone, tailwind css tutorial, tailwind css react, tailwind css react setup, rapid api, rapidapi react, tailwind react, react api project, react js project, react js course, react js, react crash course, javascript tutorial

Id: NDbruK1fzG8

Length: 96min 45sec (5805 seconds)

Published: Tue Oct 19 2021

Reddit Comments

[u/HolidayInternet]

What are your thoughts?

[u/LOARSAW]

Yeah and I am a Billionaire.