React.js Stock Market Tracking App Tutorial - Connect with Stock API

hey guys welcome to this video and here I'm going to show you how you can create a chart with various different stocks well we have one stock here this is just the Amazon stock and I'm going to show you how you can create a chart that dynamically gets the data from the server we have a free API for the stock market server and we get this information apply it down the chart and right now as of July 16th Amazon stocks are worth a little over two thousand dollars so we can zoom in right click to zoom back out and this is for the last 100 days so it's about a little over a month over three months and we have if we look closer we have March 31st April 1st April 2nd April 3rd and it goes on and it's on a daily basis for the last hundred days so I'm going to basically go over how we can create this little application using react.js and the stock market API and if we go back to our code and I change it to for example Microsoft and refresh the page then Microsoft is about $140 as of today and it's been going up the last one a day so as well so the first thing we're going to do is we're going to go ahead and create a new react app so we're going to go over to our folder and say create react app and I'm going to say practice for cuz that's where the full dog folder I'll be creating this application it is and let's just wait for that to go forward okay so now our rack app is installed let's move into our folder of course I'm using vias code for my code editor or IDE in case you're wondering and yeah let's get started so the first thing I want to do is go open our soul source folder and I'm going to create MPM start which is going to refresh the screen on the right or I'll create a new bar new tab and I'm going to go to app dot GS and delete all this since we don't need any of it delete this too [Music] and then we're going to create a new component called stock I haven't created it yet but I will in a moment I'm just gonna put that right there go import stock from stock and create a new full file called stock GS import react from react then we're gonna create a component class call it stock extends react component and export default stock and we're gonna create a little vendor down here we turn and just a div with h1 saying stock create stock market and I sure why it's not showing up go to console log [Music] stock market there you go I add autosave also turn that back on the reason I had autosave off was because the API call only allows the free version only allows five eight K calls permitted and 500 API calls max per day so I didn't want to over overload the server actually I think I'm going to do the same thing right now because I'm not sure how many of it I have been using today so far and I don't want it to end abruptly mid tutorial so I'm going to go back to stock dot J s and first thing we want to do is we're going to create a constructor to store our states in so constructor prompts super props and this state stock chart X values and stock chart Y values this is for later when we are going to create our chart we need the X values in the Y value so we're going to store them in a separate arrays and we want to add them back together when we're using the potli chart system we're using so we're using two separate items here we're using the API call from the stock stock market API and very using a chart chart I could have used chart GS but I didn't like how the lines are not straight and cornered and there instead of kind of curvy which I don't want I think stock market try plots are more cornered so that's why I used plot Lee and says that's why I use this one it said and the way that it works is I have to have the X values and Y value separated so that's why I'm creating a state with x and y value separated so we'll be using this a little bit and when we have component did mount I want to run the fetch API to or a function that will fetch the information from the API so it's going to be called fetched on stock veg stock create that right here create the function and um there is an interesting thing that I want to point out actually I'll just go through the tutorial and then you'll you'll see what I mean later on so the first thing I want to do is if I want to say let I have to get the API key right so I have to go to so basically I go to Google calm cool calm then I go to free stock API and go to Alfred vanish and you go to get your free piq today I'm just going to create around the wonde online or donbot and then Simon's programming at gmail.com checkbox I'm not a robot get free API key and I already have it so I'm going to use this one right here and you feel free to use this one but I highly advised you getting your own because um if everyone uses this one it's gonna get crowded so I'm going to come back here and create a constant variable called API key and it makes it equal to this and let API call is equal to and we want to go to documentation and I think we are using daily adjusted time series using daily justice so I'm going to you can you can read it and detail into this but I'm just going to go ahead and copy if I click on that one first make sure I got the right one so it has the date and the opening price which is what we want to use so that's available and it's on a daily basis excluding the weekends so that seems to be working so I'm going to go ahead and copy this as reference backtick paste it in and the reason I'm using backticks is because I want to be able to copy in the API code right here darkly so an API key that makes a use of the variable right here quickly so that's all good that's good and then if we run this as an example want to go ahead and create a fetch statement like so then API call then function response returned the response in JSON format please then the next one we're going to fetch the data so function in data form this is just how you got its dude this is just ideal I'm not sure exactly how to explain the code but this is how you fetch it and this is where you fetch it in JSON form and then you get it in a data variable on the next then statement and then this one is a function so I do console.log data just to show you guys that this is working so right now we have we're searching for Microsoft stock variables it's adjusted on a daily basis so daily average output size I want it to be compact because I just want the compact information I think that's you know compact option compact and florists up to it yeah full if I do full it returns the last 20 years of historical data I don't want that I just want last hundred days so I'm going to type in Compaq there and if I console.log I get the time series and I have the last hundred days of data so for metadata it's a symbol Microsoft I'm going to change that to Amazon just for the fun of it so I'm going to see a leg stock symbol is equal to Amazon and then I'm going to change that - I was on or stock symbol [Music] now that that's refreshed has changed Amazon and I still have 100 point data system of the last hundred days or so slightly over last hundred days instance excluding weekends so now that we have the symbol I'm just going to X out of that extent out of this I can go ahead and close everything else out the next thing we want to do is we want to start putting it in the X values and the y value so we wanted to want to put it in here and here and we want to have if we want to have to be able to bind it from here to back outside here so what I'm going to do is it's not really binding but we have to get the right location so I'm going to create another constant here called pointer to this and it's going to point to this so what does that do if I console.log pointer to this what is this - if I go ahead and console.log inspect it brings back an object where we have the two state serious stock chart expose and stop to our y-values and now that we have access to those two states we can input values inside there but first we have to get the values so we're going to go ahead and down here we want to say 4 so right now when we go to time series we have the dates here and each date has open time your open time open time open time so 2019 - owed February 2nd 22nd that's the key and if we hover over it we have we have the tooltip come up that shows us the spaces of the time series daily in 2019 Oh 222 that's the amla that's the file path or the directory path that you have to go towards to get these individual points of data and because time serious daily has spaces in between and it's not all space is limited we're going to show you how to find go maneuver around the file path for that as well so we're going to go to four four variable key which is the date and data and we're going to say time series daily so for every single key in this so yeah so biscuit for every single keys of this day at this day at this day at this state the state to state this state every single key we're going to run this function stock chart and X values function push key and we haven't created this variable yet so I'm gonna go ahead and create this right over here and it's going to equal to empty variable and create one for the Y values so pushed key right there and then we're going to all stood for the stock chart y values and for the Y values I have to push something a little bit more detailed because we're not just pushing the key we have to push the actual value this time for the Y values the price more specifically so if I leave this open here so you can see that we are going to go towards will just not there down here we're going to call it data time series daily then key which is the date then we're going to go to oh it says 1 dot open specifically says 1 dot open if we go back here if we highlight highlight over it it says 1 dot open at the end so we have to do that 1 dot open to get this key so this this is the key right here this is the key so I have to use that specifically and then [Music] now that that is done so we can then set state we can check we can check if it did it correctly so I'm going to console.log stock chart X values and that should work console.log if I save that refresh so I think yeah so all all of the key values becomes the or the dates gets stored 100 point 100 point data cuz it gets stored into the X values the X value function right there so that's working so we can go ahead and count um comment that out and then we can say pointer to this sets date and then say stock chart X values just going to equal to stock chart X value function and same thing for the Y values I'm just going to change that to Y values and then down here we can access those states so it as a demo I'm just going to say p-value X X values this is equal to think this is how I access it whoops this state stock chart X values so we have all the X values and if I do the same thing for Y values I get the same thing the for Y value as well Y values just goes on horizontally I'm not sure why does that but that's the price of Amazon stock dating back to about a hundred days ago [Music] somes want to comment these out since we don't need those as well and then we are going to go ahead and type in in Google Jess motley this is the chart that we want to use and it kind of looks like this that's kind of how it looks like this is two different graphs put on the same two different graphs put on the same chart and I'm going to just go to react dot J's partly and go to the getup page and to install it whoops to install it I have to use this so I'm just going to open my command line and say NPM whoops open up a new command line NPM install react partly jeaious partly dot GS then while we're waiting for that to happen I'm just going to copy this to the top whoops top over here and then I'm going to copy the plot area to get the exact same one as the red one's going to delete this on to fly oops yep plot right now it's not gonna work just refreshing just give it a moment it's using my CPU or GPU I think I think it's using my GPU to calculate that I just heard my computer kind of running up a bit so if we refresh this there you go we have a small graph just gonna change this to 720 by 3 4 40 fresh that so we have ideal size and then I'm just going to delete this because this is the bar chart and we don't need the bar chart we only need the scatterplot chart and here I'm just gonna type in this Dave stock chart X values and this day star chart y values and safe and that's pretty much it so that's for the Amazon and then we can go back up top let's change to let's change it to Facebook with Facebook Facebook stock symbol so it's $203 Facebook stock symbol is FB so if we change that to FB it goes up to about $200 and it's pinned down so seems like all the data stack type the technology companies are kind of on an upswing for the past hundred days so if you did invest in all these companies about a hundred days ago you've gained about 20 percent of value overall it seems at least in facebook Microsoft and Amazon so congratulations if we've done that if you're just laying here for the if we just here for the learning code part and that's fine too and then yeah that's pretty much it so um you can do that and then going closer closer and see a day by day so this is pretty much for every single day then double right-click out so that's how you create a stock market tracker using the Alpha advantage I think I was off advantage API yeah off an alpha Vantage not off advantage off advantage API for the stock market system so I hope you guys enjoyed this enjoyed this tutorial and I will see you guys in the next video goodbye

Channel: Simon Suh

Views: 29,297

Rating: 4.9261994 out of 5

Keywords: react.js tutorial, react.js, react, reactjs, tutorial, stock, stock market, graph, alphavantage, alpha vantage, tracking, simon suh

Id: T26V1aSEtJE

Length: 26min 34sec (1594 seconds)

Published: Wed Jul 17 2019