🔴 Let’s build a WEB SCRAPER with React! (Next.js 13.2, Firebase, Webhooks, TypeScript, Bright Data)

foreign I am excited this is gonna be one fun different kind of project that we've ever done on this channel so let me know what you're watching from right now it's good to be back we're over 200 000 subscribers in the papa Farm that's the energy start this video on we already got hundreds watching all over the world this is what I'm talking about it's a papa Farm energy welcome to the Amazon web scraper tutorial today you're going to learn all about how to scrape data the correct way off of websites that are unscrapable like Amazon I'm gonna break it down I'm gonna make it easy we're gonna be powering the entire build with bright data and I'm gonna go ahead and give you a demo right now in a second we've got Cape Verde in the house we've got the UK in the house we've got us in the house let me know where you're watching from right now and I want to go ahead and Shout you guys out before we get started welcome to today's build proper fam Hopper Farm check it out a web scraper scraping the unscrapable oh coming up with some tag lines these days we got Iran in the house Tunisia Latvia Philippines Indonesia India North Korea Bulgaria Germany Nigeria Jacksonville Florida Kenya Tokyo Japan Nepal I can't even make it up because it's so fast okay Finland this is what I'm talking about Italy in the house that is what I'm talking about Morocco California what this is the mud this is actually crazy but so many people around the world watching what's up guys welcome to today's stream this is what we're going to be building right so it's literally a real functional web scraper what I mean by web scraper is it's literally imagine like a a bunch of different proxies a bunch of different computers going ahead going over to Amazon scraping this information pulling it into our website and it's doing all of this and it's all powered by web hooks firestore bright data as a platform all of this is going to be taught to you today yeah I was testing out a bunch of different things like Hello World pulls up these results who are the four and we also pull a bunch of other info such as the previous price delivery dates other statistics just like that I'm going to teach you how to do all of this in today's video so quick little breakdown of what we're learning today we are going to be covering next.js 13.2 which just got released Lee Robinson dropped an amazing video over on the cell so I went ahead and practiced a bunch of this we're going to show you a bunch of that stuff today I'm not going too far into the next 30 next 13.2 but we're going to do a lot of next year 13 stuff so it's going to be a hell of a lot of fun and we're going to go ahead and cover how to go ahead and build out your first ever web hook which is pretty damn cool if you've never seen a Web book on this channel because I have done them in a couple of builds only the ogs will remember that I'm going to show you how to do all of that and of course we're going to keep the Staples like typescript like Tailwind all of that good stuff's your knowledge just keeps on going up and up and up while you're watching these videos okay so today's video is going to be powered by the guys over at bright data and let me give you a quick demo before we get started we can actually go ahead and delete some specific searches but if I was to go ahead and actually type in a search term for example MacBook Pro what we're going to see is it starts to scrape off the MacBook Pro this is going to initialize a Scraper on a bright data's platform and then this will go ahead and pop up on the left hand side in a real time fashion this is going to be really powerful it's going to be something which is going to be I'm going to explain and break down the entire functionality of this in just a short second but I want to show you what it's actually doing behind the scenes so it's actually setting up a new web scraper from the platform known as bright data and then bright data is actually going to go ahead collect all the results come back to the page just like this you can see right now so here it's actually scraping the results from Amazon so what it's actually doing is imagine it's going over here typing in MacBook Pro and then it's going to go ahead and start pulling all of this information in I'm obviously in Dubai that's why you can see Dubai pricing but this will go ahead and pull in America's pricing because that's what we did to go ahead and program the scraper to do and this is all powered by bright data so bright data let me introduce them right and my absolutely incredible platform now the problem with sites like Amazon is they're quite clever they don't want us to scrape their data and they actually have a lot of measures in place which stop us from scraping with traditional python or normal JavaScript approaches so what companies like brighter data do is they have incredibly vast proxy networks and essentially what this means is you have tons and tons of different IPS across the world so think of loads of different computers on this massive Network and then they go ahead and go and scrape the pages for you based on the code that we provide to Bright data so essentially we're kind of getting a Best of Both Worlds we're providing a sense of scraping code but then it's actually using real computers and real devices which Amazon can't detect and then it goes ahead and pulls the data and we go ahead and store it in our database but I'm not doing it just a normal rest API route I'm actually going ahead and using web hooks to populate a Firebase database then go ahead and populate my clients app so a whole load of stuff to go ahead and learn in today's video right so this is the scraper that you're going to go ahead and learn how to build the code for this is in the third link in the description for the scraper template I'm going to show you how to get everything set up do not worry and you can go ahead and get signed up with bright data with 15 free credit to follow along with this tutorial today whether using the first link in the description okay I want to mention as well they have an incredibly powerful web scrapers they also have loads of massive data sets so you can go ahead and use such as all of the you know Tick Tock data Walmart's product data Amazon product that's super valuable trust me when I say that it's actually a hugely valuable thing to be able to access and get access and and do whatever you want to and essentially what you're doing here is you're turning websites into structured data that you can then process and do whatever the hell you want with okay they are gdpr and CCPA compliance there's loads of stuff that if you ever worried about that kind of stuff don't stress that's why they have 15 000 customers and a 99.9 uptime guarantee but without further Ado let's go ahead and build some of this cool stuff in right I see loads of ogs in the house code with Guillaume Manji we've got Fabian Van Dyke this is what I'm talking about and I'm always throwing myself in the deep end I just want you to know that I'm trying to learn some incredibly difficult stuff so yeah make sure you go ahead and subscribe if you haven't already and smash the thumb like button if you enjoy the content and you want me to keep on making more stuff like this right so to mention as well this is going to be powered up by Firebase you can see over here we have all of the different records inside of our database and this is being populated in real time right so all of this is going to go ahead and get populated and then it will go ahead and return to our application so tons and tons of stuff now if you do find any of this content extremely confusing and you just don't know where to begin then make sure you check out our course over original full stack hero right paparia.com course the links are all in the description if you get confused go ahead check it out if you've got zero experience and this is kind of going like way over your head you can feel free to go check out our course it's honestly I put my heart and soul into that thing so it will I promise you it will take you from your beginner levels all the way up to when you're absolutely just confident as hell and then of course if you can't or you don't want to do that feel free just enjoy these videos that's what we're here for without further Ado let's go ahead and let's build out our first application our web Amazon web script but I'm just going to show you right now you can go ahead and actually see like loads of different results I'm going to go ahead and get thrown in we also get the react hot toasters all that good stuff is going to go ahead and work for us just like we want it to okay so let's go ahead and dive into the beginning of this build and let's get this thing going so 250 people already what that's crazy guys there's already 200 people all I ask is you just destroy that Thumbs Up Button before we get inside in this build so if you haven't already just drop a like and it helps this video push out to as many people as possible because you guys loved the chat GPT but I dropped which was incredible right so let's get into today's build let's just get started with this so head over to tailwindcss.com and we're going to go ahead and use the creating your project starter template so this one right here simply uses the create next app command with the template Tailwind CSS and then you pass in a name and this will just set up an xjs app in with an extra 13.2 let me say and it's going to go ahead and include Tailwind CSS to begin with so I'm going to open up my terminal I like to work always in a clean directory fashion so I'm going to throw it inside of my documents my builds folder you don't have to do that I like to keep things neat and then I'm going to go ahead and paste in that command but I want to change the name of this I want it to be called bright data and I'm going to go ahead and call it Amazon scraper I'm going to say YouTube as well okay go ahead and that's going to kick start my template building process okay so this is going to go ahead and get everything set up let me go ahead and read the comments while is happening we've got loads of people from Mumbai in the house some people are enjoying the sanity content that's awesome I see you the recoster goes let's go keep it up sonny uh code of the game says of course I'm subscribed that's the energy I want right this is incredible we've got Nigeria in your house what is up adiola that's awesome to see everyone and guys this is just crazy the fam is getting bigger and bigger and bigger and I can't stress and honestly we just get we just keep crying into families absolutely incredible right let's go ahead and jump into this photo so CD bright data uh you can see I've got loads of builds here Amazon scraper YouTube is the one I'm looking for and then I'm going to go ahead and type in code Dot okay and this will go ahead and open up a vs code in the correct folder directory right and then I'm going to go ahead and remember this is going to be recorded this is going to be put up afterwards so you can feel free to follow along afterwards uh and if you feel like this is a little bit too fast okay so in this case this actually gives us a Nexus 12 structure right although you straight away have next year's 13 by setting this up and you can check by hovering over next and that the point that this video was made the latest version of next I believe was 13.2.3 okay so just like you know um let's go ahead and sort this out right so now we're going to go over to the pages folder and I'm going to show you that typically this is where you start off when you follow things in the next js12 approach okay we're not going to do this we're going to do it in a way where by we are going to use the Nexus 13 app directory which is what I want all of you to start getting used to and understanding okay so in this case what we're going to do is we are going to go ahead and do command J and we're going to spin up our app so let's go ahead and get this thing set up I'm going to close my previous application so it doesn't block the host let's go ahead and do yarn run Dev and I'm doing yarn because I simply have a yarn a lock file right so one second so now what I'm gonna do is I'm gonna go ahead and open up a preview window so we can see this so I'm going to do localhost 3000 pop this over to a side and then I'm going to go ahead and you should see this so this is obviously loading from the next gs12 directory right now so the pages API or Pages photo sorry and uh thank you so much Harry says you are the one the best developers on the holy YouTube I appreciate you dude and in fact I'm going to share with you guys some new songs from our Soundtrack This is actually it's just so nice to code with this stuff I think it was was it this one now these are the other ones or is it going okay I mean I think it's this one oh yeah I love this stuff all right you can get access to the entire playlist by the way all you gotta do is head over to the description there's a link down there somewhere where it says I get access to the playlist and you just pop your email and we'll send it to you all right so let's go ahead and get started so also if you haven't already seen okay we'll touch on that in a second so how do we go ahead and convert this to a Nexus 13s uh app so let's go ahead and do that first so what we want to do is we want to go into the packaging level create a folder called app okay that's the first step then we're going to go ahead and create a page.tsx file this is the new convention inside of next year's 13 for creating our home roof okay I'm going to type in rfce which are lovely Snippets I'm going to go ahead and clean this up a little bit and I'm going to Simply rename this to your home page okay now with that done we're going to go ahead and show you how the how I just made that happen so simply make sure that you've got the es7 Snippets installed to go ahead and do that rfce trick that I just went ahead and done okay so if you haven't if you're wondering how did you do that that's how I did it okay now what I want you to do at this point is go into your next config so this is where we need to go into our next config and we need to go ahead and say experimental and here we're going to enable the app directory okay now once this is done and you hit refresh you're gonna see a oh no we changed the next config so we need to go ahead and restart our server so let's go ahead and restart server and what we should see here is we get an error okay we should get an error at this point if I go ahead and refresh you can see oh it goes ahead and screams us it says conflicting pages are found like and the reason why this is happening is you have two pages fighting for the home screen at this point right you have the page.tsx which is fighting for the home page and then you have the index.tsx you can't have one both of these right you can only have one because you can only have one forward slash localhost terminal right so as in localhost root so at this point what we've got to do is pretty simple what we've got to do is go ahead and delete this one okay get rid of it now we go ahead and say H1 hello world so hello world hit save um clean things up a little bit hit refresh and just like that we should see in a second let me go ahead and restart the terminal so let's go ahead and restart our server you're on one Dev and then I'm gonna go ahead and hit a refresh and what we should see is it creates a layout.tsx file for us so this is what's really nice about Nexus 13 is that if we didn't have a layout file for us it actually creates it for us on the Fly and as you can see here we've got the new Nexus 13.2 metadata which is the SEO enhancement that they recently introduced so in this case you can go ahead and enhance the metadata of the page which massively boosts your SEO performance so this means the things that you're basically going to go ahead and see or what Google is essentially going to see when it's scraping the pages right so in this case we could go ahead and call this one the Amazon web scraper and if we go ahead and inspect this I'm going to show you just a quick little brief kind of uh Showcase of what that actually just did so if we look inside the new the head you can now see the tie tool changes based on the new layout the new metadata attributes at the top right all you have to do is export const metadata and then you can go ahead and pass things in then you can really pass in as much as you want and if you have Dynamic metadata you can even do generate metadata which is a special function which I'm not going to go into today I Do cover that in zero to full stack hero but that is actually something which means that you can actually go ahead and have custom SEO metadata Dynamic information loaded on the head component as you need it which is really powerful okay so this is where all of our stuff gets loaded so the layout is basically rendering out the children is essentially the page so this is our starting point now you're probably wondering that does not look like Tailwind CSS and the reason you're probably you're you're right okay you're downright for that so at this point if we go over to the layout we need to go ahead and import something so if you head over to underscore app.tsx you'll see that previously this was the entry point we can actually get rid of this so instead I'm going to go ahead and import the Styles and the globals.css is it responsible for pulling in all of our Tailwind so if I go ahead and hit save now you'll see it strips off the old styling and we have our Tailwind blank canvas okay so let's go ahead and get rid of the and underscore app.tsx we don't need that anymore and even the app um even the API now is uh supported inside of the app directory with the new route.ts file okay so in the code I don't think I changed it but we can change it screw it I might just do it live okay so I'm going to show you how we can do that as well so page.tsx hello world so let's go ahead and see what we have to build so what I'm actually going to do is I'm going to run my old app so I can show you something on the screen as we go ahead and have this build take place so I'm loaded it up at localhost 3001 so let's go ahead and pop that open and as you can see we have our own app right and I've left this in the pending State just to demonstrate the loading um I've actually done this purposely so you can actually see the loading stay and all this kind of stuff so on the back end I canceled some things that way it's just going to be stuck in the pending state so you guys can see all the different states that we have to go ahead and build right so in this case this is what we want to eventually get to and it is also mobile responsive so you can see how it's really nicely responsive on a phone and all that good stuff so I'm going to show you how we can build all of this in today's video okay so first thing I want to show you is essentially let's go ahead and have a look at our page.tsx I'm just getting all my screens cleaned up we're going to go ahead and introduce the first page so if I go ahead and remove my localhost and we just go to my home page I want to see this page right I want to see this right here so this is going to consist of a sidebar and it's going to consist of the page itself so as you can see here I'm just going to go ahead and make this a bit cleaner we have the actual page.tsx element right here and then we have the sidebar over here so essentially we have two different elements okay thank you Nicholas he goes thank you something keep more of that good stuff coming I appreciate you dude this is bothering me so much it's just a tech center that I needed to add I will fix that it's it's really bothering me um but I'll show you how we do that also with I didn't get to mention we are actually going to be covering how to deploy your own cloud function so we are going to be covering Firebase Cloud functions today as well and I'm going to teach you how to use the ngrok tunneling technique to go ahead and actually demo or develop locally things like Cloud functions so that way you can put them in places where webhook is expected when you're developing locally and then when it's ready you can finally deploy incredible stuff you're going to learn all about it today okay so let's continue on strong so the first thing I want to do is basically build out this portion here right so this portion here just consists of Simply a icon welcome to Amazon web scraper and then a bunch of text okay so how do we do that well it's fairly straightforward we are going to be using hero icons today so I'm going to show you right now we've got to hear our icons.com this is actually backed by the guys over at Tailwind CSS so you simply head into the documentation and then we go down here and you guys can see npm install here icons I'm not going to be using npm install I'm going to be using uh handy uh yarn ad okay because I'm using yarn so in this case I'm going to say yarn add hero icons react this will bring in the hero icons react package into my application okay then what you do is you can see you've got a bunch of different examples over here so I recommend you take that then you simply change the icon for whichever one you need you also have a solid outline different variants and as you can see you can get those variants by simply searching over here so if I type in search you you can now see we get the outline solid or the mini variants okay so you can feel free to use them as much as you need to thank you faizanico's amazing build sunny I appreciate you dude thank you so much so this is how I go ahead and find the different search elements or the different icons okay so once we've done that I'm going to do a simple import at the top command J to hide my terminal let's pop in my document magnifying glass icon and then I'm going to go ahead and simply build this up so inside of how I'm going to get rid of hello world and I'm going to start populating what we need so I'm going to get rid of this I'm going to have another div inside here and I'm going to go ahead and actually pull in my document magnifying glass icon and I'm going to be using telman CSS so it's going to be a bunch of Tailwind styling inside of this build so I'm going to set the height and width of 64. and what we should see on the screen is that icon should pop up there you go so if you're getting to this point amazing stuff make sure you destroy that thumbs up button and what I love about Tailwind is you get this color palette as well and this is actually introduced with the extension so make sure you also have the extension hand in hand when you build this out so if I go over to my atone CSS you can see this one right here make sure you install that 2.6 million people agree so definitely go ahead and do that and then here we're going to say text Indigo and I'm going to do 600 I believe was a magic one and to be honest with you I think it's a bit too bright so what you can do is you can do forward slash and then add in 20 and this will give it a 20 opacity on top it's like a shorthand right so it actually helps you out a little bit more guys we're almost about to break 300 likes already that's insane make sure you go ahead and destroy that like button let's get this video climbing through the ranks I appreciate every single one of you I think we can hit over a thousand likes today keep on keep a comment uh this is the energy we're talking about right so after this is done we're gonna have an H1 tag and I'm going to say welcome to the Amazon web scraper okay go ahead and hit save and I'm going to do class name and here we've got the text to be 3x so I want it to be slightly larger I'm going to keep on hitting save so you can actually get a nice little preview yourself so text 3XL margin top of two the text should be black and I want to make it a font bold margin bottom of five oops font bold margin bottom of five there you go okay and the reason why I did text black here at all even though it's already black is because you can actually go ahead and make it like a 50 opacity if you didn't want to go ahead and run opacity 50. just nice little tricks like that right obviously this one was a bit pointless but if you want to know those tricks it's just handy to go ahead and know that they exist right the next thing I want to do is just pop a bit of text in here and I'm basically going ahead and plug in saying if you want to go ahead and learn how to code feel free to join us at zero full stack hero okay they're very simple to go ahead and join us just head over to paparia.com and you guys can feel free to join the community of awesome proper file members right let's go ahead and style this out a little bit more so now we've got a little bit more nice and styling I'm actually I'm actually going to go ahead and send to that text it looks a bit cleaner uh in fact what I might do is also Center this one as well because it looks a bit weird if it's not well centered okay and then after that we've got H3 and this is just simply going to be a link right so you can feel free to turn that into a link yourself I'm just popping in things like that okay I'm going to tech center as well and if you do want to shorthand this you can make the overall outside div tech center and it will make all the children uh tech center as well okay so at this point now what I want to do is head over to flex I'm going to make the entire div a flex div so you can see what happens is by default it's going to go in a row okay unless you're on react native I'm not going to get into that so we're going to make it a column instead I'm going to say the items should be in the center and we can justify those items in the center as well okay so that's more on the vertical axis and then we're going to give the outside a flex container as well we're going to say that's a flex column we're going to centralize those as well so item Center and justify everything in the center as well as justify and Center to be honest with you I don't actually think we need this one I think I had this before so I'm going to go ahead and clean up our code as well get rid of that make life a bit easier there you go that's what we wanted right sometimes I forget to clean up stuff so there you go that's an example so at this point now we've got the page looking pretty decent and what I like about this is now you can split up your logic by having the page and the layout TSX file handling different areas right so your page you want it to even kind of keep it as simple as possible the goal that we want to do is essentially have the page of TSX which is loaded into children or any other page gets loaded into children here and then we can actually have other things be part of the layout so what do I mean by this well what we can do is if we go ahead and pop the body out and we're simply going to make a main tag I'm going to pop this in and say the children is the main tag okay but what what if I want to have a sidebar on all of my pages so in this case I'm going to create a sidebar property so I'm going to add a comment here just for that and then for the actual Pages themselves next to the main page content on top of it I always want to have a header okay so you can see I'm starting to Mark things up just like so so what I want to do is prepare my photo structure so I'm going to go to packages and create a folder and I'm going to call it components okay and let me know if the music's good right now BRD says hello from France what's up most views from Zimbabwe that's awesome stuff uh welcome to the stream guys we just passed over 300 likes that's what I'm talking about let's get to 500 proper fam already at 300 the videos barely started that's mad right we can get to 500 very shortly let's do it right so we've got the layout done so inside of the components folder now I want you to create a sidebar dot TSX so sidebar dot TSX and I just want to work it's worth mentioning that this code will be available in the papa GitHub repo after okay so make sure if you are you know you can follow along for absolutely free but if you do want to go ahead and get access to the code you know in case you're debugging or whatnot definitely check out the public air replay there's over like 40 builds in there now it's incredible about how much you've managed to put in there right now it's crazy honestly I remember when it was one build it's just time flies um so at this point we are now building the sidebar okay so you can see right here we've got the sidebar itself so I'm going to go ahead and build that out right now and how do we do that so I'm gonna go ahead and make this a little bit bigger like so and then I want to have this a div inside of here and then we're gonna have an unordered list now I know the unordered list my mask's going a bit crazy it's going to represent this all of the different elements on the screen and then the top portion is going to represent you know the sort of logo section and I'm going to fix this annoying little text that we've got just floating there in the left right so over here I'm going to go ahead and pop in my dog the same magnifying glass icon that we had previously so I'm going to go ahead and push that in over there do my import trick like so and the way I did that by the way was I went to the end of the text control spacebar enter and like that it would go ahead and pop in okay and then we've got uh you can't actually see anything right now because we're not actually pulling in so let's go to layout let's actually pull in the sidebar just like so get rid of this over there and now you can see the sidebar is popping in obviously by default it's in line right so everything is going to be oh no sorry by default everything's block which means it just kind of Stack Up full width but eventually we're going to change it we're going to add in some flexbox we're going to add in some grid all that kind of stuff right I'm gonna put turn on the music a bit more and uh we're gonna have a quick little water break but this is going to be where we get into a little bit of a flow State and we just go in and we just build this entire app see some OG's in the house right now in the Stream it's so cool to see everyone right let's go ahead and carry on so sidebar.tsx we've got the we're gonna add in after this we're gonna add in the H1 and here I'm going to say web scraper okay and then we're going to have an H2 which is scraping the unscrapable I just thought that's kind of a cool cool little uh catch the catchphrase right it's grouping the unscrapable right and then we've got for the this one we're going to go ahead and say it's going to be hidden on small screens so binder for everything's mobile first when you're doing Tailwind okay so it's hidden on the small screens but on a medium screen I want it to become an inline element okay and then I'm going to give it a text 3XL and I went to your margin top of two right now you can see on a small screen it's hidden but the minute I get to a medium screen or above it will pop inline and then the text kind of comes into play okay and the same for H2 we're going to say class name hidden medium screen inline and then we're going to say text should be extra small and I want to be italic give you a little bit of a cinematic a nice film let's actually pop that over there for now so we can see it okay and then for the surrounding div this is going to be a flex column okay so that pops it over the top then we're going to say items should be centrally aligned so items in the center and then we're going to say justify them on the center as well okay and now after that I'm going to give a little bit of spacing from this bottom component by saying margin bottom of 10. and that just gives a little bit of breathing room but obviously we're not gonna actually have these stacked up on top of each other this is going to be more so for the list underneath afterwards what we're essentially going to have here is a bunch of sidebar rows so these are going to represent these are going to be represented by sidebar row components so imagine that's going to pop in at the bottom over there prepare says hey you've changed you're great you changed my life that's dude that's incredible man thank you so much for sharing messages like that it is it's unreal when I hear stuff like that so I appreciate you thank you for tuning in to these streams we're climbing we're nearly at 500 likes I'm telling you I see the lights are flying up guys that's what I'm talking about um so let's continue on so for this point after the div here this is where we're going to change it all to what we want it to be okay so pay attention on small screens I want a padding of two okay and then as it gets bigger I want to do a padding of 10. so after a medium screen it's going to get a padding of 10. then I'm going to say padding y of six so I'm going to override either all of the so the Y is going to be six right you could just do panning X in there but I'm I'm lazy sometimes but that's fine and then we're going to add an overflow in so if you ever have to scroll on here it's going to have a scrollable element right so I wanted to have a scroll bar when we need it so what I do is I type in overflow why Auto auto means that it doesn't show when it doesn't need to but it shows when it is basically overflowing okay if you had overflow y scroll it's always going to be showing which I don't want all right then we're going to say a border on the bottom and this gives us a nice little border on the bottom there you see that and then we're going to say border should be indigo 500 and I'm going to give it a 50 opacity okay so a nice little subtle water okay and then now that that's kind of in place and looks kind of semi-decent all we can do is firstly I want to show you so you see that's what we kind of wanted okay so now what we need to do is we need to reconfigure our layout okay so this is what's actually going to tie everything really together so it kind of doesn't look so silly and it looks kind of nice together right so the first thing I want to do is in the body I'm going to go ahead and say that the class name is a flex now Flex is going to naturally put things in a row okay and this is where we get that same problem so what I'm going to do is go back to my sidebar and where I had a web scraper and even where I had this text I actually want a central or Center all of this but I don't want the sidebar row to get affected so what I'm actually going to do is only apply tech center to these elements here so text Center and what I did there was I pressed on this and I did option click and I have multi-cursors okay it's a really really nice little trick that you can do and there you go nice little Center scented component okay so inside of the layouts we're going back over here we're going to say on the medium screen it should go into a flex well actually it's already neurons flexor I forgot to change that so we don't need that anymore I'm going to say the background color is going to be represented by a custom slight gray that I've decided so I'm going to go ahead and give this a nice little gray I actually want to give a very subtle color behind this so if we go ahead and do that you can see that actually did change colors now and it's now like a very slight tinge of gray right large freezing what is up guys he says what's up guys that's good good to see you in the house dude so we've got the custom background color and then I say a height of a screen okay and this pushes it down so the reason why I want to do that little border is because I like to emphasize when you're learning that's actually going to push it to the bottom okay so in this case if you want to do higher screen but it goes all the way to the bottom there's a reason why we want to do that because that allows us to have this sort of scrolling functionality that I expect and I like right um Siri is in the house what's up because advances much love and much respect from Syria for the best content for modern technology on YouTube popular react I appreciate you man thank you so much right so at this point we're now going to get all the main so where we have the header and the children which we haven't built the header yet but I'm going to go inside anyway I'm gonna say the class name and over here he's just this is no padding right we obviously want to have a bit of padding so I'm gonna give it a padding of 10 and immediately you can see things start spacing up I'm gonna say that the max width of the main area should be 7xl so that's going to be a restricted so if I was to go ahead and zoom out it's going to eventually have a Max width constraint right so that way it doesn't ever get too wide so if you're on like a 6K display or something it's not going to span a huge amount right so width full and then we do MX Auto now if you notice when I did it before it wasn't centering right so what's actually happening now is this will use up the space it needs to and then over here what we're actually doing is I'm going to enjoy this out so imagine this was my sidebar then you've got your max width constraint being applied but your MX um your margin X of Auto is determining this space by itself right so without MX Auto it doesn't centralize itself so this will be kind of pushed over here without mxor but with mxor it basically makes sure that it stays in its Max width constraint so in this case this is the max width 7xl being applied so that constraint right there and if you obviously did 6x2 get smaller and so forth MX sort of makes it Center okay I'm trying to do a lot more drawing on the screen I find it always helps people out when especially when you're in the beginning of your journey okay so mxol is in place we're gonna do overflow y Auto and then I'm going to say the scroll bar also I'm actually going to start scroll bars afterwards it's cool so that's actually a good starting point right so you can see start to see where we're gonna go from here right So eventually we're going to get to a point where it looks something like this right and again just to let you know this is deliberate I did cancel this on the back end so that way you know you're not seeing you get to see all the transition States as we build out okay so once this is done now what we're going to do is I'm going to I just I just realized something oh yeah that's actually fine so here you can see that's not actually the outline that I wanted I kind of spotted that randomly so on the sidebar you can see it's the outline variant all I need to do is change it to a solid variant and I get this nice little solid color instead all right that looks a bit cleaner and also something which is pet peeving me I'm gonna give it a margin bottom of two there you go a little bit of breathing room I'm also going to fold it out a little bit front bold all right so for Mass power little things little things for me that bother me rather so much guys we're climbing almost at 500 likes come on man that number's climbing way faster than I thought okay so at this point now I'm gonna build the header now the headers we're pausing on the sidebar I'm gonna go over here to the central page portion and the header represents the search so the searches were gonna be actually really important because the search is gonna be responsible for when I type in a value it's going to go ahead and add in a new scraper or initialize a new scraper so let's go ahead and do that right now so heading over to our sidebar what I want you to do is go ahead and type in in your components create a new folder called header.tsx all right now in here I want you to do rfce to create a new functional component and then we can go ahead and get rid of that as we don't no longer need that in the top now for the header what we can do is we can actually change the first leader tags we want to be SEO performance we're going to tell yeah any Google or Bots or any of that stuff that that is a actually a header right then what I'm going to do is put a form in so this is a little trick so if we're ever having like a search field where we want to have the behavior whereby we type in hit enter and then it submits the form that's where we go ahead and use something like a form okay so um kowaski says hey man your tips and tutorial are really helpful to me to understand some concepts of reactor Redux and react especially Firebase connection with those thank you for all your work I appreciate you thank you so much for tuning in right so we've got the input field and I'm going to go ahead and put this over here we've got an input field and we have a button called search right and obviously I've left this in here we've got a button chord search okay and I'm actually going to show this right now by heading over to my layout.tsx and simply getting rid of my little annotation here I'm actually popping in the header itself that looks good and now we can see our search fold over there so my button right now is there I can type in my input field so let's close that go back to our header now what I'm actually going to do is I'm going to hide the button I'm actually going to say it's a hidden button and you're probably wondering why would you do that because I actually want the the kind of the UI to be very Sleek so I'm gonna have a placeholder which says search Dot and then I'm actually going to try and make this a little bit easier for you like to see there we go okay and then inside or underneath I'm actually going to have a magnifying glass icon all right so underneath the button I'm gonna have a magnifying glass icon and this will be in fact a solid magnifying glass so I'm going to go down one and as you can see we're going to create this custom sort of search field right so the way we get it to look the way that I I don't like the way it looks right now I'm just throwing that out there I want to look super clean so I'm going to go to my form and I'm going to Chuck in the class name I'm going to say Flex items should be centrally aligned and look keeper pay attention to this port over here item Center I'm going to say it needs a space X of two as you can see the little that moved away a little bit I'm going to say justify Center as well so it goes into the middle of the x-axis we're gonna round the corners off surrounded four I'm gonna give it a panning y of two a panning X of four background should be an indigo but a very subtle 100 and I need to give it a Max width of a medium right so that as you can see if you know everyone Wonder like where the heck is it actually building to hover over it it will tell you 28 Ram if you have got the extension installed and then MX Auto just to keep things 100 Central aligned and as you can see guys that's actually beautiful all right that looks really good except for this little ugly background portion right there but I'll show you how we fix that okay um we have ataku Moses I got my first job as a front-end developer at my college after taking your tutorials thanks a lot something keep up the good work that's what I'm talking about amazing amazing stuff dude job J screenshot that that's sick man thank you for sharing that with us that's the proper fam energy right here that's it we just we just it's all about results for our students right so we've got the form dialed in the the reason why that background is there is because we need to style out the input first thing I want to do you see how it's not taking up the full width we need to say Flex one this means that this input form which is inside of our flexbox container over here so you see the form is surrounding the input form what we essentially do is by making the input Flex one you're saying that input should be selfish take up all the room so you see it bam it takes up all the room then what we can do is say outline a none right now if before I save the file you see how it's nasty blue outline I hate that I don't like it it doesn't look good so I'm going to outline none now you can see I no longer get the outline okay after that we can go ahead and proceed with the background of transparent now you can see it Blends in with the previous background which looks a lot nicer than I I think yeah then we're going to change the text into an indigo of 400. and I'm gonna make the placeholder text slightly lighter shade of indigo 300. okay so now you can see very subtle design hints but as you can see now the placeholders there in a subtle Indigo and then I can go ahead and type in something like MacBook Pro and eventually if I hit enter you can see how it refreshes the page that's not ideally what we want right we don't want it to refresh the page we want to handle the submit function ourself so how do we go about doing that right well we go to the form and we simply add in the on submit function and here I'm going to create a function called handle search okay and this function I'm going to go ahead and populate it up the top so I'm going to say const handle search I always get the question what is that autocomplete that is actually called autocom autopilot so we create a narrow function and here typescript complains it says you've got an e you're basically saying it's at any type because you haven't defined the type now what you can do here is a little trick you can go ahead and add a little arrow call here and if you hover over this it gives you the type for the submit function inside of that element this is a really nice little hack that I teach all my students and then you can then do is import this by going down there and simply popping it in so control spacebar at the end of this then what you do is you get rid of that signature and Bam now I have the perfect type definition incredible trick right and now I can do things like e dot preventive e dot prevent default that prevents the page from refreshing so now ah here's the next issue so you can see as I've added in a event handler for example something like on submit when we are using Nexus 13 so when I when I mean this is when we're using anything inside of the new app directory which actually includes the components directory as well right if we go ahead and build a component by default now when we're using xjs13 and including the app directory the components will be considered as server components this means that they're rendered on the server which means there is no window to actually Mount things like interactive or click handlers too so in this case an on submit function or any piece of state or anything like that is actually not going to work right so what we have to do is we have to take our header and we have to say you have to be a client component and client components are able to go ahead and they're the ones that we're basically saying you need to now load on this the actual browser so you're not going to get pre-loaded on the server which means yes you're not going to get that super fast page load just for that component by the way it's only going to be a third component yeah so the rest of the page without in the server fashion but just for that one component we're going to say you need to load on the browser and that allows us to have a window that we can then go ahead and attach stay we can attach you know click handlers doing that sort of thing so the way we do this is we go to the top and we simply say use a client now if we refresh the page you see we don't get an error anymore so the rest of the page was server ended and this was loaded on the browser so the client and that's so powerful guys that really is so powerful okay um because you're now getting this seamless integration between client and server components okay so now we can go ahead and do things like the on submit and I highly recommend that you don't just throw that around willy-nilly you make sure that you only add that in when needed okay so don't throw that in every single where place you go I promise you're gonna end up defeating the purpose of using that shares you want it to be efficient you want to be super neat okay so at this point now if I go ahead and type in something like MacBook Pro and I hit enter you shouldn't see the page refresh good okay so now what I need is a reference to this input so that way I can see what the user typed in so I'm going to go ahead and get something called a ref so I'm going to call it an input ref and we're going to use the user ref Hook from react okay and the way that I can do this now is I basically first you're going to initialize it with a value of no and the type of this reference is going to be known as an HTML input element right so I like to be type specific to make sure that we're you know we're not going to throw ourselves any errors so I go ahead and I grab this input ref and I attach it and think of this as something like a pointer right so think of it as a big pointer and it's just now pointing towards my input field so whenever I need the value from it I can go to that pointer and I can say give me your current value that's all that I need to do right so it's actually really simple when we break it down like that and what I'm going to do is I'm going to store that in the value so I'm going to say const input equals input ref current value current is the current thing that you're actually pointing at is the reason we're using optional chaining is because it could be undefined right in case you know anything happened it wasn't correctly mounted or anything like that then we're going to get the value then what I want to do is I'm going to go ahead and say if there was actually no input simply return like don't do anything at this point if there was no input okay if there was an input then what I wanted you to do is I want to go ahead and clear the field now bear in mind what I've done here is I've copied the value into another variable and then I want to for the UI purposes I want to actually go ahead and get rid of this value right so what I'm actually doing here is remember this is going to get stored in here so afterwards essentially what you can do is you can go and say if there is a value here right then we're going to go ahead and clear that value to empty but we've still got the value stored that was initially there that way when I hit enter it just disappears right otherwise what you can have is sometimes a user might think they haven't submitted something and that that's going to cause something that we didn't want because they might submit the same thing nice five times thinking it hasn't worked okay then what we're going to do is do a try catch block okay try catch now here eventually we're going to have a call to activate the scraper so we're going to say call our API to activate the scraper okay and then on the Cat spot we're going to say handle any errors okay So eventually we're going to implement that cool so that's done and then eventually even after that we're going to Simply go ahead and wait for a response right so we're going to say wait for the response to come back okay done so that's going to be that pause for a second okay so we're gonna go ahead and pause it there now what we essentially need to do is basically create our API endpoint so over here what I'm going to have is essentially an API endpoint like four slash API forward slash activate scraper okay something along the lines of this now how the hell do we go ahead and create something like that well we can do it a few ways um we can actually do it with the pages component so the traditional API or we can do the new approach what I'm going to show you is a mix of the two okay so firstly I'm going to show you the traditional room and then if we get time at the end I'm actually going to translate it to the new way of doing it because I truly believe that it's still worth knowing how to do things in xjs 12 way because a lot of the code bases that you touch will be next year S12 and then it's also really beneficial to know the new way of how to do things like the next js13 approach which is a lot cleaner in my opinion and it uses the new root dot TS files uh structure okay so let's go ahead and get that down in 400 likes past oh my God that's crazy let's keep going strong guys we're gonna pass 500 likes I know it we're gonna keep this video banging and booming it's gonna go past a thousand that's that's why I love you guys okay so now what we're gonna do is go to our Pages API and right now we've actually got an API endpoint available at four slash API forward slash hello so now you can see name John Doe and if I go into that for uh hello.ts file you can see we have this right here now the issue with this approach is you can't actually tell what type of the request was so typically what you would have found is you'd have had to say like if the rack method is not a get or if it's get if it's post this becomes a bit of a headache I'll be honest with you it becomes a bit annoying to do it right you kind of want to do it in a way that's going to be clean it's going to be you know concise that kind of thing so this is where next year's 13.2 came into play whereby right now we could we could actually send like a get post put delete anything to this route and it would just work I kind of want to show you a way that we can do it the new way with the root right so in this case we're going to have inside of our app photo I'm gonna have a forward slash so in this case I'm doing the new routing directory I'm going to say something like activate scraper and I'm going to show you right now how I would go ahead and recommend that you read the blog post for 13.2 for next year then apply that new logic and stuff like that and I'm actually doing this live so I'm actually showing you live the demo that I prepared has the old way but I think it's going to be super beneficial for you to learn a new way so I'm going to show you literally live on the stream right now uh yeah so if it goes wrong that's cool we can learn together activate scraper we're going go ahead and say root.ts this is a reserved file name for the new API structure okay so what I can do is I can type in xjs 13.2 and there's a beautiful blog post over here and it's got a really nice little snippet of code that I want to showcase to you we've got the new metadata we've got the dynamic metadata and we've also got the custom root handlers so this is the one that I was looking for and what you can actually do here is you can export a bunch of different things you can export a get you can export a post you can export a delete and these are all the standards for the current rest API that it exists right so in this case we're only caring about a post function so I'm going to go ahead and put a post in like so cool now with that in place what we're going to do is basically go ahead and implement or um our request okay so no different Tower typically would have done it here except we're going to go ahead and I just want to prove to your point that if we did go ahead and say something like get right here get and I went ahead and said let me just double check a example a response um so if we have here for example a response you can see return new response 200 and I just want to prove to you a point of how this works right so if I was to return a new response let's just ignore that for now it just says hello let's just say hello Papa fam so you know it's me hello Papa bam and you guys are really gonna like this I promise you right so if we now if we go over to our Local Host localhost 3004 slash activate scraper and because I'm doing a get request what we should see is hello Papa Farm hey look at that guys incredible right just from this new Sleek syntax so this is Nexus 13.2 Cutting Edge brand new stuff that's what we do here right we learn the best the newest stuff okay so that's how I recommend you now do your stuff your roots and they also seamlessly has an integration with the existing app directory so you have this nice seamless integration with your Edge run time and your node.js runtime and yeah everything just works like it is cool I like it right so at this point let's go ahead and build out our API endpoint okay so um we're gonna go ahead and pull so I imagine when I actually create this uh post request what I'm gonna do is I'm gonna go ahead and get the I'm gonna pass something like the search in the body right so here what I want to do is imagine when I've actually typed in a search term like here so I'm gonna type in like MacBook Pro okay I'm actually gonna send this off as a search as as part of the requested body okay so here what I'll do is I'll say something like this I'll say const search equals rec.body.search okay and in this case why is it freaking out let's have a look uh reg.body is possibly null okay so let's go ahead and say this for example your search uh so I think I need to actually give it a special type definition oh okay so this is where I haven't actually okay this is where it gets a little bit tricky because I haven't actually prepared this one and I haven't done this example before with the new structure so that's going to be a bit interesting does not exist on type request okay so rather than doing this live which I don't want to do right now um we could okay you're not screw it let's try it next yes 13.2 I'm actually doing this live and figuring out I haven't done the post function before with the new photos um the new API but I want to show you because I kind of want to get it done so request how can I get the type definition changed here that's the that's number one sorry um it's gonna be four I believe here no yeah post here we are request optional here we are context programs we can see gets passed in but for the post I do want to see if I can actually get the item next request blah blah I actually wanted the um gives you further control okay so we I think what we can do maybe is extend this so we could maybe Define a type so we could say something like uh request and body and I can actually pass in something like the search okay and I can say request and body something like that is that gonna work if I do a request for the search no that's not gonna work okay okay so I am debating if we're gonna do this this is uh this is tricky I'm doing this I'm trying to figure it out live as I don't know if I want to spend too long doing this should I do it or should I not um where's the typescript definition for this this is a proper live right now next request news body I work with Okay so someone just gave me it there so use next request so next request and then that's not the one that I want though I believe the next API request I believe is the one that I need next API request I don't know if that's gonna work though we can try it let's try that right so next API request next body search okay let's give that a go right so I'm going to go ahead and basically this is actually coming from the previous type definition so next API request next API response okay so let's go ahead and give that a try and hopefully it works okay no promises I'm hoping it works it's just as much as you guys Okay so we've got that in and then what I need to do is make a request somewhere else right so I need to go ahead and make this is when I will eventually make a call to Bright data to start the scraping functionality okay so what I now want to do is basically go ahead and set up my bright data so on the second link in the description no so the first link in the description sorry you'll find a link for bright data so I want you to go ahead and click it it says get started for free with 15 credit using bright data that will take you to the following page you'll get to this page and it will go ahead and prompt you now you can go ahead and sign up and if it's just you by yourself you can go ahead and just hit one to nine or you can sign up with Google signing up with Google's super quick and easy once you've done that okay then we can go ahead and someone says need the away yes I will add that in don't worry okay so once we've gone ahead and done that we can go ahead and head over to our dashboard so you'll find yourself at the sort of starting screen head over to the left side and click on datasets and web scraper IDE then you're going to click on my scrapers okay now what I've done is you need to go ahead and create the Amazon sort of scraper that I've got right here but I've actually gone ahead and helped you do this so we're going to go ahead and on developer web scraper and then what I want you to do is inside on the third link in the description I've actually included a GitHub link okay so here you've got a bunch of different things you've got Amazon product page blah blah in this case we're going to click on start from scratch you can actually go ahead and use any of these templates if you'd like I'm going to start from scratch to begin with okay then I want you to click on the third link in the description the third link in the description will take you to this and as you can see what I've done here is I've included a bunch of different steps and a bunch of different guidelines for you so that you can actually see how to get your end result looking so typically what it has is we're basically building the automation steps so this is how we go ahead and program the Scraper on how to go ahead and scrape and do what it needs to do and I also recommend you firstly head over to this at the top here the code settings and click on code okay so here you can see browser or code browser essentially means that you're literally gonna mimic a browser going onto the website but that's not really fast code it is when you essentially are doing it in a headless fashion so in a headless format you're going to go to the page scrape it and that kind of good stuff and then get the things off it right A lot of people are asking what is bright data bright data is an amazing scraper platform it also has a bunch of other things but essentially what we're using today is the scraping section of it and we're going to be using this to go ahead and use it's a massive network of ips and proxies to actually go ahead and scrape data off Amazon so that way you don't go ahead and actually get caught you can go ahead and do this legit way I guess right so in this case I've got the code for you so if we go to our GitHub repo go to Step One interaction code simply copy this code okay so copy this code and you can obviously customize it what we're essentially doing here is going to amazon.com and we're simply entering in a search term okay so at this point I'm just going to pop this into my left side I'm going to pop this into my right side and we can now see okay so where is my um where am I at where am I where am I okay here yeah so what I want you to do is for the interaction code you simply go to Step One interaction code take it for the passer code you simply copy this right here and you pop it in the passer code okay and then you can go ahead and name your first step so this one is going to essentially be navigating to the page and going ahead and getting your search term okay but in this case we're not too bothered about going past that then what I want you to do is you can actually check out the readme as well I've actually put in steps and instructions but we need an input parameter so head down to input click on ADD input parameter and type in search okay this is going to be a string and it's not going to be a predefined value it is going to be required however so we're going to click on Save and now we have a search okay then what I want you to do is go ahead and press on the um that's fine we can predefine the values up to you okay but that's fine for now then we're going to click on add another step the Second Step if we have step two interaction code so I want you to Simply copy this pop this inside of here and step two here so think of it in a way that is very simple right so you can actually review this code if you want but what it's essentially doing is Step One is it's going to the Amazon page so imagine step one is going to this page and Landing here step two is it clicks into each product and it extracts the information from that page okay so that's essentially what we're doing here but then we there are a few important factors here that we have to consider all right so firstly what I need you to do is on the second page we have to Define our inputs as well okay so each step has its own inputs the second page has URL search and ID okay so in this case what we're going to do is we're going to go to our second step so new stage here I'm going to go down to our inputs you can see we have fresh inputs here so I want to go ahead and make the first one a URL this is going to be a string it is required right then we're going to have a second input parameter and this is going to be a search and then we have a third which is going to be the ID cool now we've got a URL our search and our ID okay and this is essentially where we're going to go ahead and add in you know our values and so forth all right so now what we can do is we can go ahead and click on finish editing all right so once you've done that we can go ahead and finish editing and right now oh sorry my bad it's already running the pre-save go ahead and close that um ignore that for now and as you can see what I found was oh okay so I went ahead and saved it right so that's fine so you should get to this page okay so then I want you to go ahead and click on edit the code and I want you to just check something out before we carry on so you can go ahead and actually test your code you can click on uh press on the here to run it and as you can see it will go ahead and run uh this was an undefined sort of test as you could see right there so if we go ahead and click on New Stage let's go over here I want to see if I had it correct so search let's just type in something like um there's times you go to save to development because I haven't passed in the actual template stuff right now so that's probably my issue here as you can see though it is pulling in the correct values you see that because obviously I'm passing in undefined right so we can just say set up our scraper obviously when we run this thing we are going to pass in things like the search and all that good stuff okay so now new collector we're going to say Amazon web scraper and I've essentially gone ahead and built out our scraper now obviously that's great but you can feel free to go modify that code do whatever you want to do with it but I'm actually just skipping that bit because I want you to kind of not focus too much on the scraping aspect if you don't know how to scrape websites but you can feel free to inspect that code and look at it right and you can see update available is because we've gone ahead and updated that code so you can click update click on update your collector okay then you want to go ahead and click on integrate to your system and this is what we want to get used to we want to see this area so initiate my API so you can actually go ahead and use this right here with your API token pass in the search term and it will trigger your your scraper okay or we can initiate it manually right here so you can pass in the search yourself and you can actually go ahead and do it so let's try our manual search right now so if we type in something like a MacBook Pro and let's click on stop okay and as you can see what happens is it goes ahead and it starts your job and what this will essentially do is it will input it you see we're passed in one input it will go to the pages and it will try to scrape the relevant information and you can see here we have a collector ID for this job where it starts to begin the collection process so it found two pages and it's going to go ahead and scrape the records now the way we set this up is it's not going to go through you know millions of different records in Amazon I've actually limited it so it's actually going to only pull in for example in this case it pulled in 18 records so if we were to go here and download the results we can now go ahead and download our results if I go ahead and click in oops oh God that's going to open up xcode oh no okay so in this case that's my bad you can go ahead and click on download results um oh God damn it uh okay I'll show you how we did afterwards but essentially now what this is done is it's scraped in all the information right uh so if we do quick view can I see yeah there you go quick view so sample data look at that guys so now you get the title URL sponsored rating reviews price previous price and all this other good stuff and now let me tell you that's damn impressive right that's damn impressive and the reason why that's so impressive is what was happening behind the scenes there is bright data took our sort of scraping code but then it goes ahead and essentially puts it on all of its IPS and proxies and then those IPS and proxies which consider as IP is an IP address for a machine right so these machines go onto Amazon basically execute the commands that we went ahead and put on there so they're going to go onto Amazon and actually start look essentially acting as a user and scraping the information off of this right and then what it's going to do is it's going to return that information to us and we can use it however we want now the really really cool part about this is right now obviously we can get the results by downloading it manually but typically I mean that doesn't mean sense right how the hell am I supposed to do that on my website so here if I go to delivery preferences you can see that we now have a bunch of different delivery strategies so API download means that we can actually go ahead and download the data afterwards so we can actually go ahead and run the following command afterwards to download the data right but we can actually do something even better right we can use something called a web hook so when finished notify me by webhook okay now the first step is I do want my delivery strategy to be an API download and you can use webbook here as well but I'm trying to show you a mix of things so I'm going to do a delivery strategy as API download but I want to be notified when the web hook finishes now I'm going to do a quick illustration which actually explains the entire process so I'm actually going to go to one of my favorite websites I call it I think it's called yofla right and it's just a black screen so let's go ahead and do that right now so I'm on a black screen called yofla let's go over here I'm going to quickly illustrate what the hell is happening right so imagine we've got our client and tell me and just smash the Thumbs Up Button get me to 500 likes if this helps you out with these visual explanations right so we've got the client the client is my next GS app okay so this is where you've got all of your beautiful app and you do everything on it right then we've got our server over this side now the server in this case consider it as bright data okay so I'm going to draw a little server right here so ignore my amazing drawing skills but this is my server and this is a bright data okay so bright data is basically going to do the job of scraping now what I did a can scrape from any website I can scrape from Amazon it can scrape from Walmart I can scrape from eBay conscription for anything you define okay so what we're doing is we're sending a request to Bright data right so we're going to make a API call we haven't written this code yet but we're going to make an API call to Bright data then what's going to happen is a bright data is going to go ahead and scrape Amazon it's going to get that data back okay but typically what we would sometimes do is we would have to wait for the response to come back now when we wait for the response to come back we have to stay on the page the problem if we stay on the pages if I leave the page at any point if I go away you know and I kind of like there's so many things that can go wrong at that point and then I just won't get the results back right and then it's kind of broken the flow but what if I told you that was a way that we can actually go ahead and bypass this so you could send like 50 requests right there we'll go ahead and do the work that it needs to do but then it will go to something called a web hook right so I'm going to visualize it in this way so that way hopefully it will make a little bit more sense and yes this may not be the the exact way it happens but this is the way I like to teach students because it's just easy to understand right so think of a web hook as like a messenger so now what we're doing is when bright data finishes bright data will send the completion so imagine Brad data since a completed event to our web hook right to a specific Web book now this web hook we can attach a URL to it so we can say you know once that's done I want you to go to you know my website so mysite.com forward slash activate scraper or it could be you know forward slash completed right so completed um scrape all right scraper or something like that right whatever you want you can go ahead and deploy this right so now what's going to happen is when bright day is finished it sends completed with a bunch of information attached to it so it's going to have loads of different data attached to it right so imagine it scrapes it gets the data from Amazon the data gets passed along with a completed event so now it hits this URL and then we can do anything we want with that information right so at this point what I'm going to do is I'm going to take this just move that to the side and I'm going to push this into a fire Firebase database all right so I'm going to make this a little bit smaller I'm just going to pop it here for example pop it into a Firebase database right so imagine if I pop in the Firebase database so now what I'm doing is you have your completed scraper and then the web Hook is just going to go bam it's going to throw the data into Firebase so you see even if the client disappears the data always goes into Firebase because the web hook or this this URL here is going to be the one that we're basically going to deploy this as a cloud function so that's always live that's always going to be live right so once that's always live we don't have to care if the client was still there or not it's still going to go ahead and wait for the information to come back and then push it to Firebase and then here's here's the here's like the the creme de La Creme here's the here's the amazing part that I love so much right so once it's in Firebase what we can do is Firebase has a firestore real-time database connection so the client can subscribe in a sort of a subscriber fashion so we're going to create a real-time connection to this Firebase database so I'm going to do it in like an arrow like that okay I don't know if that makes sense why is that let me let me kind of make that a little bit neater right so imagine we've got this kind of real-time connection between our client and Firebase and now you see what happens right we can send it like 50 different requests to Bright data it doesn't matter right these are going to be post requests that we're going to send right so 50 different post requests go to right there right there starts scraping all these different websites doing everything that we need the completed data just fires off every time the Amazon finish every time finishes this job it hits the web hook that is over here that we're going to go ahead and Deploy on a cloud function right so we're going to have a separate app which is just going to be the cloud function so I'm going to teach you how to do that and then it's just going to populate our Firebase database every single time it finishes our client will then listen to it real time and Bam just like that your client is getting real-time information and you have a architecture here which is which isn't kind of like constrained to the client staying there the client can go ahead send 50 requests go office phone head off somewhere else come back and then all the data will be there when it's ready it's finished right so this is kind of a cool way of doing it right I hope this explanation helps you out if it did just destroy that like button and get us past 500 likes where we're literally so close and if you want more of these kind of illustrations let me know I'm happy to do them okay so without further Ado let's add in a URL and if you want to secure your web hook so that way not anybody can just kind of ping the hell out of it you can actually add in authorization headers and that could be a secret key for example that only you and the cloud function know and then you can kind of do you know you can check based on that so at this point we need to go ahead and develop our Cloud function so I want to develop this part of it right the the my site area of I want to build this button this is going to be a Firebase Cloud function so you can see clearly here Firebase is coming in clutch so Firebase Cloud function okay so this is going to be a Firebase Cloud function so I'm going to show you how to build a Firebase Cloud function deploy this so that way we have our you know our API endpoint and I'm even going to show you how we can engrock and tunnel this so that way we can kind of develop on it use it as a test of a like kind of environment and then move forward with it okay so let's do it right now so we're going to go to our firebase.google.com and we're going to create our Cloud function okay so remember this can be a little bit overwhelming especially if you're starting out don't worry right remember you can join zero to full stack hero if you want to learn all this stuff we just actually covered this inside of a the recent coaching call um but yeah I try my best to break it down as much as I can on the streams but I hope you appreciate and enjoy that okay so now what I'm going to do is I'm going to create a new bright data project and you can do this on the CLI if you want to as well but I'm going to show you this way right so we're going to say write data and I'm going to say YouTube build okay I'm actually a little space there we're going to get rid of that continue I'm going to disable Google analytics this will create my project and this is going to serve two purposes Firebase right here we're going to have the firestore real-time database this is going to hold all the information from the scraper results from Bright data and it's going to do an amazing job of going ahead scraping Amazon just like I showed you right now it's going to pull that information once the web hook fires off it's going to hit our Cloud function which we deploy using Google Firebase Cloud functions that will then populate our database using the Firebase admin SDK sounds like what the hell but it's gonna work I promise you all right so we're going to click on continue now first things first let's go over to build and we're going to head over to Cloud functions so functions is right here now in order to activate Cloud functions you have to go ahead and enable your plan on the blaze plan so you see it says upgrade your project spelling command But please understand there is a huge free tier here okay so there is a free tier so don't stress and oh my God I gotta pay now you don't have to pay you just have to add in like a billing account detail so that's all you have to do here which is pretty standard for a lot of these things okay so go ahead and click on our upgrade project and then I've already got a billing account so I'm going to click on OK and this will continue my account and you can actually set a budget amount so imagine you didn't want to spend more than a pound or in this case that you'll get an email at 50p 90p so I always get the question of you know oh my God it's gonna cost me Millions like chill out it won't right so I'm gonna say you know when it hits um 10 pounds budget amount okay obviously I'm not going to hit that but I just don't want it to crash on the stream for whatever reason so I'm going to click on purchase there we go and now that will have a limit so there you go pay as you go blazepam there you go and then we're gonna go to get started and as you can see you need to install the Firebase tools globally right so I've already done this I don't need to do that but you can you can run that command inside of your um you're going to run that command inside of your terminal next thing we have to initialize a Firebase project and deploy it now I'm going to show you a way to do this in a in a good way right so uh Patty I see that YouTube would be mad how udemy would be mad now because here's the world's best tutorial then Gwen goes I heard a rumor there closing business because Sunny took the entire Market I love that I appreciate you guys um so at this point what I'm going to do is I'm going to open up my terminal and I want to make this extremely clear we're going to create essentially two apps right so you can merge the two things so even in the proper GitHub repo there's going to be two apps there's going to be the front end which is the next JS app which is an extra 13.2 up which is going to be the whole UI all that good stuff and then we've got the back end which is essentially going to be the Firebase Cloud functions and I'm going to show you how to go ahead and set up there's two reasons why you might want to do this one when you're maintaining your code and your project and all that good stuff it's kind of nice to have two separate repos right you can actually work and maintain them separately have your separate Source control all that good stuff two it also allows you to not mess up your yes configs right so sometimes your TS config especially as you get bigger bigger bigger projects you might want to have certain rules in your Cloud functions that you don't want to have in your next yes uh app and all this kind of stuff and sometimes it can cause a bit of issue so I want to make your life easy so create a separate one just for now okay if you want to go ahead and do so we don't have Redux in this build someone's asking Redux um so let's go ahead and do documents builds okay and then I'm going to go ahead and say make directory so all I'm doing by click writing my make directory is literally creating a photo okay and then I'm going to say bright data YouTube build back end okay and now I'm going to go into that exact directory so I'm going to copy that and say CD into that directory and now I do code okay so I want to make this again extremely clear I have two apps I have my next JS app on the right why is this my next JS app that we were messing with before and then I have the new Firebase app right and as you can see it's just empty it's completely empty okay so let's go ahead and do command J to open up my terminal now my terminal is inside of uh inside the correct directory so at this point what I need you to do is firstly I'm going to type in get init git init is going to basically create a git Branch for me inside of it so that way I can eventually push this to GitHub do all that good stuff okay that's the first part second part is I've already installed the Firebase CLI tools so you would have to type in Firebase login I've already done this step so I'm just going to type in Firebase init right so once this is down this will pop up the beautiful Firebase CLI and it's actually a really awesome CLI I do love how they've done it it makes it super easy to go ahead and get things set up and guys we are 10 likes away from 500 just do me a favor and just blow that like button up so damn hard that it just flies past 500 to a thousand straight away all right just do that for the channel allow this video to grow and I will really appreciate it okay so now that that's done we're going to go down on the arrow keys and you can see here we can set up a bunch of different things so here I'm just going to go into functions hit spacebar and I want to just enable functions only okay let our chance corrected let's go Sunny that's what I'm talking about Ryan says 500 nearby hey 500 that's what I'm talking about that's sick all right I'm gonna change the music up a little bit as well that's so cool guys thank you for massive amount of support let's get to a thousand I think we can do it I think we can do it all right so at this point you want to go ahead and click on use an existing project okay so I'm going to go ahead and click on use an existing project and then you can see here I've got a bunch of different builds now I'm super confused because I'm not sure which one I just created so what you want to do is hear bright data YouTube so that's my one that I'm doing now Brian data YouTube build is the second one click on that right and then you can see function set so which language would you like to deploy in I'm going to say typescript right do you learn do you want to use ESN so you can use ESN just for this tutorial I'm going to say no because I don't want it to bother me bug me and that kind of stuff do you want to install dependencies with npm now yes I do okay so it's going to use npm to go ahead and do this I believe okay a quick little water break while it does that but you guys have been incredible so far keep it going we've got front-end backhand all this good stuff Rico says looking fresh as hell boy that's what I'm talking about see how I censored it all right Christian says hello Sunny what's up I appreciate it for tuning in so there we go you see that right so now what I want you to do is come on B and you should see your photo directory okay so command J to hide the terminal and I want you to look at your new folder structure for your back end so you've got functions and now you've got your Source folder you've got your index.ts and then you've got a bunch of examples here so I'm gonna go ahead and just uncomment all of this for now and as you can see we've got start writing functions we've got some examples right here and we've got you know an example of a Hello World right here as well okay so what I want you to do is I'm just going to get my stuff on the screen so you can I can get things ready cause you can is we're gonna go ahead and create a you know like what I talked about before so now we're creating this web hook that we're eventually gonna hit okay so once bright data finishes eventually it's going to push it to this web hook so I'm gonna change this to be called on scraper complete yeah and then that's going to be the name of the web hook so it's gonna be like a URL forward slash unscraper complete and then we're gonna do functions https on request request response and now over here we can go ahead and just say like we can test this out right so I just want to run this just to see if it works so we're gonna do command J and then what I want you to do is if you ever don't know what the command is to run it all you gotta do is Explorer package.json command J to hide that come on B to hide that and then you can see you've got all your scripts you can do like npm run run build npm one serve npm one show and PM Run start with that good stuff I'm just going to go ahead and do uh yarn wait is it yarn or npm okay package lock so npm npm run serve all right and as you can oh okay so this again you're gonna run into this as well right it always happens with me you have to CD into the functions directory okay so CD into the functions directory and now you can do your npm run serve right and what this will do is it will run npm run build and Firebase emulator start only functions so basically what that's doing is it's going ahead and starting the emulator Suite for Firebase but it's only starting the functions emulators right which is what we want for now so in this case you can see using node 16 so before we carry on I want to do something to prevent a bunch of issues later on which trust me will end up killing you annoying you so I want to cancel this so Ctrl C and then I'm going to go command B package Jason command be to hide node 18 okay and at this point I'm changing my node version to 18 but what we have to make sure is that we're actually running the correct node version so if you type in node dash dash version all right you'll see I'm on 16.8.1 right now now I highly recommend you download something called NVM NVM is a node version manager I'm not going to go too far into installing this but it's a real it's a really good um awesome way all you need to do is copy this into your terminal and you can go ahead and install NVM but it's an amazing way to actually switch between versions of node and it's actually something you'll really need in your production environments when you're working right so I recommend you get that installed so if I type in NVM LS nvmls tells me what's on my system and what version I'm currently on so it tells me I'm on version 16 but I'm actually building this in node 18. so what I need to do is type in NVM use 18. right and if you don't have it you just type in NVM install 18. now what it's going to do is it's going to switch my node version to node version 18. so now if I type in node-version you can see I'm now on node version 18. and it's worth mentioning that if you close this and come back you're going to have to make sure you switch your node version again right there is a way to set the default but I'm not going to change it for now see the default right now is 16 okay but in this case if I do MVM LS you will now see that we are now on 18 okay so now that we've switched our node version we can go back and we can type in npm run serve so you've got some production little tips and tricks going on here right if there's you'll really find this helpful again watch and make sure you smash that Thumbs Up Button subscribe if you haven't already MVM is a real treat it's something that you should be using in your developer Journey okay so at this point you can see we have our little URL here that's given to us okay so HTTP function is initialized let's go to that URL and what we should see is we get a nice little hello from Firebase message and that's actually our endpoint which we've programmed over here it's quantity hide the terminal you can see hello from Firebase so it's working this is great right now question what I want to do is I essentially want to have this running so I can develop on it but I want to be able to actually have my Local Host which is the URL that I just saw hello from Firebase I want to Port that and essentially tunnel that onto the internet so that way when I'm developing and testing the web hook I can actually go ahead and use my Local Host to develop my solution and then only when it's ready I can deploy and then I can use that as the main webhook URL so a lot of the time what you would have found is you know you'll see like oh put your web hook here then you're probably wondering I have to keep deploying so I can update my web hook which is kind of annoying right I'm going to show you a way around that right and it's actually a really cool little hack not really a hack but it's just something that like a lot of devs do in the in the production environment okay so we're going to split the terminal so on my left hand side I've got my functions running and we're going to use something called engrock okay so engrock is an awesome tunneling sort of uh tool so if we type in engrock I'm going to show you it right now so it's called online in one line This is a little tagline and essentially what you're doing here is you're basically going ahead and um where is it now I want to show you the actual main screen for it uh okay they actually they just changes but there's a nicer way of putting it in was it oh no no no no no no okay anyway screw that don't worry about it but basically what you want to do is head over to the download so go to androck forward slash download install it I've installed it with Homebrew you can install it with a bunch of whatever approach you want install it okay once it's done all you need to do is start something called a tunnel and what you want to do is you want to forward a certain port on your machine okay so what I'm going to do is I'm gonna go ahead and forward the following Port so if we look over here you can see the emulator is running on the host Port 1270015001 so that's the port that I'm going to start forwarding right that's the host block so what I can do is I can go here I type in engrock http basically I'm saying Ford the HTTP 5001 pool hit enter okay now I've got an account so I've actually logged in and I've pasted in my key again when you install it and Sample that good stuff make sure you check it out um that's nice um so at this point we're going to go ahead and um you see I've got a forwarding URL here so this one right here is the one I want you to pay attention to so copy this and just simply pop that over here and then do forward slash and here you can see on scraper complete so I'm basically this is now a fully functional forwarded URL okay so if I go ahead and head over to that now on the internet so okay so my I have an antivirus it actually it freaks out and I'm not gonna lie it does that quite a lot which has been annoying so I'm just going to go ahead and uh sort this out for a second uh on my machine so that way it fixes it out give me one second guys super annoying why does this have to happen when I'm live right there we go uh so I'm gonna go on to my it's happened on the coaching call as well Okay cool so at this point now we're gonna go here and we're gonna click on visit site and as you can see it says on not found okay so that's not ideal right that's not actually exactly what we wanted um but that's how you would essentially go ahead and set this oh sorry my bad so we actually wanted it here you want to grab the rest of this I actually didn't even get the most of it so we want that bright day to build us intro right so this is the one that you actually wanted okay so there you can see hello from Firebase that's what I wanted all right so you need to go ahead and get all of this stuff right so the rest of the URL is what you need so now we've got a live URL a link and make sure you know that can sometimes expire if you haven't got an account so make sure you don't go ahead and mess that up too much but now what we can do is we can take this we can go over to Bright data so I can simply go to brightly I need to close that text code I'm not using xcode not today uh and then we're going to go over here and now here's my Amazon web Scraper on Brad data and where we had the web hook I'm simply going to go ahead and pop it in there okay and as you can see my URL is there now I need the full URL okay so I'm going to go ahead and take the full URL that we we just talked about so I'm going to go here copy the full URL paste it in here and what's so good about this guys is every time you start in Rock by the way you get a new URL so just remember that okay so you're gonna have to update this if you change it but now what I can do is I can develop on this and actually test this out to see if it works right which is really powerful so now what I can do is if I go ahead and sort of log this out and I'm just going to move this to the side so nrock is running in that little Gap if I go ahead and type in test web hook you see how it sent a message to my my server so look at this if I go ahead and type the test webbook nice look at that guys it actually works right so let's go ahead and let's go ahead and click update so a lot of you saying it's insecure blah blah so that doesn't matter right now because when we deploy it it will actually go ahead and be um when we actually deploy this it will be a https URL and even right now is HTTP tunnel it's https I don't know why someone someone says y antivirus antivirus is just you know it helps out okay so we're going to click update so now this is going to head in set up okay so what I want to now do is obviously you should be using authorization as this is a demo so I'm going to go ahead and do this and also something I want to mention this is so handy because if you're trying to demo an app to a client for example you can simply tunnel your localhost 3000 for example show them the the app over a zoom call or something and then when you're finished you just cut terminal and that's it right you pretty much uh you only show the demo for the period as opposed to just deploying the entire thing okay so at this point we're going to pick up the speed because we've got a lot of work to do okay so what I want to do is I'm going to add in a little bit of a test sort of situation I'm going to type in console log say scrape complete right request body and then I'm going to go ahead and just pop in this and then what I'm going to do is I'm going to cut my server npm run server again and as you can see here you can add a little listener in the background my ngrok does not need to change because all it's going to do is keep on forwarding the same port so you don't need to keep changing it you just need to go ahead I'm just rerunning this right yes you should be actually setting up a listener and then it kind of changes but anyway okay so at this point now we've got the scraper complete and what I can do is we should see here if I do command gate to clear that terminal if I take click on send webhook we should see scrape complete in a short second right so scrape complete and as you can see now it's given me a bunch of information from that completion okay so as you can see now we've got the success the ID which is a test and it's giving us a collector ID and this is an example of remember when we done that collector in the beginning we actually went ahead and got something similar to this right it was something like a collector ID so now we've got our web Hook fully functional okay so with this in place we actually do get more information than that or actually to be honest with all this is what we kind of care about right so with this bit and done now what I want to do is I need to now go ahead and pause this process head over to my Firebase and now we're going to set up our database right because what I'm gonna need to do is actually have a database that I can now store some information into it here's the flow client is going to make a request to our own API and then that's going to go ahead and tell uh right there to start scraping the website that's going to then push a piece of information into firestore saying scraping has begun right and it's going to put a status of pending now when it's pending in the pending State that's where we're going to see the loader that's what we're going to see you know all of the loading situation like you can see over here so that's when we're going to have all of this information like so so when it's in the pending State you're going to see this then once it's completed it's going to stream the data into your firestore database and at which point your client is always going to be listening to that information okay so all of this good stuff to come we have a lot to work on right so head over to build go to your firestore database and then we're going to initialize our database right so let's go ahead and do this how do you make the vs code tabs bigger command plus and command minus to make your font bigger and smaller that's what I'm doing and I use the pinch and move in to zoom in and out right we're almost at 600 likes let's go guys absolutely killing it amazing stuff so go to start in test mode just for this demo okay just for this demo I'm doing that obviously if you're live you should set security rules then we're going to click on enable okay now at this point this will set up our Cloud firestore database now once this is done I need something called the admin SDK right and basically what this allows us to do is from a server-side perspective as an admin because it's only us to have access to the server side which in a controlled environment is true then what we want to do is basically make changes to the database from the server side but there's a way that we have to essentially do that so we have to go over to our settings project settings and what I want you to do is firstly we are going to go to our service accounts okay now inside of service accounts we're going to click on create service account now once you've done that you should see this right so this is where we are going to get our service account Snippets so we're not going to use this exact bit of code but the main thing here is generate a new private key and I want you to click on generate key what this will do is it will download a large file onto our machine for us so what I'm going to do is I'm just going to open up that file just don't want it to pop up on the screen right now and that's simply basically that Json that got downloaded I want you to hold on to that for a second okay so hold on to that file and keep that in the side for a second now what I want you to do next is I want you to go over to your um on YouTube basically where you have that file all you need to drag it into your um your your code over here right so I essentially want you to pull that into your Source folder like so right so this is the what we essentially got and I'm going to Simply rename this long you know horrible file to the service account key service account here dot Json okay service account gear dot Json so we're just going to copy that there right now once you've got this done what I want you to do is simply create a inside of your Source folder create another file called Firebase admin Firebase admin dot TS okay now inside of here what I'm actually going to do is I need to install the dependency so I'm going to pull open another terminal separately so this is another separate terminal the other two are running in split screen but I want to kind of keep it fresh on the screen oh Ben Carter there we go remember for 10 months Bank yo Ben that's sick nice to see you again dude you're sick Bro that's awesome man uh I appreciate you being here again Abraham says I just want to say I finished your chat you put here smashing it with the content I'm great for the for the popcorn that's awesome damn 10 months I'm impressed that's so cool if you want to join the proper fam um your special tier make sure you hit the join button on the screen right now uh just be like Ben it's so easy to spot you in the crowd then all right so now what I want to do is I need to install Firebase admin into my project so I'm going to type in npmi Firebase admin the reason why I'm doing npmi in this case is because I'm on a package lock right here okay so now we are installing it into the the project so let's let that get done I'm just wondering did I install that in the correct directory yeah I believe I did I'm in the functions folder yes no I didn't did I oh God damn it I did the wrong thing okay so at this point what you can do is if you did what I just did you can actually go ahead and delete that delete that oh damn it okay and delete the node modules outside of here so I'm going to get rid of that just ignore that I just did that forget that all right don't make that mistake delete the note modules outside the hair we don't want those nope okay we want the no modules inside the functions folder CD into the functions folder and then do what I did so npmi Firebase admin okay that's about you should have it inside of your uh your functions folder right easy mistake to make easy to fix as well don't worry okay so at this point we've got the functions for uh we've got the Firebase admin done so in Firebase admin now Ashwin says Hey something you rock man thank you dude I appreciate you so I'm going to do a bunch of imports right and I want you just follow along with me so I'm importing everything as admin from Firebase admin importing get apps and importing the service account key which is essentially just a service account key that we we downloaded earlier now what I'm going to do is I'm going to check if we've already initialized any app previously so if get apps will basically return to us any initialized apps right we're going to say if the length actually exists in which case there is you know there is no apps available so no app has been initialized then we're going to initialize an app using the credentials we're basically going to pass in admin credentials certificate we're going to pass in the certificate to this uh call okay and that basically authorizes us okay so once we've done that I can then access my database in an admin perspective okay so I can say cons admin equals admin.firestore and then export my database variable so this will allow me to now make a database call from the perspective and of an admin okay so once we have this in play we can now do what we need to do inside of index.ts so what I would now want to do is essentially once I've actually gone ahead and um once I've actually gone ahead and created that um Scraper on inside of a bright data at that point I want to go ahead and actually input something a collection here called searches and just store a piece of information because then my client is going to then listen to that information okay so at this point for the index I want to uh I want to import the following at the top of the file my admin DB import everything from admin and then I'm going to I'm going to go ahead and say the following so I'm going to say from the request what we get back I want to go ahead and pour the success and ID from the body okay so we're going to use those two things that's what comes back inside the scraper remember when I tested the web hook those things did come back so we're going to say if there was no success okay then what I'm going to do for example if that call failed for whatever reason I'm then going to go ahead and update the database so the way I do this is I simply go ahead and firstly I need to make this an asynchronous function I'm going to say oh wait okay admin DB dot collection of and I'm going to go into the searches collection this is where we're going to install our information then I'm going to go into the doc which is the ID and this is going to be the collector ID and I'm going to set the following information so right so I'm going to set this status to become error and then I'm going to use the server timestamp and the way we do this in the admin SDK is we say admin.firestore timestamp now okay and what this will do is if there was an error for whatever reason it's going to go ahead and update that information but when you use the set function you have to be very careful with Firebase you have to include the second options uh argument with with merge through that means that you're not overriding everything you still you're basically merging the data that was already there and then you're going to go ahead and do it okay now if you did get past that we want to go ahead and actually fetch the results from a bright data right now obviously I haven't actually done the by day a bit here but we're going to go ahead and preemptively get this kind of setup so I'm going to go and say const data equals a weight fetch results and then I'm going to go ahead and pass in the ID right so I need to make this fetch results function so what I'm now going to do is at the top of the file I'm going to say const fetch results equals an asynchronous function which takes an ID which is a string okay and now what I'm going to do is I need to make a request to write data now on bright data what you would have found was if we go over to R initiate by API as you can see here this request actually is how we collect the results from the first step whereby we initiate the call so this will be doing from our next.js app right so we're going to do that afterwards but afterwards I need to get the results so I'm going to show you how we get the results over here so basically what I'm going to do is I'm going to get an API key first so const API key right and you need to go ahead and get your API key now at this point you can use process.m and you should be doing it this way and then have an environment file over here so let's go ahead and start off with that I ran into a few issues I hope that I don't get into that issue right now uh let's actually see if we can get around this so I'm going to go ahead and type in the following so let's imagine we had an environment file for bright data API key okay now this key how do we get we simply go over to our bright data settings we go into our account settings and we simply go to our API tokens over here right now once you've done this there will be a way to you'll be able to go ahead and actually generate a token here I've actually gone ahead and done it so I've actually already done this I've already got my token here but if you refresh your token after that you basically will get a string right so I've already got my string so in this case I'm going to grab over here so at this point all I wanted you to do was I could revoke this token and just do it again so I could I mean to be honest I could do that let's just delete this token um okay I don't want to do this right now okay but you have to get that 2fa and stuff but once you basically set up your token you'll get a little string okay um even no you can't do it here as well okay that's fine so at this point I want you to go in here and just I'm going to paste it so I'm going to paste my key and then I'm going to close the screen so I'm pasting the key right so it's like a long digit with dashes between it I'm now hitting save and then I'm going ahead and I'm closing my environment file okay and then I'm closing the index so TS file so there we go okay now afterwards what I'm going to do is I'm going to actually get my environment my environment file variable name I'm going to go back to my code and we'll say process.m right data API key cool so now we've got the API data key inside of our code what I'm going to do now is I'm going to go ahead and thank you Jay Jay sent me the two-factor code I don't actually need it now but we can say constant res equals a weight fetch okay and then I need to make a call to the data set that comes back so first things first I'm going to use back ticks because I want to do string interpolation then I'm going to go ahead and do the following call so I'm going to go ahead and pass it to this with the parameter ID being passed in okay now once that's done well we actually need to set pass in things like the uh the method and so forth so the method here will be a get request by default is a get request but I just want to specify it and then we have to pass in a authorization Bearer key okay so um charity says man you have a natural time to break down complex concept making them accessible to everyone I've learned so much from this channel keeping up your amazing doing amazing what's on your great true gem thank you so much that's actually a really lovely message man we're almost at 600 likes keep the lights flying in and keep that energy I really do appreciate you all right and this is where I will naturally tend to see a drop off because this way it gets pretty tricky right but we're going to get through it don't worry about it right so in this case we've got the headers here and we've got the authorization and the bearer token okay so you need to make sure you have that otherwise it just won't work okay now once that's done we can get the information by saying const data equals a weight whereas dot Json right then what we need to do is essentially we need to check something now the reason why this is important is we need to go ahead and see if the data is in a build State now when we scrape data using bright data it's not a straightforward two-second process right remember it has to spin up IPS and proxies you have to then go and scrape the data which means that sometimes even when the job's finished it could just be kind of consolidating the information it couldn't might not be ready for us when we go ahead and try and get the information so we're going to create a recursive call here which basically in some sense will retry it every few seconds right so in this case it's just going to keep retrying the function until it hits until the data is ready okay so here I'm going to say if the data dot status is either building or still collecting information right then what I'm going to do is I'm going to go ahead and say uh either not complete yet so I'm going to fetch again in five seconds right so trying again but in this case we're not doing five seconds you can do a little time out there if you want I'm just gonna say not complete yet try again right and this actually does do the trick a lot of the time right so in this case now it's going to go ahead and fetch results so what this does is it will go down then it will go ahead and actually call itself again and then it will keep repeating this until and I found on the second one it always gets it okay so this is going to help us out um and then here one is just for now I'm gonna cast any here because you should have a return type but for this demo I'm not going to get involved in that right and then what you can actually do is set debug points right so what I was doing when I was debugging this is I was saying debug one and then I was saying debug two to double check when I get past this right so that's how I would recommend if you get stuck at that point just make sure you go ahead and set debug points watch the logs and see what happens right then we're going to return the data afterwards right so that would be the core to get the results back okay so after that point we should have the results from the finished scraping at that point what I want to do is update the database right so I'm going to do await admin DB collection searches Doc and then set and then what I want to do is over here I'm going to set the status to complete the updated act with the timestamp and then I'm going to pass the results in like so so I'm going to go ahead and pass it in like so okay and this will pass in the results and so forth and remember again because we're using the set function I do need to do merge true which means it's not going to override everything it's still going to keep everything that's kind of in there and then it's done right and then what I would really recommend is just add a console log here saying we made it or you know like the finished scraping I've wrote full circle in mine I literally wrote this on mine just so I could see when I got to the end right but you can feel free to do whatever you want to do okay and then after that you can say like it really doesn't matter here what we're doing because the main thing that's really going on here because here we could just say okay like finished or um we could say scraping function finished whatever really doesn't really matter here okay get rid of that so at this point the whole function the whole purpose of this is this is going to act as what we need it to do for what have I got a little arrow here let's see what is my prettier freaking out about um my Bearer API token okay it's dead yeah we're good so at this point now we have our function ready to use okay so let's go and get rid of that sorry okay so I'm going to go over to my terminal and now I'm going to restart my function over here so you see a lot of environment variables blah blah so I'm going to stop that I'm going to restart my server okay so now I technically have the back end kind of ready right I completely have the backend ready so at this point oh we've got a little error because I have a full stop instead of a oh you know see it's always the small things it's always the tiny things that catch us there we go Empire myself oh Sony actually called it out he goes you use pointless that come after the fetch is that a problem yes oh he goes that is a problem yeah so you found it dude found it before I did it um let's go ahead and cancel out so it's actually going to spin up the server in a second starting emulators there we go and then we should see it being deployed again it's on 5001 and it's still being forwarded on that same URL so we don't have to update it right so this is good for the development purposes so now this is pretty good guys right this is exactly what I wanted so now what we can do is we can go over to our front end again so this is good we can kind of forget about this for a bit for a bit we can go over to our next jsr okay so now we're back on the next JS front Okay so back over this uh on this side I know it can be a little bit confusing but we're gonna get there right now what we're going to do is we're going to go over to our app localhost 3000 here we are now what I want to do is when I type in something here and hit enter I need to execute a bright data API call right and this is going to be where the magic happens so let's create that functionality in the header so what I firstly want to do is go over to our header.tsx which I'm already in right and then I want to do the API call to activate the scraper and I need to Simply pass through the search input okay so I need to create a call for this I'm going to say const this is going to be an asynchronous function as well so I'm going to do async here and here I'll say const and I'll say response equals a weight Fetch and this will be a forward slash activate scraper call right you can do four slash API but in this case I'm using the new approach which is just to activate scraper so we're going to say four slash activate scraper and then I'm going to go ahead and pop in the following and this is going to be a post function and I'm going to pass in the headers which are going to basically say that we are passing in application Json because we're going to sort of Json jsonify the data right and then we're going to pass in the body of this which is going to be Json Dot stringify and then what I want to do is I'm going to pass the key of search and I'm just simply going to pass through the value of input okay so this will make a request to the activate scraper endpoint inside of our next JS app all right now at this point we need to actually create that function right so over here in activate scraper this is going to be where we receive the post request okay we don't actually need that now cool um and let's check this out so um Luke Skywalker's in the hospital so good to see you so at this point we're almost at 600 likes let's go right so now what I want to do is I need to set up my Scraper on this side so what we are going to say is we're going to say cons what I like to do as well is I just have little console logs which tell me what's happening right so this actually helps me out quite a lot so we're going to say submitting and then here I'm going to say the search is the search I actually want to check firstly that I'm getting the search that I want right so at this point we can actually just test this right now to be honest with you we can do command J I can sort of pull this over to see my server and if I type in hello world and I hit enter we can see search is undefined right so I'm not actually getting my search which is incorrect right so that's not actually what I wanted uh to be honest with you I think the reason why is because we're not using the correct uh ah this is going to be tricky now because um we're using the new apis that I haven't even practiced I kind of ran with this this right now so we're gonna do we're just going to figure out it's fine um so we're gonna go to Roots I'm gonna request response I need the request there we are and then inside of the request object we have the request.body okay so it is request all right let's just double check this so it's going to be a request request.body I'm gonna go ahead and get this out of there now it's freaking out because it's not having does not exist on readable stream oh I need to await it my bad I see equals oh wait and this one will be does not exist no okay this is super annoying um request boy read-only stream of the body contents the da let's do const um search equals request body okay stop body is a readable stream how are we passing this though I mean I haven't I to be honest with you I haven't looked at this properly yet I've actually just done it with the um with the old route of doing things but I kind of want to see if we can just check this out the way I wanted to do it's a request.body anyway let's just see what it says to be honest with you they say submit requires to upon you here and then let's have a look here so submitting request.body and let's look over here for ourselves so you guys are seeing a live debugging session as I'm figuring out MacBook Pro bam cool so we've got a readable stream look first readable stream okay so let's be honest with you I don't know um this is where I wanted to figure out so I'm gonna have a quick little um check here we haven't got any we I mean I've Got the Music pretty low right now I'm gonna have a quick little dive into it so right now I'm just looking at next year's examples of post requests um and I'm just talking you through it as I do it okay so welcome okay so I'm I actually do then guys is doing the traditional array and then when I figure out I'll make another tutorial on it okay because uh right now I don't spend too much time on this to kind of figure out that side of things so that's fine we're gonna refactor it we're going to get it done but I wanted to show you how we kind of do that in the first place um and then obviously once I figure that out we can go ahead and go back and do it I should have really kind of tweaked that bit beforehand but it's fine right but this is how you actually go ahead and get that request okay so right now what I want to do is I'm going to go ahead and change my header to simply be towards API forward slash activate scraper and then I'm going to go into so we're not going to use this root we're going to Simply use the traditional room so I'm going to go ahead and create a activate scraper dot TS file and here what I do is I simply copy my hello example and I can modify this example right here okay so this example what I'm going to do is the next API response will include a data or an error and then the data is going to include a collection ID or a start ETA collection ID or Star ETA and then we're also going to have a type error which is going to be like so yeah and then the Json that we end up returning for now we're going to figure that one out in a second right so let's create this function so this is actually now sitting at the forward slash API forward slash activate scraper function okay so um I honestly I will figure that out I really do I will figure that I will make a tutorial for it and get that forward uh I just want you to see that it's not always you know it's always super smooth it's it's the natural reality and that's completely fine all right so we're going to say const here at this point we'll say corn search um const such equals request dot body oops what the hell request.body Dot search and we just passing oh we're about 4 600 likes let's go guys it's pretty fast I'm gonna do this red body there we go and um so we're gonna pull the search out and then what I can actually do is I can just simply debug this and check like say the search is blah right and then here just to kind of get rid of this little error right now I can just grab that for a second make that whatever just so it satisfies um let's go to our application over here and what I would highly recommend you do at this point is pull up your terminal type in something like MacBook Pro and then you see we should see oh oh okay I'm still requesting from that I need to save that's the old uh URL so let's go ahead and do it now MacBook Pro let me see searches MacBook Pro okay so that's the way that we traditionally did it which is fine for now we can do that and then obviously you can refactor this demo tutorial afterwards as As You Wish okay so um the search is there then what we're going to do is make a request so now I'm going to start speeding up so that way we can get this done I'm going to say async function we're going to say cons response equals a weight fetch so a weight Fetch and oh we're like one leg away from 600 and I'm gonna get the music back up I need the energy I need to drive right so he's gonna who's gonna break that 600. I'm gonna have a quick little water break as well oh my God it's sitting on 599 Carson says oh there we go they're at 601 that's all I'm talking about nice right this is cool right now we've got the fetch right let's go ahead and get this down so I'm gonna go ahead and make a um a fetch to the correct core so at this point to get the correct uh endpoint that you need to call what I would recommend you do is go over to your scrapers so the scraper that we just went ahead and created was this one right here go ahead and type in initiate by API and over here so this is what you want to do you see here right there that Q next one you want to go ahead and copy that URL okay so I need you to go ahead and copy that then here we're going to do back text and then just like that that's the trigger for me okay then what you want to do is pass in the following so you need to say it's a post method and you want to pass in some headers as well as the content typing application Json the headers in this case is going to be the bright data API key now we haven't set the API key here so in this case remember we said for the previous one but we did not set it for this one so in this case what I'm going to do is set the API key so go into this uh create file called.mf.local bam pop it in and I've actually got my key already from previous previously so I'm just going to go ahead and pop in my key right now so I popped in my key and I'm now closing my environment file okay at that point you should see that it loads the environment file from your environment local okay so there's no need to reload the file we now have our environment file our variable being passed in as a bearer token which is great and then we're going to stringify this search into the uh into the the body so in this case we're going to stringify the search into the body [Music] just like so okay now once we've done that I'm going to go ahead and close off my search there we go so I always get a bit mixed up here there we are so now we've got the response right so in this case we are making a request so what we're essentially doing is triggering it as if we were triggering it here but we're passing in the search term from our front side okay now what I want to do is after that comes back I will capture the data by doing response.json so in this case we're going to go ahead and say response.json we'll we'll log out the data and then we should get two pieces of information from the data this is the collection ID and the start ETA right once we've done that I now need to go ahead and create a from the admin SDK as this is still the back end for our next JS application and now I need to create an admin instance so what we need to do here is I need to go to the top level for my nextjs app here and what I'm going to do is I'm going to create a Firebase admin.ts file okay now for the Firebase admin file what I want you to do is you can do this two ways you can either pass in your service account key which is uh one way or you can actually go ahead and pass in your or set this in your environment variable it's completely up to you how you want to go ahead and go forward with that right so in this case I'm going to go ahead and pop in the following at the top and we need to install Firebase admin into this project because remember we did it previously on the other project which was the back end of this build so I'm going to go ahead and install that into the app Firebase admin just like so okay energy overload that's what I'm talking about amazing amazing stuff right so in this case we are installing the Firebase admin API then what I want you to do is remember that same file that we went ahead and downloaded so there's two ways you can do it you can either do it this way or you can actually there's a trick I did in the last build which you can actually use but I'm not going to go over that fully right now okay um what you can do is you can get the the account key so I'm going to go ahead and pull in that service account key right here so I'm going to grab this and pop it in like here I'm going to rename this file and this is the one that I got from Firebase and rename it to service account gee.json go ahead close that uncomment it out okay I remember because this is on the server it's actually pretty safe to do that right then we're going to have the same example of how we initialize the app as we did previously on the back end and then that will allow us to have an admin SDK instance right so in this case now I can access the database in the form of an admin from the back end right so in this case oh there you go I always do that anyway we've got this done so what I want you to do now is to basically go ahead and import the admin so admin DB from the top like so and we're going to say await admin.db collection and we're going to go into the searches collection okay and then we're also going to go into the document here so here what I'm going to say is the collection ID which gets returned so basically what's happening is when I trigger the build it will give me back the collection um The Collector ID right so in this case we'll actually have a record or an ID so what I'm actually going to do here is use that collection ID as the unique identifier for that document then I'm going to set a bunch of information inside I'm going to set the search then I'm going to set the star 88 status and the updated app like so okay now we do need access to admin at the top so what I will do is head to the top and simply do import admin from Firebase admin because we always want to use the admin server timestamp okay so now that we have that in place we are going to go ahead and say if that all went well we are going to return a status of 200 and we are simply going to return the collection ID and the start ETA this is getting uh pretty pumped up I think we're going to get 700 likes this is crazy right so we can say collection ID it's not ETA cool all right I know this is a tricky about but don't worry it's fine this is levels right you can go ahead and progress your levels this video is going to always be here for you to go ahead and experience web hooks experience web scraping all that good stuff right so at this point now we've got that down we're gonna go ahead and hit save right so I do want to surround this entire Block in a try catch as well so while I am doing a the top right here I want to do a try statement and if at any point any of this fails so I'm going to wrap the entire thing in that I'm going to say catch the error and just basically yeah give me a nice little error message as well so in that case I will do something along the lines of this so for now I'm just going to go ahead and assume this is any I'm not going to get too far into this but yeah we're going to log out the error if anything happened okay it's handy for debugging all that kind of stuff so so at this point so at this point we're gonna go ahead and test it out right so let's try it out guys we're gonna go into and I'm gonna show you how you can debug and check this yourself so what I want you to have your Local Host open then I want you to have your Firebase instance open as well okay so I want you to have your fiber because a few things are going to happen right now so have your Firebase instance open kind of make your a bit smaller so you can see like you know your collection here then I need you to go to your bright data here pull this open as well and then bright data I want you to go to your web scraper I want you to click this and click on statistics and here you can see where your runs are occurring right so now think about what's going to happen I'm going to run you through all of this as well do not stress right so we're going to go into our app and what I'm gonna do right now guys is I'm going to go ahead and initialize a build which means that what we should see here is that this will go ahead and start another build in the minute I call this so if I go ahead and type in MacBook Pro hit enter right so what we should see now is look oh it's doing it we have this ID let's see if it got added into our database so hit a little refresh we should have a searches collection I ate there we go and there is FN amazing stuff nice and as you can see it's in a pending state right this is how we're eventually gonna reach a point like this where it's pending right so at this point we have the pending State this thing is scraping the information so this is great this is really good right and if I go into my actual build and see the terminal logs you can see look the data is collection ID start ETA so this is what's happening right so this is really good this is what we want to see and what will happen is eventually this will scrape the pages and it will return the records now what we can even do is actually wait on the back end and see if something happens over on this side right so over on the back end if we look at the uh the the server running once this finishes this will effectively ping our web hook and then it will go ahead and execute the code which should then change this to go ahead and become the results that were populated from here okay so as you can see it's fulfilling the pages so it's begun the scraping process this is exciting stuff guys right it's fulfilling the scripts if you go ahead and check on it it's 50 of the way done and just to go ahead and show you right now I kind of don't want to miss this so look two pages 16 records we should hit our web hook in just a second so it's wrapping up the job right now so typically after it's done it will take a few seconds to go ahead and you know process the web hook that kind of stuff and now as I mentioned before we don't even have to be on our client anymore because this is going to happen through a web hook architecture it's going to hit the web hook now it's going to go ahead and modify this if our web hook logic was correct okay so let's go ahead and be patient so you can see something has happened we went ahead and hit this um oh okay I don't think my function was actually running oh no it did it did it did it said um oh did it is this working okay so it's running again scrape complete finish your function was good everyone oh all right so my what failed on me was my time stamp right so again this this can happen Okay but you see what's happened here right so what actually happened was we ran it from the client so I want to stress this because it's very important we ran it from the client again we ran it from the client it hit bright data over here which is exactly what happened here Friday I started scraping Amazon which was great it sent a completed message to our web hook which means that we saw our web hook get fired off and hit okay at that point this is the web hook that was on it at that point it tried to update Firebase Firebase had a problem with the um timestamp right which happens way too much right so there's a bit of an annoying issue right now with that whereby if I do NVM LS are we still on 18 yep we are so I keep I actually run into this issue way too much to be honest with you um it was for the updated at timestamp um so it was here I believe yeah so where am I using dot now it's there right it says two places that we're using here and let me just ensure that I'm using it from the correct instance of Firebase admin okay yeah so it's still coming from the right place I'll actually wait a second I think I'm in the wrong build um yep I'm I get confused myself so I'm going to just double check my imports are correct yep they are um let's go ahead and try this again okay so let's go ahead and do npm run serve so that timestamp can be a bit of an issue don't give up because honestly it's it's just a temporary thing like I don't know why that that at times and there's actually a whole stack Overflow uh debate about this right now where they're trying to fix that um I think it's been since a certain upgrade that's been a problem but when you're watching it may not happen Okay so let's go ahead and run this test again let's go ahead and run it again so we're going to type in iPad Pro hit enter and now what you can see is it will hit um bright data bam this gets affected as well because we're going ahead and popped it in here we can actually delete the iPad Pro uh the MacBook Pro example as well because that's like a dead one now and then we can see here and there again you can correlate it because it's i7e i7e right there okay so all this kind of stuff's happening right now um Mario's I miss pop phones and science inspiration motivation along with these amazing teacher skills thank you so much dude I appreciate you so at this point while this is happening I do want to kind of get past this point I want to show you once and then we can kind of build it out but I do want to demonstrate the entire process but I hope you can see like when we do obviously work with web hooks this is why it's handy to have engrock this kind of stuff because we can develop locally and debug it whereas if I was doing this live I would actually or not live I guess when I if I was doing this um with deployed URLs I would constantly have to deploy my app every time I made a change that's just not efficient it's not a good way to work right so this is a way that I would highly recommend you do it we're almost at 700 likes as well so just uh thank you so much guys for tuning in and keeping up with me right um amazing stuff so let's double see what's happening so again that's going to scrape again some stuff could be really quick some stuff can take a little bit more time depends on the IP the proxy Network the busyness also this is a developer uh demo right now as well okay someone says do I use a tile manager yes I do use a tile manager um I can't remember the name of it for the life of me uh but yeah they help out a lot okay so while that's happening what I'm gonna do is I'm actually going to continue on with the build uh and and carry on doing the things that we need to do so I'm gonna need to go ahead and set up on Firebase I'm gonna have to go ahead and set up a a instance for our function so in this case I need to set up a client access to the file store database so in this case I'm going to go ahead and create a new app here I type in bright data YouTube build uh register the app and then we wait for it we get this add Firebase SDK we've already done all this blah blah blah we can go continue to console nice right and then what I want you to do at this point is go into your code so we are now inside of the next JS app yep over here next yes up and I want you to go into where we had Firebase admin I want you to create a file called Firebase so Firebase dot TS okay and here I want you to go ahead and do the following so we're gonna firstly install Firebase into the project because it's different to Firebase admin remember that right so in this case I'm going to say yarn add Firebase nice okay and then to be honest with you that might have been what it was no I think I did actually Firebase Avenue okay um that one's scraping away let's leave it to do its thing okay so while that's installing we can go ahead and actually prepare the code for this so we can go ahead and do this bam and then I can pop in my Firebase config so the config that I actually had if you go down here was this one here so you just need to copy your config go ahead and pop it in like so and then we're gonna do a simple check here to basically check if the app was already initialized or not okay so I'm going to go ahead and pop in here and this basically checks if the app's already initialized get the app that's initialized otherwise initialize the app with the new credentials and then what we do is we get the instance of the database by saying get firestore and this is using Firebase Version 9 on the client side okay so bam this is looking good we've got the database ready now once that's done let's just see for a second sometimes it can hang if depending on you know if there's IP network or and plus I have the demo Gods against me right now which is completely fine it happens right so I'm just going to go ahead and modify something right now so what I'm going to do is quickly go back to my um my code and just continue on with something here so I'm on the front end there we are it gets super confusing when you've got all these different things open and obviously on one screen while I'm teaching it it gets a little bit intense but we're fine we're good so what I want to do is that will go ahead and actually populate the database the way that we wanted it once it comes in now what I kind of need to do is on the front end I need to actually go ahead and check out the results themselves right so once I've actually gone ahead and um so once we go to let's go to the header quickly yeah so once we activate the scraper it returned back a collection ID I can use that collection ID to direct the user to forward slash search forward slash that collection ID then we can create a dynamic route on nextges to that page and then we can render the information based on that ID so I'm going to show you exactly how we can do that right so first things first I need a ruler right so I'm going to go and say constant router equals use router and we're going to go ahead and make sure you don't make this mistake use next navigation now if you're using hs13 because that's the way we do things it was super confusing but yeah that's the way you gotta do it and then what we're going to do is underneath the response we're going to go ahead and firstly pass the information from the response right this is when we put into the pending State then I'm going to say router.push and I'm going to do back ticks for string interpolation forward slash search forward slash and this is going to be the collection ID so if I hit save now what we will find is if I go over to this page and I go ahead and type in for example iPad Pro oh let's just type in PlayStation 5 all right and now what you'll find is I will get redirected to forward slash search forward slash a collector ID which makes sense because remember what we did is we actually pushed this over to a fire um to the uh scraper the scraper was initialized gave us an ID I stored that ID inside of Firebase but I want to direct the user to forward slash search for the ID now how do I go ahead and set up a root like this well it's very easy with nexjs13 all we have to do is go into our forward slash app directory then we go into this click on page let's go ahead and type in search to represent the forward slash search then I'm going to have a dynamic component to that right so what I want to do here is it's going to be forward slash a random kind of a dynamic ID so what I do is I create a folder inside with square bracket notation and call it ID you can call this whatever you want really you can call it ID you can call it you know collection ID I'm going to keep it simple call it ID and in the side of ID I'm going to type in page so this is inside of that ID folder page.tsx okay now inside of here we do rfce we go ahead and we create the page that we are looking for now this is going to be known as the essentially just the search page why is this going to be the search page and what's really good about these pages is we can actually go ahead and get something called the params out of these pages and as part of the params we get the um so let me go ahead and just make sure I don't mess this up yeah so we get the page param so naturally when you have a dynamic room in the page props this portion here the Wild Card portion it gets passed through as a param and then the ID in this case is whatever you decided to call that right so if I called it like you know collection ID that would be collection ID and so forth so I'm just going to create a type definition for this so that way we can go ahead and protect ourselves so in this case I'm going to say params with ID string cool so we've got this down and then inside of here I'm going to go ahead and just um so now I have access to that that that URL right there okay and I just want to double check did my scraper finished loading so my scraper did find the records did it actually populate the database or did I get the same issue um I think it was the same issue yeah so reading now so that that seems to be breaking my my function here so we can see node version 16. I believe it's because it's running in node version 16. that's the problem that I'm seeing here so node version 16 is causing that to happen although I believe I am running it in node version ATM okay which is strange let's see what did I start with node version 18 at the host okay so I'll tell you what what we can do is you can actually I mean you could use the created or finish that as well right so what we can do here as well just to sort of bypass this for now is rather than using the timestamp that comes back here what we can do is where I've done scrape complete you see inside the request body it's always handy because you can see what comes back right we can use the finish time which is completely fine so we can say the finished time although the finish time is in the timestamp fashion which is slightly different to The firestore Returned value and the only reason this is happening is because my run time of my library right now is actually stuck in 16 which is a bit annoying um so let's go ahead and just force this to let's change this up let's just double check it MVM use 18. I'm going to force it back into Now using node version 14. let's now do it again right so let's go ahead and say yawn run serve and do it again just make sure because you see in that debug we saw that it was node version 16. I know it's crazy right these things are so hidden away sometimes but that can actually be the problem Mr Frank what is up dude OG in the house hey if you remember six months but Frank's been around for way longer than that um he goes let's go good to see you here man uh James goes this is sweet can't wait to watch cannot wait to watch it or 5am oh the awesome stuff man thank you for tuning in um okay so this is loaded now so let's try and do the same thing again I told you it's going to take a lot of debugging but once you get it I promise you it'll be worth it okay so let's go ahead and run another test iPad Pro and as you can see this should have kick-started a scraper there you go job is starting great stuff and I do want to just clean up my screen a bit because it's kind of chaos right now so what I am going to do is I'm going to move my backing code over to uh this side over here so that way we've got a different page for it right so my backing code is over here now and we should be able to understand when it gets hit on this endpoint we should be able to see a version as long as it's on node version 18 that will be fine okay can you not use the Now function from the default JS date and time well if you decide to do that the problem is that you're actually going to go ahead and do the server times them however you might be right because it's still going to be in the uh it's still going to be in the the cloud function so that might actually work but let's oh oh oh oh oh no was it almost there oh no it's okay same body problem God damn it see it's doing it again it's trying to read it and it's just not finding it it's fine for now to bypass I'm going to use um the finished uh app function okay so I'm going to cut this off um that's okay oh God damn it it's so annoying um but yeah that's that's what it is it's the node versioning being a mismatcher so at this point what I'm going to do is over at my request dot body I'm gonna do instead of this I'm gonna do finished okay and we're going to use this for now it probably will mess up my uh sorting a little bit later on but we come back to afterwards that's fine okay but I just want to show you because this it works and I just want you to see the entire flow it's beautiful right but I really also appreciate you guys watching this side because this is the reality of coding and it's not always like you know clean straightforward it's debugging which is why I want you to see this so MacBook Pro bam hit enter on the search and now what we should see is another MacBook Pro spin okay this is starting off so once this is done and it scraped the results we should see this fly in over here so what I'm going to do is I'm going to go ahead and cut this so oh no my oh God damn it my functions stopped no no no no no no no no no okay we need to try and get it spun up before this finishes otherwise there's no web hook to hit oh damn it no admin is used but never declared oh come on man let's go okay run sub is it gonna beat me to it it's gonna miss the web hook because right now it's not running right so there's no web hook to run this off so we'll see let's see come on come on it can make it it can make it okay we're up ah there we are so now it's up the web hooks up and this is still running on that so we're good all right so once that's done then uh that will go ahead and ping this and then we can kind of check on it in a bit all right so back to the code okay so once that comes back the optimistic approach will be that we will actually be able to go ahead and see the um what's it called react Firebase hooks react Firebase hooks there we are all right I need to access react Firebase hooks so at this point once it comes back uh on the front end so I'm back on the front end now what I need to do is I need to actually get the a real-time listener collection to that document because what's gonna happen is it's gonna be a result that come back and I want to go ahead and look through that right so what I'm going to do is I'm going to use this lovely Library react Firebase hooks so I'm just going to install this into my project like so so I'm going to go into the front end I'm gonna go to command J I'm going to do yarn add react to Firebase hooks okay so while that's happening what we're going to do and a lot of people use this right Firebase hooks now I'm gonna go ahead and connect to it and we've already got our client-side database connection so what we can now do is we can actually go ahead and import the user document the use document basically pulls in a real time listener now remember as we are now having listeners and all this kind of stuff we have to convert this to a client-side component right so in this case or you could do a more granular level so it's not the page level but I'm going to just do it at this level for now and then we're going to go ahead and actually initialize that I'll pull in that real-time list now right so what we have here is a snapshot we have the loading State and we have an error State this is all from the library we say equals user document and now the magic part here is we pass in the Firebase Version 9 syntax for how we can go ahead and actually pull in the special reference to the database that we're looking for so here what we need is the document so we're going to import that from firestore then we get the DB instance which is going to be the database instance from our local Firebase file not Firebase admin Firebase far away then we're going to go into the searches collection so just know okay sorry searches and then the ID which is the document so at this point this will give me back everything inside of my Firebase uh database at the specific document that I'm after so searches for session ID and it will be here okay so let me just double check on that job and see how we're looking all right so this one's a little bit stuck at the moment um that's completely fine sometimes it can happen again we is IP proxy Network sometimes these things can happen we haven't dialed in on that yet but what we're gonna do next is I'm gonna build it out as if we have that information available to us so let's go ahead and do that right now so where's my front end code I'm going to move the backing code over there for now way too hectic right so we're going to say if it's loading right so while that data is loading I'm gonna simply return a bunch of information so I'm just going to go ahead and shorthand this a little bit I'm just gonna say loading the results make it like a life a little bit easier I'm someone say loading the results with a bit of text and coloring I'm going to say if it doesn't exist I'm just going to return them you know nothing essentially then I'm going to go ahead and do um if it if it does list or if it's pending it's going to be essentially saying that we're scraping the results from Amazon right so what I'm going to do here is I'm gonna say if the status of the information so that comes back is in the pending state I'm gonna return the following so I'm going to say return a div and we're essentially going to say scraping the data from Amazon okay and we should be able to actually see this now I'm going to give it a bit of styling here so you can feel free to you know pause the video and see what I've styled here I've just a bit of flex column simple stuff here and then I am going to add in like a nice little spinner interaction that kind of stuff but right now what you can see is we are scraping the results for Amazon for that search but while that one's possibly on hold right what we can do is we can try another one we can say something like PS5 right and then I can go ahead and try and search and as you can see it pushes me over there scraping the results from Amazon because now it's in the pending State what we will see is that we'll see two scrapers active right so this one is starting off and you see that one I was able to actually get the information much quicker and there you go I found the records right so it can be super quick as well and let's just see on my back end how this is performing so let's go ahead and head over here so this will actually go ahead and boom scrape is complete not again no yep not complete again trying again remember like I said before if it doesn't get the um so what can happen is is remember it might not be ready straight away but it did it right and what I forgot to actually do here was say woohoo like full circle yeah oh yeah I should so here you shouldn't have the console log saying woohoo like full circle right just for now like while you're debugging it right full circle okay so obviously I can see that but what we should see now which I'm very confident about is if we go to this boom we have the result banging that's what I'm talking about look the search was PS5 we get the results back that's what I'm saying guys yeah so look at that it works all right so let's try this one more time let's do PS5 again as a simple example what we'll see is it will trigger off the scraper it will go into Firebase the the database so in this case um have I done it yeah there you go so it's triggered it off so we've gone to that it's pending PS5 is now searching uh let me go ahead and pull this up so that one just seems to be a bit stuck which is fine it can happen um and then on the Fulfillment side but again what's nice about this is that even if it is stuck when it's ready and it comes back it can go ahead and do a really nice kind of you know it will fly in as needed so um that's pretty cool Mr Frank five dollar donation he goes now we've just released Commerce kit it's a cool Shopify it's sdks oh nice dude awesome stuff I will definitely check it out all right so once this is done we will see this replaced with um instead the um the you know the information that we have over there right I could actually use the start ETA and then finish that to kind of sort everything in the correct way I think I might do that to be honest with you and that will actually prevent this issue from bothering us super in an annoying way so that's actually yeah let's do that okay so what we'll do is we'll go to our activate scraper function and then where we have instead of admin file store timestamp now we can use the start ETA to actually go ahead and do this all right so that way we can actually end up using that as our update to that so updated that was the start ETA and then that's actually pretty good yeah we could do that man nice cool right media all right so this point now I am going to start programming the results which is amazing right we have an example that we can use the results from which means that we can stop doing this thing so I'm going to use this so forward slash search forward slash Dot and from here I can now get the results so let loading the results bam this will have all the results in it Okay so we go to our page learning result if snapshot pending scraping the results you already had that and then here we can actually pop in the um stuff I'll add in the fancy Spinners and all that good stuff afterwards um so we've got the div and inside of here I'm gonna have another div and we're gonna pop in here another div and to save us a better time I'm just going to pop in my H1 and a P tag right so it's just gonna basically go ahead here and say search results for the search term and it's going to have you know if there was someone so and so many results found it will go ahead and show that right so that search results for PS5 16 results were found right and then for the styling of the two divs above it again the same thing it's just a bit of flex rules here going on and essentially what I've done here is on a smaller screen it will go into effects column on the larger screen it'll become a bit bigger right so it's very simple a bit of styling uh thank you so much stack Coreen he goes much love from Romania what's up dude I appreciate you for tuning in thank you so much all right um warp says this is a substantial project but it's a demo take and make it your own there trying to add new functioning 100 that is literally golden advice I would definitely appreciate that um a Walid says a pop reactor I'm such a big fan dude I'm the CEO of a stop in Dubai and I wanted to get a technical you've helped a lot amazing Waleed uh definitely reach out on uh Instagram or something and we can chat I could go for a coffee that's awesome um I'd love to go for a coffee with anyone Dubai so we can definitely do that me and Jay will come so in this case we're going to go ahead and map through all the results now as well right so in this case uh we'll return all email us Jay give them the email address and he can do it that way okay so at this point now what I'm going to do is I'm going to map through the results so what I'm going to do is I'm going to say if the results were greater than zero so the length was greater than zero I'm gonna simply map out the results entirely right and what I'm going to do is I'm going to pass through the results like so right now obviously the results don't exist right so what I'm going to do is I'm going to pop this into a component of its own pause to say results.tsx rfce and now Ben says what's up puppy at amazing stuff this is nice dude um we've got the results I'm a little bit disappointed I didn't get the next 13 route done I will get that done though I will get that done I'll cover it in the zero for that girl but that's why this channel is real you know I don't like you guys it is what it is and I will learn it and I will come back stronger with it and I will teach you it type props so here we're basically defining the results so result of products right product there you go and you can see this product right now I've actually gone ahead and created a custom typing so I'm going to say typings.d.ts to create a custom type definition and what I want to do here is just simply make a product up and I basically built this type definition around the structure that gets returned back from the scraped products and you can actually see the schema in bright data as well and that's going to be something which I highly recommend you check out so we've got the product here that's looking pretty good and then we've got the results okay so now you can see that it's a Reser type product so now I can safely map through it without any like you know without making the silly mistake or anything like that so in this case results import it from our components head over into my results results is expected in products array and then we can start styling this up so at this point I'm gonna have a a grid layout okay so in this case we're going to go ahead and say a grid from the mobile view and on a large screen we're going to say grid columns 2 and then on the extra large screen we're going to say grid columns five oops I actually grid columns five and then I'm going to say a gap of five between all the cells and the width of four to apply right now once that's down we are going to map through the results okay so we're going to say result stop map for every single result what I want to do is I want to have a link right so this is a next link tag all right and then what I want to say is each one has a result of its own and the the key here is going to be a time now yes you should really have something a bit more stronger than a title but in this case I'm just going to use it as a demo but you should use something like the Asin or the ID or something like that is a lot more better than just a title um but it should be fine for this demo right so I hate around oh my God okay for those Dot a URL is the one that is going to be the click through and then I'm going to have a bit of a styling over here right so the styling is going to be a bit of flexbox with a bit of Shadow it's quite a nice little style I've kind of created here oh nice thank you thank you thank you Frank so much because another five dollar donation wait can I grab a wait I can grab a coffee with sunny and Jay might have to get obviously about of course man if anyone's in Dubai feel free to hit us up uh that's what it's about like we honestly we'll meet up with anyone that's cool man why is the place to do it as well so it's really really nice to to yeah let's make it happen so once we have that in play I'm actually going to go ahead and pop in an image as well now this image is not going to be a Nexus image it's going to be a normal image because I can't predict the URL that it's going to come from that's why I'm doing it in that sense um here I'm going to just correct something like so and look at that guys boom we have the images popping in already just what I'm talking about I love it when it happens I love it when it comes together right look at that and we've also got the grid kicking in as well on the larger screen oh just beautiful beautiful stuff it's like creme de La Creme right Carson says hey papa I'm here because your amazing chat you particular Ontario which was um completely stunned by the UI it was completely uh it was amazing keep up the good about thank you so much I love and appreciate all of you honestly we're almost at 700 likes let's keep going all right so image tag is going strong now the div right so the next bit is a div I'm gonna have uh the title so it's just two P tags and I'm also collecting the number of reviews so at this point you can pretty much you know pause follow along that kind of a thing but this is just simple styling I'm doing here right so I'm going to say that this div should basically be selfish take up all the room with flex one bit of padding it should be a columnar column column okay I'm not even going to try and say again I messed up so bad let me go the div and then I've got two P tags and I'm basically going to say if there was a previous price as well so here if there's a previous price and it's greater than zero then it should show the previous price in dollars because that's what we're scraping for here from the US aside so as you can see here if there is a dollar dollar version you can see the previous price shows through and we've simply got a line through on this on the styling okay now for the um the class name here I'm just going to do a flex simple Flex box this one is gonna also try and steal the space with effects one right and as you can see look it's pretty it's looking pretty good right this is pretty nice uh those of you who haven't seen Last of Us oh amazing show proper random but I started to throw that in okay now after that we have a the features right so some of these actually come back with features inside of them so I'm gonna go ahead and actually pop in the div like so and I'm gonna say result dot features dot map for every single feature and my voice is going for every single feature I'm going to go ahead and map through the following and we'll say if there is a feature and it exists right then we're going to go ahead and pop in like this feature with P tag the key is going to be the feature because you're mapping through of course and then it's going to have a background Indigo it's a little bit rounded off and it's got the feature in it right now as you can see look at that we automatically get the features in there now the only reason why that looks horrible is because the surrounding container of all of those features is not flexbox right so we're going to say Flex wrap make sure that there's a gap between like of each like kind of thing inside there justify it to the end so it kind of sticks to the end because they're going to be quite small afterwards and give it a margin top of five now watch when I hit save watch when I hit save how beautiful this is look pow look at that oh just beautiful oh my God nice that's what I'm talking about look at that I think I've actually done too many columns I think I've done grid column five when I was supposed to do good columns three oh my God yeah I was thinking that I was like what the hell this is a bit big like grid columns uh three yeah but you can really customize it however you want that's better I prefer this right and what's so nice is it has a clickable URL okay so if I was to click on this PlayStation 5 for example look at that guys it actually takes me to the site that it was scraped off which is sick right that is so cool I like loading the results this is so nice look at that oh just beautiful everything's there like it's so nice right three looks a lot more seamless I agree with that picture right so look at that it goes into like from one two three right really nice right and obviously at the top here I need to give a little bit of padding but we can fix that that's fine right so James says bam nice that's what I'm talking about dude right so now what I want to do is I want to pull in the uh rest of the results over here so this is looking very good like the scrapers working if I zoom out you see how it's centering in on the max width element all this good stuff um yeah amazing stuff Mark says I'm trying to finish up your project I'm still getting stuck remember you are going to get stuck guys it's normal right it's debugging is part of the process this is why we have a community coaching calls Community because that the whole point is that you're not alone and you can debug it with other people in the coaching course so feel free to check it out but otherwise remember it's just perseverance it's practice you should see how much I get stuck right we are almost at 700 likes we're about to break the mark let's keep learning final stretch people let's go so let's um get the a little bit of padding over there I'm not liking how that's looking so I want to uh actually get the I believe it's the header um probably where I haven't given the style correctly yes I believe it's in the header um well I haven't given it a little bit of the correct styling I think maybe it's in layout or so for the layout I mean you could really add this fix in anywhere to be honest with you we can add it in here where's my head uh she has almost got in here I'm gonna say Where's my let's do a padding search results you know what let's we'll do it with the search results on let's go to results [Music] um search results it was in the page dot such there you go search results for him and I'm gonna simply say over here that's it it was in this file this is what I forgot yeah padding on the y-axis R5 that's just look at it's just little things like that make a huge difference in my opinion all right so that's looking a lot cleaner already nice um let's type in like Xbox One Hit search and this should take it should take us to a new Xbox screen and we'll add the Spinners in at the end like finishing touches like the Spinners and all that good stuff we'll add in right at the end um I think they're still still searching uh or yeah probably is yeah there you go um that's what I'm going to add in eventually it react hot toast notifications as well but for now while that's happening let's go ahead and do the sidebar magic okay so sidebar so you see here we have sidebar rows now that we have the iron files store we can actually complete that right so on the side side view we need to go ahead and get the collection of all of those things inside of the database so all of these basically are going to be in the sidebar right so use collection is great we are going to make this a client-side component because we can have a live listener so use a client you can again use it in a more granular fashion um that's completely your core now in this point we're going to go ahead and pop this in so I'm going to say snapshot use collection and I am going to order it by the start ETA okay so in this case let's do query and I'm going to go ahead and pop in this one so I'm going to query I'm going to grab the collection which is from Five Star the database is from our local Firebase file and then order buy is how we query the data right and if you really want to think about this in a simplify oh look at that guys look at that that actually just happened perfectly as it worked out oh my God that's just okay more because I want like the way when it works like that it's so sick like oh I love it see the real-time fashion there remember what I talked about this architecture right you don't even have to care about everything it just has a real-time listener there when it was ready after the web hooked after all this flow happened and it hit any updated Firebase because there was a real-time connection the client just showed the results beautiful beautiful what is mmm nice right that's what I'm talking about so in this case you can just do the collection like so but if you want to order it and query you know like actually kind of you know structure the data on the server side then kind of flip flow in then what you do is you add a query wrap everything and then add an order by right so I'm going to start by descending to show the most stuff at the top okay um my AC is freezing right now I'm actually freezing um so at this point uh for the unloaded list what I'm going to do is I'm going to say it's going to be a flex list I'm going to do Flex column and I'm going to have a scrollable element over here so Flex column gap2 p12 oh a long time no see what is up dude just got up in the US and excited this bird being a part of the pop-up Farm has literally changed my career boom that's what I'm talking about and with that 700 likes thank you for the donation Jay screenshot that absolutely incredible things uh being sent by the proper fam right now man I I the commute I'm so proud of this community I swear to God it's like a family of developers and it's just Untouchable uh you guys are incredible thank you for sharing your stories and continuing to share them with me and I'm so grateful that I am in the position to be able to teach you guys all right we're going to go ahead and map through the snapshot which is going to come back from uh what we just set up and here what I'm going to do is I'm basically going to go ahead and map over something like a sidebar row like I kind of showed you there obviously we don't have it uh built yet but remember you should be passing in the key every time you map that's going to be the document ID and then we're going to pass the document through just like so right so instead of this now we are now going to go ahead and create a sidebar row component so inside of our components folder we're going to go ahead and do sidebarrow.tsx rfce boom just like so get rid of that and then inside of here we are going to expect a component coming in so let's go ahead and Pop That in right now so we are expecting a document I actually really like this track all right this is actually quite nice like it's kind of peaceful coming all right this is going to be it props jay make sure you screenshot that that is actually awesome to keep track of all right type props there we go and then what we're going to do is document data we can actually pull from firestore and that will resemble the data that has actually been passed over right so use client is what we're going to do here because we actually are going to have things like a use State and that kind of thing to show which is active and so forth thank you Jay for the update all right so at this point now I'm going to have a list item because remember it's actually parent of this is when we actually showed it out was inside of if you remember clearly where is it sidebar if you remember clearly over here and we can also import that right now so let's go ahead and pull that in the parent is the unknown list so that way inside is a list Mr Franco's Papa family strong yeah Frank's on one today thank you so much dude another donation I'm gonna get sushi tonight that's the goal um so as you can see like the sidebarrows are flying in that's what I'm talking about right that's what I wanted to see um I am gonna have a router which is basically every time I click on any of these links you can actually do it a few ways you can actually instead of a list item here you can have a next link but it will pre-fetch as well so pre-fetching would be great but sometimes prefetching can be a bit excessive in my opinion as well um where you can actually deactivate the prefetch so yeah you could use a link here as well but just worth a good thought right so Contour equals use router use router Router routers and don't do what I just did right take your time with that next four slash navigation right don't make that same mistake um Hamza says hi what's up dude I'm also going to use something called The Path name right because I'm going to need the path name to do a quick little comparison check afterwards so use a path name so let's go ahead and pull this in like so I'm just going to go ahead and do it because my auto complete is being so slow right now um and then I'm gonna pop that in so it's going to be part of the import there we go right hit save that's great so at this point for the document here I'm gonna have a div uh okay so I hate it when my code and my editor doesn't work with me like I should sometimes again when you're live this stuff just tends to happen right so I have to sometimes bloody code in such a slow way there you go all right so we have the list element I'm gonna say the key we don't actually need the key because I'm rendering it out on the other side we've got the click on click and on here we're going to push through and we're doing forward slash the document ID and that means when I click on any of these list elements it's actually going to go ahead and pop in the uh send me to the correct URL all right the next thing I want to do is I'm actually going to go ahead and say that if it was um I'm actually gonna firstly have the search term so I'm gonna have the P tag saying here the search term so like that for example Xbox PS5 and so forth I'm gonna style this so it looks way nicer because right now it looks horrible um and I'm actually going to do an active little check so before we style this I need to see if this is the current active one right so basically the way we can do this is we already have the access to this and we have this information over here as well so all I need to do is basically check if the ID of this which I have in the document object so the doc object is the idea of that is actually found in the current path name we can determine if it's active at the moment and the way we simply do this is we have a use effect right we never use effect we use effect like this it's written like this with a dependency array if you don't know how to use use effect make sure you check out my user effect tutorial if you're watching the replay it'll be linked up or somewhere around here afterwards thank you Jay bye man um so yeah we're gonna throw that in I've got something in mind um so before we carry on we're going to need a piece of state so the state is going to represent the active if it's true or if it's not active or not so in this case active use a state like so we're going to start that off with a value of false right and then what we're going to say is if there is no path name simply return otherwise we're going to set active and we're basically going to say if the path name includes the document ID right and so what this will do is it will set the uh it will set this variable true for the individual item which is active so that way you're active will only be we're only you're active piece of state will only be true for the component the sidebar row component which is uh matching the current route that you're actually on so that way yeah it'll make sense in a second I promise you I've completely fudged that um one job is to say I just want to thank you for your content I'm 20 years old and got a job as a flutter react Dev and I'm going over your next draws crash course at the moment that's incredible dude thank you for sharing that information um good luck with your journey man and then here what we're going to do is we're going to have a class name bit of styling but notice what I've done here I've done jsx so the squiggly brackets with a back tick for string interpolation and I've gone ahead and added in a conditional so I've said if it's active then add a background white and a shadow of MD right so now you can see look at that guys boom so as you can see if I click on the MacBook Pro for example some of these were stuck remember so some of them were actually like stuck at the moment but this one right now isn't actually changing the rendering state so I need to check out what's actually going on with that if I was to go ahead and click on that is it changing the actual route yeah so it was so it wasn't loading the page oh yeah okay so big big thing right do not make this mistake as well if you're using the variable you have to include it in the dependency array otherwise what just happened on the screen will happen to you right so now if I hit refresh you'll see a load results if I click Xbox One PS5 look at that that's about nice yeah so that's how we have the active stay right so that's great amazing stuff and now I'm also going to say if the status is pending it's going to say scraping the information okay so scraping information will be there so some of them were stuck before which is completely fine I ended up canceling them anyway which is fine um that can happen it's completely normal with scrapers uh sometimes it could be loads of situations you know Amazon could have picked up um a scrapbook could have gone into your Edge case you know your scrape is only as good as you're programming it so in that case most likely my fault alright so there you go um so we're going to click on and then we're also going to have a span tag and for this span I'm just simply going to have an icon right now this icon is going to be a tick if the status is complete otherwise it will be a spinner which is going to be pending now the spinner that I'm going to be using is actually from a lovely Library called reactspring kit so we're going to install that right now react spin kit because we're going to start implementing this right so react spin kit over here let's go ahead and Pop That in so we're going to go ahead and do that over here so npm install react spin kit I don't need the mpm install I'm going to do yarn in the front ends we're going to say oops what the hell is that okay get rid of that oh God damn it no yeah there we go uh yawn uh don't boom right spring camp and then I'm going to import my spin kit like so pop that in here you wanna spin kit and as you can see this sometimes swaps up right if this pops up we have to add in the types and you're using yarn just your yarn add capital D for developer install types react spring kit otherwise just copy the one that they gave you for npm and that will get rid of that little error for you so you won't see that complaint anymore there you go it's gone and then what you want to do is simply add in a status pending check over here which we've already done sorry I've completely missed out so now I'm going to say if it's pending it's going to have a spinner show otherwise it's going to show a circle check icon which is going to be a solid variant okay now you can go to the reactspin kit website they show you a bunch of different examples here for different Spinners all that kind of stuff fade in none means it shows straight away and you can set a color for it as well alright so again you can just play around with this as much as you want but I'm going to be a margin left of two just to give a basic bit of styling and then for this overall div over here I'm going to give this a flex Flex column justify on the center axis right so let's go back over to our application oh yes look at that that's what I'm talking about um look at that scrape oh it looks good all right so the ones that are scraping are there and again those are pretty much dead links because I cut them off halfway so what we can actually do to keep it very clean is I'm going to delete all of my scrapers right now uh so my scraping instances and as you can see this will delete from there as well so now we should have nothing here so if I type in something like PlayStation 5 and enter we should see as it gets entered in like scraping information nice so I'm going to leave that on the side right now and as that goes ahead and gets ready that will turn to a tick once it's finished and the results will load in dynamically okay so things like that just beautiful to see whenever you delete everything by the way you are gonna see you have to reload it once just once so that way it goes ahead and Pops in here right as you can see here if I was to make this bigger yes that's looking pretty good guys I like it I like it very much okay so scraping results from Amazon let's go ahead and improve the UI on that as well so I think for that sense we're actually done oh another donation hey it's only big fan waiting for more F3 bills yes we have a lot more coming in so don't worry lots and lots of content to come your way um so once that's uh let that do his thing we're gonna go into where is it I've got so many random things running right now yeah there we go so you see that scraping um cancel that where's my and what I love about this remember it doesn't matter if you go away from the app just like I did now you see how it just picked up on it right so that's pretty cool and then there you go scripping right so what else do I need to do to be honest with you oh there we go boom look at that PlayStation 5 scrape it done looks clean that's what I'm talking about oh so nice right um You can obviously adjust this as much as you need to uh for this we actually don't want the x-axis there I don't know why there's such big padding here to be honest with you but if you go to sidebar we can fix that so overflow y overflow X should be um that's why we're seeing that okay so inside of my sidebar we can go ahead and do a scroll Auto right so that's happening because of that slide overhang there um I was using the new routing system yes until I just changed something last second um but for this part right here uh it's because it's overhanging and like a little bit um right let's do Flex rap um no that's not here thanks wrap um so I don't want to kind of I kind of don't want it to overflow here there we go so here you can fix it a bunch of different ways I'm trying to just think how I want to do it myself let's do for the sidebar row let's kind of condense it I guess we can do it you can honestly mess around with this as much as you want um here I can make it even on a small screen this padding of one on a medium screen and above padding of you know I know I personally don't like getting it too small to be honest um but yeah to be honest what you can do which might look really good is you can make these two elements actually Flex column on a small screen and then Flex row on a medium screen and above that will sort of correct this a little bit there you go you could do that um and then it will go into the full screen when you do it there that way now you can kind of you can mess around with that honestly I'm not gonna go too crazy with that um but yeah feel free to to sort of play around with this as much as you want and if you want to kind of change the order of that as well I'll show you a little trick you can actually make it so you can say the order minus two for example and you see how it goes to the top so I can make it like that for example for that and I can make it order one for medium screens and above so now it doesn't break the sort of screen size on that one but it still you know it still gets it right that's it's still still pretty good and then you can add a gap of like two between them and just little things like that it's kind of cool right margin after two we probably don't need here to be honest with you we can kind of leave it to do its thing I'm not a fan of why this is touching though my padding is all messed up and so to be honest with you this is like Minor Details you can actually go ahead and adjust this so you can actually inspect and see like there's just too much padding there to be honest with you so here you can kind of manipulate that as much as you want here you can manipulate that reduce your padding if you don't want it to people like use as much space and all that kind of stuff so I'm going to leave that in your hands that's kind of you know up to you oh you want to kind of do that um and plus I have the finished code for the actual full scraper uh available over on that demo in my proper GitHub repo I sent the propagator repo right now you've got this version right here um so yeah this is what should be I've kind of screwed up my styling to be honest with you let's just do another example here with the Xbox one let's go nearly uh terminal CS is pretty tight yeah it's so cool honestly someone says water break I will actually do that in a second um there we go so I mean it's looking pretty good yeah so that's pretty oh there you go there you go it's just an update for some reason that's a lot better yeah so scraping results from Amazon I actually want this to look a little bit cleaner as well so I want to have my results on this ID page sorry I definitely need a wall break I'm gonna add a spinner in and a delete button so yes we are actually going to add delete functionality as well so where we've got the pending here so I'm going to add a scraper in like so uh spinner sorry um the spinner I'm gonna pop in like here the delete button is actually fairly straightforward to be honest with you the delete button what we're going to essentially have is a handle delete function which is going to go ahead and call so I'm going to create a handle delete function like so this handle delete function simply uses the delete doc function where you need a router to go ahead and activate that so to be able to do what I need to do so what I'm going to do is I'm going to go ahead and pop in a router like so pop in the router with next navigation and then we're simply going to call this from a component now I'm going to create a reusable little snippet of jsx here so rather than having the same bit of code in a few different places I'm going to have a delete button which is simply a button in a uh like a jsx block and it's going to have the handle delete attached to the on click function and then we just render this where I need it so down under here I'm going to have the delete button and also I'm going to have the delete button underneath my Dev over here right so I'm gonna have a div or delete button as well right now you can see here we've got a delete button so if I was to go ahead and do this pow that's gone uh Playstation 5. let's just do something like uh MacBook and MacBook Pro just seems to be a bit weird let's just do something like Hello World right hello world and again that will pop up in a second so you know it's scraping really nice honestly pretty slick my animations and stuff my everything looks pretty good um that will go ahead and pop in so you see the delete works it deletes from it as we needed to um now what I want to do is go ahead and get a react hot toast notifications in the correct way right so react hot toast notifications is the next step so react what toast notifications another thing I feel like I'm missing something really important now but I think we're actually near the end of this build so I'm going to add in the reactant these are basically for these so I'm going to say like you know when we've got the different parts happening I actually am a big fan of these I love it so I'm going to do yarn and react toast I'm going to show you how to implement it inside of next year's 13. so that way you can you know make sure you use it in the correct way let's go and pop this back over there cool um so I'm gonna go ahead and do yawn and reactos oh there we go look at that boom so nice all right so hello world PlayStation 5. you see we click between them and it works awesome stuff right that's looking great now here what I want to do is I want to we've already installed the reactant noise notification um for the actually installing that what they ask you to do is they ask you to essentially just add it at the top level now you can't do this because it's a client-side component which means that we actually have to do a little bit of a step right we have to have something called a clamp provider now I'm going to show you how to do this inside of an xgs 13 and fix this pattern so in the layout.tsx what we do is we create something called a client provider right so essentially what a client provider is is we are going to wrap our app with it right so essentially it's going to look down this client provider boom and then we're going to basically pop this around our app okay something like that and then I'm going to create a client provider component so client provider.tsx like so rfce and then I'm going to go ahead and basically replace the signature so the top part this part with this so what we're saying here is essentially it just takes children as a prop the children type is of a react nodes so basically it's just saying it can wrap a few things then it's going to be a fragment so we don't want it to affect any styling so I basically want it to be like an invisible fragment that's just a wrapper and then I'm going to add in the toaster right so this is where you can add in all of the things like you know if you had like redox or any of that stuff and then render the children around it right and then what you can say is that this should use a client right now what you're essentially doing is you're like even this works really well for that react context and all that good stuff as well so now if I show you the layout right so here for example and I import my client provider you see all of these things are still being rendered in um return type is void it's not a jsx element um so I've got a little silly mistake here why is that um let's have a look so export default function toaster child client provider components client provider um let's have a look I'm provider okay so I made a silly mistake here so what about export default function client provider [Music] okay so I'm gonna slowly go ahead and just check why I've not done correctly so that's the same my signature is the same oh God damn it I'm not returning yes rayon thank you so much I need to return yeah so this is a Sim mistake don't do that all right so I'm ready you need to return that's why okay then we don't have the error so now what we're doing is these will still actually render a server components inside that's completely good uh it's fine but now you can actually wrap your app with things that you might need to have like client stuff for right so that clients um interaction with so now you can see that's looking pretty good um something's bothering me with that that's not looking the way I want it to look but it's fine for now oh God my LCD kicks in um little bits of padding are off but check out the propaganda report if you really want to get it nailed in that's fine all right now let's get the toaster notification added in so reason why toasters are really important is it's more of a UI ux perspective you want the user to understand that something is happening when they click it right so that's my reasoning for this um so we're gonna go to the header.tsx over here yep and we're gonna go into this and right here is where we want it to happen so inside of my header.tsx what I'm going to do is I'm going to say that we're gonna basically create a notification [Music] at the top here so this is gonna be right at the top yeah so we're gonna say toast don't know toaster loading so here so what we're doing is this will actually make a toaster pop up and it's going to say starting a scraper for the whatever input you put in and then we get a reference to it that's what we get returned back okay now at this point what we can do is we can actually go ahead and either trigger a success and replace that toaster or we can trigger a failure and replace that telescope with whatever happens right so what I'm going to do is on the error it's very easy I just simply go into the catch block and I say uh replace the this ID toaster so if we pass in our notification reference whoops something went wrong very easy okay same for the uh response so over here once it's gone ahead and we get the collection so once we basically put in a pending State and if we know that it's working we then say scraper started successfully so now the user knows exactly what's happening on their side of the the page right so let's see if it works so let's go ahead and type in something like testing hit this starting a scraper for testing and as you can see boom oh nice like it's scraping results from Amazon and now you can see and what I love about this guys is you can actually just go ahead and Brew it like literally start as many as you want so we can say Xbox One right starting a scrape effects one and again what's so beautiful guys I can refresh the page I can go away from this I can you know do whatever I want to do because these are not dependent on me being there these are dependent on this architecture happening which means that even if the client was to completely disconnect this is still going to happen and it's still going to populate the database which means when the client comes back and re-establishes the connection it's still going to go ahead and paint out the most up-to-date relevant information right so once Firebase is been updated that real-time connection is all that needs for the client to then pick it up right so as you can see this will just pop in when they're ready so this is clean this is nice right and let me know right now if you enjoy that and you think that that is off that is clean right um so that's kind of done and as you'll see like shortly once those scrapers are finished they will just simply pop up with little ticks and they'll do their thing right and this is what you kind of want with something that could be a bit more time consuming or like uh like in any essence you want your UI to represent or clearly show the user what is happening so that way they understand that okay I you know I'm not just sitting here thinking nothing's happening is actually doing something behind the scenes now okay so at this point I think we are basically done I had in my head something that needed to be done that I've completely just completely forgotten about but uh it needs to be done and what was it it was let's have a look at this build and let's have a look at my build that was finished here so this is all done all right before this is done um I think it's good Joe says man and is anyone working nextges new app directory yes this is the new app directory uh right now that we're using um okay I think what we're gonna do is we're going to deploy firstly uh the we're going to deploy our back end right so first things first let's deploy this back in so right now we're using engrock which is a temporary development solution right I don't want to do that I want to use a permanent backend so in this case I'm going to go ahead and well if I cut it right now it's going to kind of ruin this flow so what I can do is I can start another terminal here and do the following I can say um Firebase deploy um dash dash only functions and what this will do is it will go ahead and it will build my application so we'll build this out and then it will deploy my function to the cloud so let's go ahead and see if that works so you can see deploying running command it does a build it does a typescript check to see if everything's right and then this will go ahead and run the build scripts so now what this is doing is it will enable any apis that need to be enabled and then it will begin at the deployment process and it will give us back a URL can anyone guess what the next step is right once we've gone ahead and got this back we need to replace it as the web hook URL remember right now this this URL that we're using right here is the one that we're engrocked right so it's our Local Host we engrocked it through a tunnel and then we're using that one so if the minute I disconnect my engrock it's going to die in my web hook right we don't want that to happen we want to have a permanent one um function deployer arrows no okay something went wrong let's have a look what happened so third create function third create function function deployed errors with the following functions okay um can it tell me what the error was or not unscraper complete okay let's try again and uh okay so these are running if we check our build at the back oh there you go that's how we're still doing it so you can always double check the progress right now I have a few overhanging ones so I'm gonna do I'm just gonna do a little bit of a clean up operation right now just to kind of make things a bit cleaner I'm going to cancel them manually and then do things because right now where I've been overloading it I think I've kind of screwed something up that's mine that's my fault to be honest with you so in this case let's go over to I'm gonna just do a little bit of a clean up right now two seconds there we go okay awesome so at this point what we can do is go over to my deployment so we've got an error with our deployment so check the Firebase debug log let's have a look what's going on so what's the issue here there is an error deploying functions 403 unable to retrieve bright data ensure the cloud functions can is offered to addition's permissions you can add the permission by granting the row registry reader right patch create function unscript complete unable to representative locations permission denied okay so that's a fast I've not seen that one before variables so I've got my key that gets passed through my Firebase config got passed through um oh yeah five oh 750 likes let's go guys so I've got forbidden error this is interesting um right there YouTube on the back end let's have a look let's go into our Firebase and see what's happening so functions right see if I was tools if I was in it Firebase deploy which is fine all right so I didn't run into this the first time I think honestly my demo gods are just against me right now but you will be able to deploy this I promise you'll be able to deploy this um I've done this literally build a few times I even did it live on a coaching call and I didn't run into this so I think it's just a bit of a one-off issue right now but so let's just have another look so we've got my remote control HBO treatment let's go ahead and just see what that's about I've never seen that actually before to be honest with you so no idea what that is let's see if we can Google it see what's happening okay yeah so that's this bit of a open problem enable in the Google Cloud I think to be honest with you something wasn't enabled properly that's what I have a feeling on to Fat registry including enable go to Project selector let's have a look [Music] Google Cloud console let's have a look I need to find that one so uh there's not this one I need to go to here why they about so this is interesting because I don't have the build that I just created this is not the oh access four hours ago yeah this is not the one this is not the this is not the cloud function that I had set up so this is interesting so right now this is probably why I'm experiencing this issue because it hasn't actually set it up correctly I don't think let's have a look uh I'm gonna try something cheeky here I don't think it's gonna work but that's going to change the url not forget remember let's try one more time if it doesn't work that's all good um we can figure out so I don't think it turned on see required API is enabled so it has done it I'm not quite sure why that's um issue being an issue right now and yes I completely agree with you guys so we've got a thing here saying a comment saying there are many dependencies things to get updated and change Always new bugs 100 this happens a lot and this is completely normal yeah so don't freak out if you run into errors bugs like this happens to me like a billion times a day trust me it's completely normal this is this is a completely normal thing to be happening um what I would recommend is you go ahead and uh definitely the GitHub repo has perfect code in it um so you can definitely check that out if you want to I will show you how to deploy it to the cell as well so let's go ahead and do that as well right now so while that's trying to deploy I think this might work now to be honest with you uh I think it would just hadn't activated a correct thing on its side but while that's happening let's deploy the cell right so while this app is pretty much in this ready State we're going to go ahead and do the cell so all you need to do install the cell CLI tools and I highly recommend you check out my video on YouTube about how to deploy employ any next.js app from the Versace Li it's going to be linked over here in the description of what the hell oh my God Jay did you see what is that 150 dollars because I'm a big fan of you from Taiwan my friend like Anime May I provide the web next you built as a gift for him we love you we have to find the web next you build phones I I'm not sure what you mean but thank you so much that's crazy dude nt150 uh that's huge thank you so much for the donation man crazy oh there we go guys it worked so it was just a delay okay thank God I was thinking about I just I didn't know what was happening right so look at that there we go it did work it did work right so it just took a little bit of patience for it to activate and the reason why I knew it because it said required API this one exactly is enabled so it just took a little bit of time to propagate I guess but what you want to do is grab that URL right the deployed URL head over to your bright data so let's go to Bright data right now like here yep and then I want you to go to your delivery preferences um pop in your brand new and this one is always live remember so this is the missing piece of the puzzle here so now we've got our complete web hook which is always live awesome stuff let's go ahead and click update yes yes that's perfect update nice that's done and now what we can do is we can go to statistics I believe yeah I canceled a lot of these are running um because we were testing a few things out quite heavily uh now that's good what I want to do is essentially it's faster than Firebase so now I want to deploy this to the cell that's the next step so naturally this has got environment variables right so we've got a key here and so forth yes I'm showing it I don't care for now all right so I'm going to do I'm going to embattled it anyway so I'm going to go ahead and copy this key just for reference right and I'm going to type in the cell the cell that's all I'm typing in is easy set up and deploy yep so click enter which scope you want to deploy to I'm logged into the cell so I'm actually going to go ahead and do it and by the way guys if you if you are going to sign up to the cell please definitely check out the second link in the description it is a versa affiliate link so if you sign up with that link it will actually support the papa fam whenever you decide to go to a pro member on the cell so it would really mean the world if you actually use the second link in the description to sign up to the cell it's literally the same as you doing it any other way but it just supports the bubble farm so I appreciate it if you do second link in the description for when you sign up with for sale yeah so go ahead and do this link to an existing project nope we're going to do a new one what's your project name I'm happy with the default code is located in this directory correct and this will actually bug out at this point the reason why is it will work here so one more nope I don't want to modify these settings so it won't deploy right so here I want you to click on inspect control click open now at this point your you haven't got your environment variable set up right so what I want you to do is go into your environment uh local file grab this copy paste it and then go over here to your your Bright Day scraper go to settings and go to environment variables and paste here so control command V and now you've got your paste to Google your production preview development whatever environment you're doing I'm just going to push to all save and then what I want you to do is go back to your code I want you to control C cut the build okay in fact just to ensure that you've actually cut it go to deployments and you'll see it's still running you can cancel that deployment because that hasn't got the environment variable which means it's going to die on you and you can do it from the CLI I have actually shown you that as well okay um thank you so much um for dropping that in the the link in description all right so now we're going to go ahead and do um the cell again so for sale and that will actually go ahead and redeploy and the reason why I actually do recommend you do it through the CLI um there's two approaches you can do it I would recommend you do connect it to GitHub because that way you're one you're pushing your code to GitHub then it's going to go ahead and make sure it does it like it will redeploy every time you push which is kind of clean it's like Ci approach but this is actually also cool when you deploy with the facility Li it's very quick right um and you can actually do this out environment pull pull the environment variables down that kind of stuff which helps out in the team sense right Joe says dumb boss I appreciate you guys thank you so much remember make sure you definitely use that for sale link second link in the description helps us out uh I appreciate it yeah um so in this case and if you even if you have an account right now just click on that link go through it it will help the pop Fam I'm just being open with you all right um it's awesome new program they've launched so in this case this will build out the deployment so in this case uh on map it dependencies oh all right so let that do its thing now what's gonna happen is this will deploy we have now set up our bright data backend to have a delivery preference towards the brand new web hook so essentially now we're deploying our client to production so that way it's going to be on a real URL bright data is all set up it's working we have our API key and we'll be able to push requests from the new deployed client to our bright data platform that's going to then hit our font Cloud function which is deployed on Firebase which will hit our Firebase database and then this will have a real-time connection with our client whoever is checking in and yeah you'll be able to see your stuff okay so let's go ahead and see for ourselves once this is deployed but if this is done guys I want to like this is finish strong and finish with 800 likes at least and if you're watching the replay right now get this video over a thousand and just keep on going right so this is ready let's go ahead and see so Amazon web scraper let's go ahead and see and do I see okay awesome I see Hello World I see PlayStation 5 and as you can see I can click into that and you can see I see my URL or some stuff let's go ahead and type in something like uh testing and starting a scraper for testing nice nice and there we go scraping information from Amazon all right that's good it's good uh let's go get the music up let me see what the music's about I think some upbeat stuff what's my it's breaking to us yeah North Korean says anything thank you fun completely soon wonderful video congratulations thank you so much um says hello pop fam it's uh me so Mike from Poland what's up glad to see you're here and finally I can learn more with you awesome stuff thank you for joining in as well um let's see if they actually activated what we wanted it to activate so over on bright data let's go into our scraper statistics and you can see it's begun scraping it found the records guys it found the records this will populate in just a second if it does oh my God this we're gonna lose our mind right now oh this means that we're gonna also test our web hook because that means it worked but the web Hook is about to get hit as well right so this will hit the web Hook Once it's done so it's finalizing the call someone just went ahead and did Xbox okay so oh damn it oh damn it now everyone's gonna go on this bloody thing all right so someone's gonna start scraping oh God I hope it doesn't come on bad I'm gonna I'm gonna try and hide it if someone does anything don't use that link please just one second okay I'm gonna have to re-invalidate my key but let's see but then it's found that we just needs to wrap up the web hook call and then these will pop in and then we'll get done Rohan mundry says much needed thank you sonny I appreciate you thank you for tuning in bro in this case it's just taking a little time to wrap up sometimes this can happen with web hooks it can actually take a little bit of time sometimes for it to actually go ahead and kick in but the benefit is that you actually guarantee that it's going to go ahead and do it right so while this is doing its thing it's actually found the records already so it just needs to go ahead and deploy it to be honest with you it could be a problem with my um you are oh no no no it did it it did it oh there we go that's what I'm talking about yes guys it did it that is incredible see the top one done if I found the video the second one was done as well it's just wrapping up the the job that it's 100 done it's found it that will hit the web hook shortly and that will be done as well amazing stuff crazy absolutely crazy I can see people with chucking in things right now so I'm gonna go ahead and just uh be careful with that now so I'm gonna go ahead and show the original deployment because I can see people are starting to scrape and I just don't trust you guys to be honest with you uh when I'm live so I'm going to show you the final build in all of its Glory but that was absolutely incredible guys that we actually I showed you how to go ahead and create a fully functional web script but deploy everything so this is the first one that I actually showed you where there's a local version so it's safe right um this is crazy I probably says the feeling when the build is working well I know it's crazy so as you can see the scrapes from Amazon were able to delete web to create new ones we have react hot toast notifications you guys learn how to interact with web hooks you learn how to deploy your own cloud functions you learn how to use nexjs 13.2 and yes we will conquer the new root.ts file structure I tried to do it live right now but I didn't want to spend too long I make this video tedious for anyone who's watching it back so I will conquer it I'll make a video on it you guys will learn it and we'll make some more Banger videos as always and remember if you aren't already and you haven't already checked it out make sure you sign up to Bright data use the link in the description the first link gets you 15 free credits which is more than enough to get this build done to get loads of stuff happening we are five likes away from 800 let's smash that before we go ahead remember this is an amazing award-winning proxy Network's powerful powerful web scrapers the code for the web scraper web scraper start a template for Amazon is the third link in the description so don't forget to check that out right and remember if you are finding any of this stuff quite tricky or you know you want to get it really ahead of the game with your coding knowledge feel free to check us out at papareact.com and join zero to full stack hero we have incredible members just give this video a watch you'll feel the love I promise you that like even if you don't start join just fill it out it's it's honestly more than a course it's a huge community of and a family of developers and we are upgrading this left right and center it's become incredible lately so go ahead check it out on the website the link is in the description and uh yeah I do massively appreciate every single one of you so thank you so much again for tuning in and I'm just trying to find my last bit of information I was trying to pull on the screen right now where is it wait where have I gone oh yeah there we go I can show this yeah so yeah final summary we have bright data which is pulling from Amazon in this demo so we literally were able to pull from this and remember just just understand the significance of what it's actually doing to be able to harness a huge network of proxies and IPS in this way literally by passing an interaction code passing code it wasn't that difficult to get that up right and that was a very simple example you can combine information from different websites have web hooks in for interacting have your own cloud function opinion all this stuff can happen and it has loads of things like it automatically retries if the scrape fails so this is It's remember this is more of a a realistic use case and you can do some really powerful things with this technology so definitely worth checking them out right so make sure you definitely do check out bright data um I can't recommend them enough it's been awesome working with them as well and as you saw today it's incredibly useful let me know if you want to see more content with right there they have awesome new products as well and we are going to be covering them in the upcoming videos so definitely stay tuned without further Ado it's your boy Papa react and we built out a sick application loading notification all this kind of good stuff uh and yeah we absolutely oh my God what a way to finish it 800 likes so that's what I'm talking about 800 likes um someone goes that's my first stream that I finished amazing self-repoint constant says send you an email today I hope you see it soon I appreciate you if anyone's in Dubai feel free to hook me up that's awesome we'll go ahead and go for a coffee and um yeah amazing stuff thank you so much guys for tuning in and as always you know there's only one way to wrap these sessions up I love it honestly I love coding with you guys I love debugging with you guys 800 likes oh man what a session thank you so much for everyone for tuning in I'll leave it here for now you guys can see it for yourself the code will be uploaded to the GitHub repo oh that's it I didn't add in the bloody sliders that's it it's fine it's in the GitHub repo I've done this into every other build it's very easy you just add a plug-in for the the sliders that's I knew it I knew there was something but yeah that's all I didn't add in the end but that's in the get our brutal it's very simple to do it's a Tailwind plug-in it's easy right so feel free to check it out it's a little challenge for you all right uh as always guys on the drop I'm gonna call it and I'm just reading the final little um messages right now coming in one says this is my third time seeing you in the live stream warp says well done sunny I appreciate you Patty thank you for tuning in and supporting always um hwb says win for the scraper is actually the scrape is awesome and uh yeah thank you so much guys for tuning in I will see you in the next video peace that's it Papa found way [Music]

Channel: Sonny Sangha

Views: 142,685

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: FJb8xOhX3ZE

Length: 209min 32sec (12572 seconds)

Published: Fri Mar 03 2023