Let's Build a STOCKS Price Tracker with React Native (step-by-step tutorial)

what's up noj developers welcome back to a new live stream today we're going to build a full stack stock tracker application where we will be able to search for different stock uh symbols track V prices and we're going to do that in Rec native Expo using graphql and IBM stepen the featur that our application is going to include by the end of this tutorial are going to be uh finding and viewing stock details and from for that we want to use uh real Market data by using an external API and we want to also see the stock performance on a graph today we're going to learn how to integrate charts and graph in Ro native and how we can map that progress and the performance of a stock on a graph we're also going to implement features like adding a stock to your favorite and for that we're going to learn more about databases how we can store information there so that you can take this project to the next level and adding even more custom features around uh Financial finances and stock tracking this is a great application uh to to learn more about re native learn more about full Stack mobile development because we're going to do everything in this single tutorial from the beginning all the way till we have a working application both on front end and the back end it's also great application a starting point if you are planning to build a financial application for example I'm going to use the feature that we're going to build today in my own application that I have on the market which is a finance application so yeah if you also are interested in that make sure to follow the tutorial till the end to learn more about this from the text tack uh on the front end we're going to use react native with Expo dk50 and of course Expo router for the navigation on the back end we're going to build a custom graphql API us using IBM stepen that is going to connect to different data sources on one hand it's going to connect with an external API that is going to provide us realtime data about stocks and on the other hand is going to connect with a custom uh pogress SQL database that we're going to deploy also today uh for managing custom features like saving to favorites or even tracking customly uh users portfolio this video is brought to you by IBM stepen and uh if you're not familiar with IBM stepen we've used in multiple projects and every time I have to build a graphql API I started with IBM stepen because it's really easy and uh simple to get started and all we have to do is run a single command line uh command and everything else is taken care by steps and you're going to see more about them in today's video where we will build our custom graphql uh AP and thank you very much staben for sponsoring this video before we start I want to uh mention that I have prepared the asset bundle as I usually do that will help you move along uh easier so make sure to download that by going to asset. notjust dodev stocks and uh after you go there um I will also have it somewhere uh let me check it yeah after you go V first of all there is a step stock application guide file that you're going to see uh in this uh asset bundle go ahead and open it up and we should open a stepbystep guide that will help you and you can use it as a to-do list to know like uh to to track your progress by building this application so uh it contains the user stories it contains the instructions on how to set up a project build the UI implement the charts build the API faga data and bonus uh chapter advance for custom database so uh make sure to to set it up we're going to follow it step by step and we're going to do everything together in this tutorial here I also have uh a a very short overview of the end result that we're going to have uh where is it here uh so on the home screen we're going to have a list of stocks we're also going to be able to sell search for custom uh symbols uh and after going to the details page we're going to query the data about it we're going to display more information here uh we have a lot of info that we can display on this screen so um this is not exactly how it is going to look at the end but a good overview of what we are going to have at the bottom we're going to have a chart to see the uh the time series and also we're going to be able to move from different time frames and B tab is going to be specific for the favorites where we will be able to favorite a stock by pressing the star button so that we can keep track of it so this is our application and um if you're ready let's get [Applause] [Music] started all right guys so let me know as usual where you are joining us from in the live chat I'm going to say hi to everyone in a moment but let's go Ahad head and start by initializing our uh Expo project again this is our first step in the guide we have to create an expo project and to do that I'm going to open up a terminal uh and from environment variable if you're just getting started with Expo you really don't have to have much installed on your environment to uh build this project because uh because of because of Expo so the only thing that you will need is going to be node with npx and that is going to be the minimum that you're going to need I'm going to show you in a moment what exactly we're going to do so I'm going to navigate to um to a folder where I keep all my projects let's do it like this this is 02 clear and let's go ahead and initialize a blank blank Expo project uh we're going to do that using npx command and we're going to use the create Expo up Tool uh and npx will check if you already have this uh tool installed it will use it from your uh from your cache if not it will go ahead and install it so that's why we don't really have to have anything install to get started I also like to add the at latest in order to take the latest version of create Expo application and let's give it our application the name stocks and uh we can go like this but I prefer to go with a template for this project and uh to do that we're going to do DT tubs let's choose the tabs template because it comes pre-installed with Expo router and it has already two tabs so it's going to save us a little bit of time uh for the configuration and for the setup um with the expense of having like some folders and files initially that I'm going to have to explain you like not to not to get confused by everything but we're going to take it step by step so uh while our application is being um uh initialized let me check the live chat how are you doing guys hey we have a new uh Channel member thank you very much current beer bus hello uh bus is saying your tutorial builds are really helpful get me into up development I'm really happy that uh you you found them valuable I appreciate that if you guys are on the your way of uh becoming a mobile developer developer if you're interested in Rec native and Expo make sure to subscribe to the channel because we have a lot of project build tutorials that can help you learn and master up development with these Technologies by building really fun projects so a subscribe will really help us uh reach more developers like you and yeah thank you very much hello uh Julio hello comedy Tech motivate uh sniper TI rat how are you doing guys bill from San Jose USA Eduardo from Brazil nice all right so uh if we look in our terminal we see that our project is ready uh it was initialized in a folder uh where we have it there so all I have to do is open it in Visual Studio code I will do that by running code and the name of a folder or you can simply open Visual Studio code manually and uh do open folder from V also you can use any other editor of your choice in my case that's Visual Studio code so here it is let me zoom in a bit so you can see it as well um before we jump into the folders and files uh I will open a terminal so let's go to the top terminal new terminal or use the shortcut and here let's run npm start to start the development server um in your case it shouldn't ask you because I already have another application going after the development server is started I'm going to press I uh as we can see here to open on iOS simulator but to open it on iOS simulator you need to be working on a m OS system and you need to have X code installed alternatively if you're working on Windows or um uh Linux you you will have the possibility to install an Android emulator using Android studio and you're going to be able to press a to open on Android this project is going to work both on IOS and Android so everything is going to work um even though I'm going to test mostly on iOS it should work everything the same on Android however uh this emulators and simulators they require some additional setup like X code and Android Studio if you don't have that uh on your machine that's not a problem there is an even easier option uh all you have to do if you if you don't have those download the expoo application on your physical device being Android or uh iOS from the market and after you install the application go ahead and scan Vis C code and the application will start on your physical device so you can continue building and testing it this way uh after it loads you should see the application that I have here on the right so we have two tabs the first one with some information we have a second Tab and on the first one we have even a button in the header that will open a model this is all that is included in the tabs template and if we have a look um at our um folder structure everything starts with a app directory this is the directory responsible for our uh navigation for our router and this is very this is specific for Expo router uh XO router is a file based navigation system it's uh it's a new way of handling routing in Expo and R native applications and I highly encourage you to to learn it if you haven't already all we have to do is for example Le create folders and tabs here and um folders and files and our screens are automatically created for us so if we look in the tabs uh directory we have here the index and that tab a file called two these are the two tabs that we see here by simply copy pasting the tab two to tab three we're going to see automatically a new tab appear in our bottom stack here so that's how simple it is to add a new screen to our application of course I'm going to delete it because I don't need it I just wanted to show you a quick overview and the benefit of exper router um there is another folder that we uh that we're going to work with this is the components that's where we will put our custom uh components that we want to reuse in our application so make sure that if we are building a screen that should go into the app directory if the the uh the component is not a screen it should go into the components folder um and that's it that's the most important stuff for this moment in the constants there are some colors but um we're going to learn about them as we go uh I think we can continue like this but I really like to uh so we have this one done we have import oh to to clean the clean up the template I really like to have everything in my application uh that is related to the source code in a folder called uh source so let's go ahead and create this uh folder in our project called SRC um because I want to to show you like some of the best practices that that is going to serve you well um in your career and in this SRC directory let's go ahead and move first of all the up directory this is our export router so this is the first one then we're going to move a components make sure to drop it under the source not under the app but under the source move yes and also let's move the constants here so at the moment in our sour directory we should have up components and constants this is the source code of our application everything else uh is configuration assets and so on uh we're going to see that our project already stopped working uh and that's because some of our relative Puffs uh that we have created uh they they are broken for example the first one we're going to find in the TS config in the TS config we have here a puff alas which helps us import uh easier components for example if I look into the application index we see that that we are importing the edit screen info which is a custom component by doing add source and I think in this situation for me it will is it is going to work um so yeah I'm going to leave it like this anyway um we let let's go ahead and um do the following let's restart our development server for the new uh location of up directory to take effect for that open the terminal and press contrl C to stop the existing server and now let's do it let's run npm start again but this time we're going to add D- space-- clear to clear the Metro bundler this will make sure to to clear the cache so that the new folder structure take effect now if I press I to run on iOS here if I press reload we will see an error but we're going to fix that together the error that I see is related to the relative Puffs to the font to assets font that is coming from our application underscore layout and if you scroll down a bit you should see the relative paff to the assets the problem is that we moved the application and resore directory so now our assets are two directories up so what I'm going to do is instead of going once in The Parent Directory I'm going to go twice in The Parent Directory and then and only then I'm going to go into the Assets Now if I'm going to Simply reload the application without having to restart anything we should see everything working as it was working before if you still have any issues then make sure that uh where we import with at in my case it automatically rename from at to at source so this was done for me automatically if it hasn't automatically rename it and if it remained like this you'll be you will see some syntax error like this so I will go into these files with uh show you the error and add the dash Source or even a better one but um in in your case like if that happens if it didn't rename I would go ahead in the TS config and here add at- source for the puff Alas and that would mean that every time we're going to use at/ it's going to look into the source directory I'm not going to do that uh for this project if it was renamed and for me it was renamed so I think it's going to be even easier to to leave it like this because now for me everything is working and I hope for you as well hopefully I didn't confuse you too much right now with these changes but it's really going to to help us keep um our code structured and everything in the same place so yeah that was our uh cleaning up a little bit our um our files we are actually not done with cleaning yet I really want to to make sure to to clean like the things that we really don't need uh because they they we make things harder to work with I'm going to start with going into the tabs index and this is the file that is responsible for tab one as you can see here it says tab one so if I'm going to say hello it will automatically update it here hello very weird hello that I put here anyway what I want to do here is I want to remove all the content inside this container and because we removed all the content I will also remove the styles for title and separator and maybe even this align items and justify content and leave only a view with that has the styles of a container we should see a dark screen but that's good because that's going to be the where we will start working from the import I can remove a edit screen info component and I can also remove a text but most probably we're going to need it uh later so let's leave it like here for a moment let's do the same cleaning in the tab two so let's go to tab two and remove these three components inside our container and the title and separator Styles together with a line items and justify content uh let's also remove import of edit screen info and if we do um search edit screen info we will see that we still have imported it in the model so let's go and clean up the model as well I'm going to go into the application model file here we again see the title we see the view and edit screen info let's delete them I will leave the status bar for a moment actually I will leave it uh I will only delete the Styles and this Flex align and so one and the import of the edit screen info now if I will do a search in the whole directory for edit screen info we see that we never use this edit screen info uh component in our application so we can safely go ahead and remove it from the components folder this way we're going to keep our project cleaner now our application should work as it was working before because that file is no longer used uh I think the external link as well we're not using so if I do a search over the whole application for external link yes it's only declared CED here so unless you're going to need some external links or maybe maybe we're going to need external link ah let's leave it there and everything else I will leave it like this perfect let's go ahead and uh in that terminal I'm going to uh do a commit get OD get commit uh in init up and clean template that's G status what's going G status yeah perfect um you're going to have access to the source code as well so you can check different commits that we're going to do today so that's why in a lot of cases I like to start uh from a clean template and add only the things that I need but now with a little bit of cleaning we have a pretty good base to get started and before we move on I want to also import the data from the asset bundle into our assets so after you downloaded the asset bundle here besides the guide you're also going to see this data folder let's go ahead and simply drag and drop the data folder under our assets we're going to need this data uh later uh when we will start building the UI because it contains some uh some default information or some dummy data uh that we can use to build our UI and not think about the API and this way we can start focusing on the UI and later focusing on the API so uh now that we have our data I'm going to go ahead and do a commit and then we can move on come on get add and dami data perfect so how are you doing guys uh following along hello from Italy Hello Johnny hello Jack super excited for this one reelio how are you doing yes so now that we have our uh template uh clean let's go ahead and see what is going to be our next step the next step is going to be to start rendering a list of stocks so rendering a list of stocks we're going to do that on the home screen on the first tub and they should look something like this uh the name of the the symbol the name and some information about the price and how much it changed like where the change let's let's do that uh and we're going to do that together uh the data that we are going to use to render a list of stocks is going to come from the data top five this data top five contains it's not even an array it's an object with different tickers with different symbols for example IBM with uh this name uh with this data about like the price at the lowest uh at the highest in this period at the close uh and all of this information like for other tickers as well so what I'm going to do is let's go ahead in our application tubs and let's go into the index the index is our uh is our H tab one here that we see if you want to rename it from tab one to something else what we can do is we can use the stack imported from export router stack. screen close this tag right away and by sending here some options that are coming from react navigation we can change the title so the title can be stocks this way at the top we see stocks at the bottom in the tab we also see stocks another way would be to look into the layout because in this lay out is where we configure our tab layout our tab bar so instead of here we see tab one we can rename it right away here stocks and for the top bar icon uh let's see where is it coming from toab bar icon is a font awesome item so uh I don't know dollar do you have something like this yes it has dollar okay that's nice we can we can start with a dollar sign here so going back to to our index here is where we are going to render our stock details for example by simply rendering a text here hello world we're going to see it at the top hello world okay let's go ahead and first um usually the way I do it is first I build one small component for example I start by building one component that renders um a stock information or a one row and then I put them in a flat list now I want to start by building a very simple flat list and after that building the the details of one um stock list item if you're interested in uh more and learning more about flatlist I have uh previous wednes uh Tuesday we have done a very in-depth tutorial about flat lists so what I'm going to do here is I'm going to import a flat list from R native flatlist and a flat list a flat list needs some data so the data that we're going to use is going to come from our assets data and here uh top five yes the top five so let's import import top five from uh add assets data and then top five Json if I'm going to go ahead and start by console logging the top five or in a way you you can see this even in the Json file the top five uh Json is not an array but flat lists work with an array so what I can do is I can transform the this different uh values of our object I can transform them to an array by simply doing uh here const stocks equal to object. values and by passing here an object for example top five is an object top five is an object uh object do values is going to return us an array that contains our um our values of this object so now if I'm going to do console log stocks we're going to see that it in fact is an array and it contains our values that are information about a stock price so that means that we can use this array in a flat list to to render the list of our stocks so let's go ahead and start by rendering a flat list and a flat list requires two uh has two required properties one of them is the data which should be uh an array so we're going to use our stocks that's why we transformed it to an array using objects object do values and it also has a render item function that will that is a function which will be called for every single item in this array and we need to to to tell uh flat list how do we want to render one item so what I'm going to do is I will render a hello world text for every item from our stock survey what we should see on the screen is one 2 3 4 five hello world because that's how many items we have in our top five Json If instead of hello world I'm going to dynamically take the item. name in this situation we should see the name of the different stocks that we have here starting with IBM Apple Mata Amazon and alphabet so that's the simplest way that we can you that we can use a flat list and again if you're interested uh check out the tuto if you're interested to learn more about the uh the flat lists if you go to our Channel under the live there is this infinite scroll list so it teaches a lot in depth about how to work and how to uh to build infin scrollable flat lists so check it out if the flat list is still something that you need help with now that we have this flat list that can render a simple text uh for every item what I want to do is I want to extract this part of rendering one line to a custom component to do that let's go ahead and start by creating a a new component in our components folder and I'm going to call it I'm going to create a new file and I'm going to call it stocklist item. TSX Uh custom component is nothing more than a function so it can be a um a function declare with a function keyword or even an arrow function it doesn't really matter how it's mostly preferences so I'm going to start with function called stocklist item and and what makes this uh component is the fact that it should return some GSX it should return some something to render on the screen for example in this case I can start again from hello world and uh we depend on this text component so let's go ahead and import text we can either import it from react native but this uh template that we are this template of Expo that we are using it already contains uh a file called fed which extends our text our usual text component from react native it extends it and it it adds a color based on the color scheme so it's going to work both for dark mode and light mode you don't have to understand a lot of things from here uh the text coming from themed file is going to work in a similar way as the normal text the only difference is that the color will change depending on the color scheme so the last thing uh what we have to do here is we need to export uh default V function in order to be able to import it in other parts of our application and use it to render something on the screen we need this uh stock list item in our application TBS index inside the flat list so to use it let's first import the stock list item from our source component stock list item and let's render it instead of a text I will render it like this as a self-closing tag because it doesn't need any children so right away we see Hello World hello world hello world hello world well hello world is not something that we want to render we need some information about the item that we are currently rendering so what I'm going to do is I'm going to pass to the stock list item through properties a property called stock and the value of this stock is going to come from the item because we know that this item contains information it's an object containing information about one specific item that is being rendered and it contains the symbol name and so on so by sending this item to our stock list item through the stock property we can go into our stock list item and we can receive it as a property here by destructuring it right away with the same name we name the stock we're going to destructure it with a name stock and now if I'm going to do here instead of hello world stock. name we should see back the names of our um of our stocks and not only the names here we have access to everything that the stock has like symbol uh here it is the closing price close like this and so on so that means that here uh is the component in this component is responsible for rendering one row or one item in a list now we can focus only on this and on the right we're going to see uh how we build it we're going to start by structuring it and then we're going to style it together at this moment we still see uh the typescript is not very happy that we didn't specify what type should our properties of stock list item should be to specify this type we will start by creating a type here and to create the type for the properties of a component I like to call it with the same name as a component and it's allowed because one is a type and one is a function so stop stock list item will have the next properties one of them is going to be stock for example and what values will it have well the values is going to be stock for example not like this but a type called stock we don't have yet defined a type called stock so we can Define it here type stock uh is going to have for example name of type string uh I should do equal I forgot equal here and equal here as well so now we Define our stock type we Define our stock list item properties type well the last step is to take this property types and to put here double dots and say that hey this object is of type stock list item which means that it contains a stock and a stock contains a name so typescript here complains that there is no close but there will be a name because we said that hey there is a name of type string so we're going to add here in this stock type the other fields that we're going to need from the whole object here in a best way like we could add everything but we don't need at the moment everything what we're going to need is the symbol the name the clo and the percent and change as we can see the close and percent and change even though they are numbers in the API they will be returned as strings so let's go to our stock list item here and save it besides the name we're going to have a symbol also of type string we're going to have a close also of type string and we're going to have a percentage change also of type string so now we have access to the name we have access to the uh symbol we have access to the close and we have access to the percentage change uh we see that it's not there so that most probably means that I made a percent change I made a typo so it should be percent change and let's change here percent change yes it is perfect um let's go ahead one step back in our tabs index and I want to to add a little bit of space between the items in our flat list one way would be to add padding to our stock list item but a better way would be adding a property gap on the flat list that will add this gap between the items so I'm going to put the data the render item from a new line like this and I will add a new property to the flat list called content container style this are the style that is going to be applied on the container that Wubs around our stock list items our items so by adding here a gap 10 we are adding spaces between items so 20 is going to add it like this so I might start with a gap 20 and then later adjust it the way we need I also on the content container style I can add here a ping 10 and this will add ping around our flat list perfect that now that we have a little bit of spacing it's going to be clear more clear which are the different items so let's go to the stock list item and start building this component we have created and set up the whole structure of a component now it's time to build them and render the component as we can see here in the user interface for that um let's go ahead and start by rendering by by defining the structure rendering things and then uh slowly adding Styles I'm going to start with the left column where we have the symbol with blue and below it the name the name of um of the symbol so let's start with stock. symbol this is IBM Apple mat and so on and below it we need to to have another text that contains the name um sometimes you might think that hey by simply adding here another text with stock do stock. name that's how it should work but the problem is that the rule of fum is a component should render only one parent component it can in this moment it renders two part two components it renders a text and a text what we should do in this case is we should put them inside a a view so we will wub them in a view I will close the view at the end and we need to import The View also from the themed uh file so now we the return statement contains only one item and that item has inside it multiple of them so it's the rule of um is return should return only one single item because if I will want another view here we are back to to to the same um issue that now it has two views so make sure to to wrap it in a view because now this view can can serve as our container right so let's go ahead and play a little bit with the Styles um to style a component I'm going to start with a symbol because this one we want to make it a little bit um uh we we want to make it bold and uh a little the the font size bigger so I'm going to start with style here and we can style a component using inline Styles like this simply sending font size 20 will increase the font size of our our symbol we can also do font weight bold and now that the text will be bold this is a way to style it and in a lot of cases it's perfectly fine but I recommend you to separate the rendering logic from The Styling logic to do that we're going to import the Styles shed style shet from react native below the component we are going to Define an object called Styles and we're going to create it using stylesheet doc create Styles sheet.cc create is going to be an object where we will keep different styles for different components here we name them the way we want for example because this one is going to be the styles for a symbol let's actually call it symbol and it should be an object where we will uh write our Styles we already have the styles for our symbol so I can copy the font size and font weight from here to our Styles and to access it I'm going to remove a object that uh that is the inline Styles and make sure pay attention at how many like cly brackets we have here now we have two sets of cly brackets because one of them is for the opening like the JavaScript portal and the other one is defining the object of the style I'm going to remove a whole object of a style leaving only one pair of cly brackets and I'm going to access the Styles dot symbol just like that we have styles but now they are not in line they are separate the same way we can add styles for container and the styles for container we're going to apply to the parent component here styles. container perfect I'm not sure what styles we're going to need there maybe we're going to need at the moment we don't so let's just continue for the color of a symbol we can go ahead and color it with uh color blue uh but a better way is to reuse colors um and have like tokenized colors for example the template that we are using already have a constants with a file called colors this file is tokenizing the colors in a way that uh we Define all our colors that we are going to use in the project in a single file and then we are simply referencing them from here this way our colors will be consistent in every screen and whenever we will have to change them we are going to uh be able to do that easily uh by yeah like by coming here and changing it from tint color from this light blue to to a darker blue so to use them what I'm going to do in the stock list item I can yeah import colors so for the symbol I'm going to use instead of hard coding the blue here I'm going to use colors dot we have dark and light uh colors so I'm going to go with light dot tint this is going to be the the blue that we Define where in the colors I don't really like this blue and I'm going to take the one that I chose here um how to take it better hopefully it's this one so let's go into the colors and change here the blue that we are using hope it's this one still doesn't I don't like it I think I was taking it from Yahoo finances did I I was looking for here and I think I think I took it oh come on so let's check this one yeah that's probably better um so I'm going to look how it works on our devices as well everything is is nice for V name name I'm going to Simply say uh color do gray okay that's nice and I'm changing from dark to to white with command shift a and this works on the simulator on the iOS emulator I'm not sure how this works on Android device so so far our application supports both dark mode and and light mode okay guys now that we have uh in a way completed the the the left part uh there is also this icon right so the icon I'm going to use it I'm by check uh searching Expo Vector icons and Expo Vector icons is um a library that contains a lot of Icon families so I can search here for a star and I'm going to take the first one from end Des design it shows us how to import it and how to use it let's take the usage of end design and let's render it right after the symbol here we will also have to make sure to import and design from Vector icons at the top and just like that we have a icon but we don't see it because it has the color black so if it's on the white mode it should be visible there I'm going to go ahead and do a color gray and this will work both on light and dark mode for the size I'm going to go with the same size as here so maybe I'm going to go with 16 for both or 18 not don't remember which I use but I will use the same size for for the symbol and here and that's it later on I'm only going to change the name when we will actually press the sign button from Star o to start to make it highlighted and if in your case it puts it from from two different lines uh and you cannot add it in the same line with a space between them sometimes the the editor will will split them into two lines and you you lose this spacing between them you can add here manually a space by opening the brackets and adding a string with a space like this in this situation you can add even more spaces like this so you can manage like the spacing with simple white spaces and not having to do like anything with pting and so one so um our left side of the item is complete now we need to display something on the right side and there is where we display the uh the the price and the the change in percentage so let's go ahead and start by simp rendering two text box here where we will render the stock. price not the price but stock. close this is the price at the clo closing and another one for stock. percentage change okay we see them displayed on the screen but they are right below the other two text that we have here what we intend to do is we tend to have in a way two columns one on the left that has the name and the symbol and on the right which has information about the prices to do that we are going to actually split them into two columns and we're going to create a column by putting them inside a view we're going to group the first two texts inside another view like this and we're going to group with second two texts in another view that will be the right container so let's close it here so now we see here uh left container and here the right container a view with two text A View with two text it it's not displayed in the same row yet because to put two components in the same Row the the parent component which in our case is styles. container should uh specify the flex Direction row by default the flex direction is column but if we say Flex Direction row they will put into the same row now if we want uh the first view to expand to take the the full amount of space and push the right container to the right what we can do is we can give it a style and simp say that it should have a flex one a flex one will tell this view hey take all the available space that you have in your parent container and only leave enough space for the other uh children for the other siblings for example for the right container leave enough space and take everything for for you so if you have here a background color uh red you're going to see that the the the left container expands all all the way till the price okay now uh with this right container uh what I will start by is I want to align the items to the right in order for the price price and change to to be aligned to to the right side of the screen to do that I can do align items Flex end and this will move and align them to the to the right perfect um now let's um now let's play a little bit with um and as you can see because our text is coming from themed it's automatically changing from white to black because otherwise if it was coming directly from react native um it wouldn't be doing that so so that's nice anyway uh what do we want to do here um there is also another component in the styled text which is called monot text this mono text extends our theme text and only adds a font family space mono so if in your uh starter because maybe like if you're watching it after a couple of months Maybe this is not going to be here just know that this mono text simply has the font family space mono not I so I would like to use this mono text where maybe I can simply use the font family space mono on our close and percentage uh you can do that as well by applying a style here or we can import the mono text from style text so let's replace close and percentage with a monot text now they have a different font family like a mono spaced family which looks more close to to how a number would would look what I want to do is I don't want to show like all the digits after the dot uh I want to maybe show only one digit after the dot for the price here what I can do is uh I can use them a a a method on a number but the problem is that our close um field is a string it's not a number so I cannot do anything here related to numbers like two fixed uh zero or two fixed because it's not a number it's a string what I need to do is first I need to par it to a string to a number and then uh do some methods on that number to do that I'm going to use the number dot pars float I'm going to give it the close string and then I can go ahead and do to fixed and if you do to fixed it's going to show only the the the the whole number if we do to fixed one it's going to show one number after that the dot if you do to two and so one so I'm going to go with two fix one because I want to show only one digit after the dot and what does it say here string is not assignable to type string why did I why did I uh type them with a string object instead of a string uh with lowercase S I don't know but now yeah it doesn't complain here so I can do the same thing for the percent change um but instead of doing it directly in line I will actually do these calculations on the top here uh I will create a variable change and I will use number dot uh pars float I'm going to do stock Dot stock. percent change and this is going to be already a number and with a number when rendering it on the screen I can right away do dot to fixed one at the same time I can use this uh change to apply a different color to our monot text so let's go ahead and give it a style here and I will do I want to do a color red if it's negative and I want to do a color green if it's positive so we can add this color as a conditional to check if the change value is more than zero question mark green if it's more it should be green otherwise it should be red just like that we see that all the numbers that are positive are with green and the other ones are with red the only thing that I don't like at this moment maybe I can do it like this because these digits are very very small for some reason the only thing that I want to do is for the negative numbers we see the minus sign but for the positive ones we do not see the plus sign so I want to see to show Plus in every scenario what I want to do is I will add another a pair of brackets here before we change to fixed in order to check if change is more than zero uh question mark then I want to render a plus sign otherwise I don't want to render anything so just like that the positive numbers will get a plus in the in in front of them and the negative ones we'll we'll have it from the number itself and not from we don't need to add it twice so yeah uh and lastly I will do a percentage sign uh like a text a percentage sign after the the values so now we see percentage at the end should I do a space here it's too much so I will leave it like this and for the text as well you can put a dollar sign in front or a different currency and just like that we have our um stock list item component that is rendering that is rendering ing our information what I want to do is maybe I want to add a little bit of spacing between vertical spacing between the the name and the symbol and also between the stock price and that one so on the left container I will add a gap here because if I add Gap 50 that's going to add spacing between the name and the symbol so at Gap five is going to be enough and on the right I think it's okay only on the left like it needed a bit of Gap so yes just like that we have our component and our list of stocks ready so let's go ahead and uh commit our changes get OD get commit and it was our rendering a list of of stocks list of stocks perfect how are you doing guys still following along where where can I get the assets for these projects uh the assets for these projects you can get at assets. noz.de stocks I will paste it also in the chat as set bundle it also contains the stepbystep guide that you saw here that you can use to to get like the the to-do list and what we are the guide that we're going to follow I got stuck and unable to resolve uh at source components edit screen info from Source upts index uh which API will we use we haven't used any API yet but we are going to integrate with the 12 data API where is it uh uh here 12 data I found the 12 data to be a very good API to provide stock information and they also offer a free tier uh that includes 800 API credits per day which is more than enough for us to to get started and and test our API and I think I'm also going to use this one in my personal uh financial application that I have because even like with what with 55 AP credits per minute the the lowest is going to be 29 a month Pro I think it's it's quite a good pricing because this is per minute so unless you're doing like crazy application like you're not going to have to pay a lot but at the same time it has a free plan that we are going to use today so yes if you're just joining the tutorial uh what we are doing today is we are building a stock tracker application and we're doing that with rack native Expo we're going to build both the front end in rack native Expo and Expo router and also a back end where we will build a custom graphql API a very F layer of graph qu API that will simply pull data from the external stock API I from 12 data that I just showed and also is going to connect with a custom database to add custom features like saving to favorites or maybe even tracking your personal portfolio um so everything is going to be done in today's video um we just Contin we just finished the first major task where we have a home screen in which we are rendering a list of stocks our next step is going to be to uh build the uh to build the the detailed page of our stock so whenever I press on one of these stocks I want to go to The Details page and I want to to be able to see more information about that stock uh all right so let's continue uh because we have a lot of things to to cover today now uh that we have uh our first screen displaying a list of stocks whenever a user will press on one of his stocks I want to rir him to the details page where he will see more information about the stock and also later on he was going to see the graph so that's our next task in the building the UI to build the details page of a stock here we're also going to learn a little bit about uh x for and how to to manage uh creating screens and navigating between them um yes so I'm going to start um slow and slowly add like new features of X for router in order not to confuse you if you're just getting started with xer router so the first step is going to be to create a new screen uh the new screen all the screens in our application is in the app directory that's how explorator is working it looks into the folders and files from up directory and it builds the navigation uh tree the next question is where do we want to to create it um in in our navigation tree for example when we go to that Details page do we still want to see the bottom TP navigation if the answer is yes that means that it should be inside tabs for me I would like to create it as a as a screen in the root Navigator so that when I press I no longer see the bottom navigation navigation and it's also going to be easier to do that so let's go ahead and create a new screen in our root navigation Ro root Navigator by simply creating a new file in our up directory with a name of our route for example uh details or yeah details dot or let's do stock. TSX here we need to Simply export a component and that is going to be our screen I'm going to Define it with a shorthand reactnative functional component but yeah you can define a boiler plate here maybe the text and the view should be imported from Source components fim and here let's do stock details that's going to be the name of our component all right so just like that we Define this component well at this moment we cannot navigate Veer on easily on the mobile but uh trust me this screen is already there I think I can show you that it's there if I open this project on web with xor outter our project should work automatically on web as well well so by simply pressing W in our terminal it will open here on the web let's wait for a bit for the bundle to to load and if I go back what we see initially is our uh home screen with our stocks it's zoomed in that's why you see it so so big but at the same time if I simply do uh up H if I simply navigate through using the browser uh URL to slash stock which is the name of our newly created route we're going to see a new screen with a text stock and that's exactly what we have here if I will do here hello world that's what we're going to see here hello world which means that automatically by creating a file here export outer set up a route for it so when we navigate there it's already there but how we do we navigate there and first of all when do we want to navigate Veer to do that um well we want to navigate Veer when we press on one of these items we want to navigate to the details so let's open the components uh stock list item which is the file that we just uh created and I want whenever I press on this whole container of that contains One stock list item I want to navigate to the slash stock screen to do that I'm going to use a link from Expo router and I'm going to wrap my whole container my whole view in this link so let's do link and the closing tag is going to go all the way till the end after the last view well a link needs an AG rev it needs to know where do we want to navigate well we want to navigate to uh Slash stock and it also has suggestions as well don't worry about the the Lost um styles yet but simply let's press on one of these if I do that we are going to the stock page so the navigation Works uh by simply and all we had to do is create a file and then with a link doing slash and the name of a file stock here stock is the name of a file when we do that X router creates configur sets up that uh that uh screen it also configures the Deep links for it so everything is automatically handled for us and we only have to actually build a screen to fix the the Styles what I'm going to do is uh I'm going to take tell the link to instead of r instead of rendering any component on top of our container I want to render the actual child as the main component so by simply saying as child here link will append like all the necessary props to the to the child component and this way our uh styles are back um working as they were working before but another problem arises in this situation because if I press nothing happens uh and that's because whenever we do as Child Link uh will pass to the child component the on press event because it needs to handle the one press event and in this situation The View does not have a one press event well it's very easy to change it by simply importing from react native as a component called pressible a pressable component is similar to a view it the only difference is that it can handle press events like on press and so on we don't need to send anything there because the link is going to be the one who will send the on press event to the pressable we just need to replace the container from View to a pressable and make sure that the closing tag is also pressable now if I press on it if I press on the link it handles using the pressable and we are navigated to The Details page perfect so now we saw how we can create screens how we can navigate uh and the next step is how can we send data to this screen because we need to know on which exact stock did we press on IBM on Apple or on meta right at this moment we cannot do that because we are not sending anything to this link and and here is where I'm going to introduce the dynamic puff parameters Dynamic puff parameters um you you might have saw them for example on Twitter if you go to a profile on Twitter you're going to see that the URL becomes twitter.com SL and the username SL Vadim noev this/ Vadim this is a dynamic path parameter it's not a uh a URL uh per per Ram or something like that this is the actual URL that we are navigating to with XO router to handle Dynamic route parameters all we have to do is we have to use a specific structure of a file name so instead of naming our file stock what I'm going to name it I'm going to use the square brackets and this defines a dynamic puff parameter inside the square brackets we need to give a name of that of that Dynamic path parameter so this is a name chosen by you sometimes it's ID in my case I want to navigate using the symbol so it will make more sense if we have the dynamic path parameter called symbol because this symbol we're going to get like inside the stock details we will get access to this to the value of our Dynamic Puff param using the use local search parameters which is a hook imported from explor router and here we're going to access the variable name the same name that we have here for V Dynamic puff which is symbol now if I'm going to do Hello World double dots and then symbol and if I'm going to press on one of these items let's see where do we go what's happening reload if I press we see Hello World stock and if I go somewhere else it's still hello world stock why because if we go back to our stock list item that's where we navigate to the SL stock if I'm going to navigate to the SL hello in that case all of them will go to them/ Hello so this part becomes that dynamic part puff parameter that is being pared in by a name called symbol and we can access it on the uh screen using that use local Ser parameters and it goes here in the symbol in order to actually make it work what we need to do is instead of hardcoding here like something like this we need to actually send the symbol to which we want to navigate to to do that we will you can append this talk do symbol and now if I'm going to press on IBM we see Hello World IBM if I press on Apple we see Hello World Apple so that's how we navigate and we use Dynamic path parameters and of course in this situation it would be better to use um to use uh instead of plus sign to use a template string using the back ticks slash and then providing here a dynamic uh part of a string called stock symbol so now if I check it works as it was working before which means that everything is created correctly so now uh we have our structure ready in terms of exper router for our Details page and where we send like some data like an ID or a symbol to to the to the uh stock to to which we want to navigate perfect so now that we have the symbol here we're going to be ready to go ahead and in the symbol I don't know maybe the first thing that we're going to do is to take the stock so con stock is equal to the stock data is going to also be somewhere in this top five later one what we want to do with this symbol is query our API get information about our stock with that symbol but for now we are going to look through that top five and see which one of them we are trying to render to get the the all the data not only the symbol so I'm going to have to import top five from assets data top five and here I can access top five and I don't even need to find anything because the top five is an object that contains uh key value payers where the key is the symbol so by simply doing top five and access the symbol we are going to get information about the stock I can do here for example instead of hello world symbol I can do hello world stock do stock. name so if I go to IBM we see Hello World IBM apple and so on so that means that now we have access to more information about the stock by quering or by getting this information from from somewhere later on we're going to get it from the API now we're simply getting it from our top five uh dami data and of course it's going to be smart to handle like if we did didn't find the stock with that name we're going to return a text um stock with symbol um let's say symbol no could not be found so in this situation in our mobile phone like it's not going to happen it might happen if we for example send um a deep link or open a deep link but on the web it can very easily happen because if I will go to uh SL ABC in that situation the stock with symbol ABC could not be found if I go to slash IBM we are going to see that uh it's still not found because it should be IBM with capital right IBM it's still not found uh if I go back and press on IBM but what where I was navigating before yeah let's do slash IBM okay I I think like my my URL simply uh makes it lower case when I do even if I do uppercase so it's not a big deal here because later on like we're going to query it from um from the API and the API will be smart enough to to handle lowercase and uppercase as well like it's just locally like a small issue so just like that we have our uh stock information and what can we do with it we can start by simply instead of rendering this text we can render the same stock where is it stock list item from our components that we are rendering in the list and that is going to give us already some information one the think is that we need to give here is the stock just like that and here we have it we have at least some information to get started on the details page this view let's give it a style uh and let's give he it a poting t to have some spacing and let's also while we are here adjust a little bit some something about the the header because right now the header is kind of weird uh as you remember to to adjust the header all we have to do is use a stack from import it from export router export router dot screen and here we can send options for example we can send the Ty title and the title if it's stock details is going to be updated at the top the cool thing is that by doing by doing it here we have access to actual details of a stock so we can do stock dot stock do name or stock. symbol that's also possible meta platforms alphabet or maybe stock dos symbol is going to make more sense Apple so now the title is a dynamic property coming from the data that we know about the stock you can also adjust the back button title so if we do back sorry header back title uh we can do back here or or maybe even we can do show header uh back title visible false and this will completely hide the title and only leave the back button or not sure if this is the best we can also do header back title uh stocks or maybe I will I will hide it I will just leave um I'll just leave the icon easy enough all right so that's the initial Details page um later on we can add like more information here but for now I think that's uh enough so let's go ahead and do get add get commit and this was our our stock details screen perfect how's it going guys following along everything is clear so far so what's going to be our next step our next step is going to be to render the charts uh the chart for the time series uh if we look into the dami data that we imported we also have like the time series which is an array of basically date and values like the high the low the closing and so on so using these values we can plot them on a graph on a chart to do that uh there are different charting libraries I to be honest I'm not very happy with the status of most of a charting Library some of them are very outdated some of them are not very supported so the situation right now with charting like in my opinion is is not the best but the library that I'm using in my famifi famifi application the library that I'm using V is this one Rec native graph uh built by Mark from marello and even though the documentation is not the best that is not very clear the implementation is really uh is really nice because it's using the rec native skia behind the scenes to to plot these graphs and we can also animate them as you might see here in this chart so yeah it's really powerful it's very fast uh and it's much smoother than the reactnative SVG graphs so let's go ahead and use this one to to plot the the the chart for the price history of our stock uh let's go ahead and start with the installation well this Library depends on the r native reanimated because it also supports animating the graph it depends on re native gesture Handler because it supports moving the the finger a on the graph to to to move like the where is it yeah like the the dot and also depends on the react native skia to render the craft so let's go ahead and install all of these libraries in our project uh I'm going to install them using the npx uh install command so if you look in the guide I covered all of the libraries here in one single command that we can simply copy from here and using opening the terminal let's go ahead and do clear I'm going to do npx Expo install Rec native reanimated gesture Handler Rec native skia and Rec native graph using npx XO install we'll make sure that we are using we are installing the the libraries that are compatible with a current SDK version so in my case that's SDK 50 let's go ahead in the documentation of marello and let's open the rack native ranimated because there are there is a small step that we need to take for react native reanimated from react native reanimated let's open their documentations and let's click get started and in the quick start guide here we see that after we install reanimated we need to add as a second step the Babel plugin called R native reanimated SL plugin so let's go in our application let's open our files and let's go into the B.C config and currently we do not have any plugins so I will start by adding the plugins here and here the rec native reanimated plugin if you have a plug in field make sure to add the reanimated as the last one now let's go back and for reanimated that's everything we need later we're going to see how it works but yeah basically we're not going to it's only the dependency of a graph let's close the previous two Tabs go back and do the same for gesture Handler for gesture Handler if we go into the documentation view documentation we should see in the installation guide here we should see that after installing it we also need to wrap our whole application in a gesture Handler root view so let's go ahead and do that in our source app underscore layout the underscore layout is our let's consider it as the entry point in our application because this underscore layout that is directly in the up directory this is the root layout or the layout that is going to be wrapped around all the screens in our application so that's where we usually set up Global providers and uh uh yeah things that we need to configure globally so let's import here the uh gesture Handler root view from rack native gesture Handler root view oh boy uh the import is too much too much just like this and let's go ahead and wrap our whole if we scroll down into the root layout navigation let's wrap our whole application in this G Handler root view make sure to close it at the end and also uh make sure to add here a style which is going to have simply a flex one to make sure that this root view takes up the whole available screen um space oh why I'm taking the props um yeah that was my mistake we need gesture Handler root view not Road view props just like this now if I'm going to refresh maybe something is not going to work so let's go ahead and uh stop the development server because we need to restart and make sure to also restart it with uh make sure to restart it oh come on uh npm start with that D- space-- clear this will clear the metro bundler and it's important for reanimated to to take effect let let's close this application I'm going to press I again to open it on iOS and yeah everything is working as it was working before which is good to know because we don't didn't introduce any errors installing these libraries if that's the case for you we are ready to go ahead and close everything and start rendering the the the graph from react native uh graph uh here is where the documentation is lacking because it doesn't provide a working example but I'm going to show you how we can do it let's um let's initially prepare a bit our files and components because even though we're going to render the graph on the detail screen of our stock which is this s I don't want to to to have everything into one file I want to separate the logic of a graph into a separate component so let's go ahead and create a new file under components folder called graph. TSX I'm going to start with a simple component initially from fed fed and yeah this is a bear bone component and let's go into the application symbol and after the stock list item let's render that graph it automatically imported it for me for you if it didn't make sure to import it from components graph as we can see we already should see this graph text on on our page that means that our component is being rendered so we can close everything and focus Solly on this graph component to render the information so let's start by importing the line uh chart from react where is it react native graph and probably it's not line chart but line graph line graph let's go ahead and under the text graph let's start by rendering the line graph the line graph needs a couple of properties one of them is the points that we want to render let's start with an empty uh array of points like a blank empty line graph another one is going to be uh the animated if we want it to be animated or not I'm going to start with a non-animated graph this is well this is going to render a more performant graph but it's not going to have like animation and other Advanced properties so and the last one is the color let's go with a red so if I go here is not a valid hex color I think the color should be hexad decimal what I can do is I can use colors do uh the colors from our constants colors from constants do light do tint and this is going to be our blue at the moment we're not going to see anything and even if we're going to add any points here we're still not going to see anything because if I add here a style to the graph and if I will add a background color I don't know red we do not see the graph at all because we need to to size it we need to specify some sizing properties for example with I want it to be full full with so I'm going to go with a 100% still not visible but if I add here a height of 300 pixels right away we see the at least the background color red so that means that now the line graph is being rendered but we do not have any points so I'm going to start by removing the background color red once you are sure that it's being rendered um and let's go ahead and Define the point points I'm going to create a variable here const points that I'm going to start with an empty array now let's simply send them to our line graph property points the points has type any but it expects to have a type of and we can import from here graph point the type graph point and let's type it with graph Point array this is this is going to help us understand what information do we need in the points you can hold control and press on the graph point and this is going to show you the the type the interface and basically a graph point is has two values the value and the date of type date so by simply going here and adding a couple of objects with date new date eight and value for example 10 maybe another one with 15 and another one with uh five maybe something is going to happen well we need to provide like different dates because right now all of them are the same date so by doing 20 24 one one here 20 24 1 2 and this one 20 24 1 3 just like that we actually have something on the screen and we have a graph I hope you can also see it in your case and yes that's what it needs the graph the line graph needs an array of points with date and value date and value date and value perfect uh instead of hardcoding all of them let's go ahead and use the time series that I have prepared for you the time series coming from assets data and time series. Json this later is going to be fetched from the API but now let's use the dami data so that we can focus on rendering the graph and not thinking about like how to fet data so let's go ahead and import time series from at assets data time series Json and uh the points I'm going to comment them out or maybe I'm going to do let's do here const um graph points I don't know graph points which is going to be having the same type I want to create a new array called graph points based on the time series so it's going to be equal to time series dot the time series is an object with some meta and values we are interested in the values because this is our array of different values time service do values and the values is an array of this structure whenever we have to transform the an array from a from a structure to a different structure in this case we want from this data we want an array of this shape whenever we have to do that we uh we are dealing with a map or a do map operator so for every value what I want to do is I want to uh to create a new object that has where is it that has that date uh for example new date and value 10 for example I'm going to start with with value 10 now let's go ahead and do a console log graph points to make sure that we are on the right path if I'm going to look in that terminal uh and if I'm going to go to The Details page it's not very easy to read so what I will suggest you to do is to Json do stringify our object and if you pass here null and then two it's going to nicely um structure them so we see that it's an array with the structure that we we need so at least the structure is is something that uh that we need well for the date we need to take the the what the date time from our object which is a string and transform it to a date so using the new date we can pass here value dot date time and it will transform to a date if I will look in the in the terminal we see that yes it's 19 20 21 and so one perfect for the value what I need to do is I will take the value do close because that that's the price the closing price in that period so value do close we're going to see that typescript is saying hey this is not a valid graph Point array because the value should be a number but we actually gave it a string that's why the that's because the API gives us Val values as string so what I'm going to do is again I'm going to do number do pars float to transform from a string to a number and just like that if I look the shape looks correct the values look correct the dates look correct let's go ahead and give the graph points to our line graph instead of points to graph points and just like that we should see a graph with something like this with a shape like this so that's good that means that now I can uh Delete the console log uh if you see a graph with this shape and I can also delete the dummy points that we defined before because we are basically mapping the time series which is going to be the response from the API and creating the the array that we need in the graph so I will also rename it from graph points to points let's go with points because we only have one of them perfect that's exactly what I was looking for all right so um the graph is here uh the graph is here but there is a lot of ways we can we can uh improve this graph for example exle one of the ways we can improve it is by adding a uh a background uh and you can also add a background uh of a uh a linear gradient background so if we go here and provide here gradient field colors we can provide an array here from I don't know from that start at the tint and goes all the way till uh I don't know 0000 0 to to Black nothing is going to change because we need to switch from animated from false to true and now we have a f color for our graph that goes from our tint all the way till black at the bottom uh let me check how how I did that in the previous project because I was having like a bit better colors there where is it here in the components chart oh I had these colors let me try them let me try color okay let me try I will remove a color tint the gradient field Co color and and the animated all right so now it's like a greenish color and the background as well it's not like fully green at the top but it has like some transparency which adds this little little nice effect over our graph and it also goes to to a to a darkish color let's see how it will look on the on the white I think on the white it's also look looking good oh come on yep perfect nice uh love love this well again there is other ways we can adjust it as well for example we can enable pun gesture so if we do enable pun gesture we are going to be able to press and move around the graph like this that's cool and what can we do with that we can display some the the price at that current time right uh because there is the on gesture start on point select fired for each point the user pans through you can use this event to update labels or highlight selected Selections in the so let's go on point selected what I want to do here is let's define a function at the top const on point selected and what it will give us I don't know let's see line graph line graph props where was animated and the one point selected will will will receive a point that was selected so here it will receive point and we can do console log Point dot value or point do date so if we look into the terminal and as I move through them we see different points being selected so what I can do with this is I can save this in a state variable and I can display it on the UI for example be above a line graph we can have a text that will render the value the value I don't know 1 2 3. five and below that it's going to render the date for example new date dot to ISO string this text let's style it a bit font size size font size 20 let's go there uh font weight bold uh and what I'm going to do is I'm going to switch from a text to a mono text imported from style text component style text make sure to the closing tag is also mono where where mono text yep font bold does it change anything font bold no it doesn't but that's okay I can do uh color green green okay so now we are rendering some text here maybe for this one I'm going to do style let's let's not even display the date I'm only going to display the the value right so what I can do here is I can store the currently selected dot in a state so selected Point set selected point I'm going to use a state Val value of type graph point so that I can do the following when we pass through the value here let's go ahead and do set selected point point and here I'm going to render point or selected Point dot value selected point. value and maybe I can I will also do uh dot to fixed one to only display like do two or something like that at the above I don't need the text graph so to make it looking a bit better should I do the same color for the text as I have for this graph yeah that's nice so as you can see I can press hold and then as I swipe I see how the price moved here it goes to 194 at the bottom 18 5 and at the top 196 again so perfect and the same way you can add another text for the date as well I didn't do that just because yeah just because I'm a bit lazy because with the selected Point dot date dot to date string it's is going to oh today string Works nice and I can do here style color gray yes now it looks nice another thing what but these are already like very small improvements because as we go for example I look at the top one here and and if I release it it goes to the end so what I can do is here if on end on gesture end I can reset the selected Point set selected point with the last point in our Point array so point maybe at position zero that's going to be the first one so if I move this one like this and then I move yeah I don't like this one I I will leave it as it was because it updates to so often so all right the only thing that I will probably improve is initially that default value is going to be points uh at position points. length minus one and this is going to take the last point and set it to the currently selected one so if I go to Apple uh here we see 196 and this is actually the last point in the graph if I press and hold to move that's going to be the last point in the graph which makes sense okay okay nice nice nicely done looks nice for now I think uh with a graph I'm going to leave it here uh and maybe at the end uh we can look into other uh things as well because we uh as we will have like more data we're going to be able to play more with this graph like switching from different F time frames like um similar to how you have on uh Yahoo finances where you can switch from uh one day to 5 days to one month and our graph will automatically resize and animate to to the new values but this is going to be done when we will have more data now our basic graph is here we can move through it it looks really nice uh there is one very small thing where is it uh selection dot selection dot you can add a custom selection dot dot or I think there is a property indicator pool setting so if you do that will it no how did I do it let me check in my source code of my of a fifi project because there I'm using the same graph and it pulses really nicely if I go to the think application features savings components graph uh bottom top enable uh enable indicator and indicator pulsating enable fade in musk let's try this free properties enable indicator yes but if we have a indicator yes it it puls Sayes V maybe we can add some uh ping T so that we can see yeah right right now like yeah we it's not very beautiful because at the end like it's it's cut but it's really nice that it's p pulsating there so if I will simply change some in the time series for the last point the close if is going to be 90 now it's going to look better so we see that we indicator is pulsating and we can press on it and move around all right so let's go ahead and uh commit the changes because that's our basic uh graph uh that we have created here so get add get commit graph using react native graph perfect good progress so far how are you guys guys doing using alpaka hi can you please make one video on screenshot and screen protector application um what kind of screen protector application not sure if I'm familiar with with such kind of applications okay so um we are at a point uh almost halfway through our tutorial and so far we have have implemented the home screen where we have a list of stocks and when we go in the details page we see more information M stock and the chart with the time series uh here so far this is everything uh only UI U we have implemented only the UI using damid data and in the next step in the next part of the tutorial we uh are supposed to actually fetch the data the the the real data of um of the stocks so that our application is uh usable is functional not only with d data but with actual real data for that we're going to use the uh data from 12 data which is the is going to provide us Financial uh data they have a rest API quite good documentation and why I chose them for this tutorial is because they have free uh free um plan that includes around uh 800 API credits per day so that's going to be more than enough for us to get started so go ahead and sign in create an account it's pretty straightforward you just provide a couple of uh things there and then you're going to uh receive a confirmation email after you have done that we're going to need the API key that you will see here so yeah after you have it take it and we are going to be ready to go let's go ahead and open 12 data where is it the 12 data with 12 data come on 12 data.com I will go to the developers and let's go ahead to the documentation where is documentation products uh documentation need API documentation so it should be 12d dat.com dooc here is the documentation for the API um the authentication Works using the API key that we have uh created that we have got by creating an account and the end points that we're going to use in today's tutorial are the following ones in the core data there is this code end point and let's simply press on this code end point as we can see the code and point gives us information about one stock information such as symbol name and so on if we have a look into the dumy data of top five that's exactly what uh data we need here for the top five or for the home screen another thing to to to to know is the code is only giving uh information about one stock if however we look into the getting started into the batch requests we see that we can send batch request by simply for example under a symbol adding multiple symbol uh split by comma so this works in a lot of um with a lot of requests so to get the code information of multiple symbols what we're going to do is in the URL where you see symbol APLE just add comma and here let's do um IBM and if you press enter we see that the demo API key is only used okay okay okay that means that the API key currently the API key here is the demo one so by simply going to our dashboard taking the API key come on and replacing in the URL from demo to our actual API key we should see uh a request with two answers information about the Apple stock and information about the IBM stock so with this URL that's going to be uh the the core of our top five or of our home screen uh to to render the top five were the list of pre-selected uh stocks um we could go ahead and integrate directly with rest API by sending a get request to API 12 data and that is going to work fine uh however in a lot of applications that I'm building uh whenever possible I'm trying to use graphql why simply put is that from the front end from the client side we have more flexibility and more control over what data we are requesting with a rest API whenever we will send a request uh for example to 12 data we're going to receive all this information in some cases we don't actually need all of this information for example on the home screen we only need name symbol and the price so instead of only quering free fields we are quering a lot of data that uh on one hand leads to more data being transfer from a network and the application being slower and then another end here where talking about uh connecting multiple endpoints and the data in a way that we actually need it on the front end for example in our application as the next step we're going to add a feature of adding favorites the favorites we are going to store them in a custom database in a postgress database with a rest API the process of quering the data and displaying like your favorite stocks is going to include uh one sending a request to to the API to get all the favorites uh favorite uh symbols and then for every single favorite symbol sending a request to this 12 data API to get information about it so that leads to the n+1 uh issue with rest apis where whenever we have to render a list of things in a lot of cases we have to send one request for the list and and request for every single item to get more details that's because from the front end we cannot control What fields do we need we have graphql with these issues are solved and that's why I really like using graphql especially when I'm working on the client side and um steps then IBM stabs and the sponsor of today's video is making building this graphql apis very very easily we don't have to think about optimization on how to host it and so on um with IBM steps and we can simply run a command and we uh we have our API created instead of me telling you that let me actually open steps and.com uh and let's let's get started let's go ahead and open the documentation we getting started make sure to create an account on steps then we're going to need that that's going to be the first step go ahead sign up it's free to to sign up you don't need uh any keys after you have signed up developers I want to go to the docs let's go to the overview maybe to the install and setup after we have created an account let's go ahead and install the IBM steps and um uh CLI tool this is going to help us initialize uh and manage our graphql API so in our terminal let's go ahead and clear everything and let's start by installing the IBM steps and CLI globally on our machine after that is done uh let's go ahead and do stepen login here with a stepen login we need to provide the account name you will get it from the steps and dashboard if you open it up uh in the account go ahead in on this key and you're going to see the account name here so provide the account name in your your terminal and the admin key the admin key is going to be the second one I already have signed up but after you do that you can go ahead and run stepan step than who am I and if you have signed up uh you're going to see your account here that means that you have authenticated correctly with steps in now the next step is going to be the following we're going to create our API using step Zen and for that we're going to create a new folder where we will keep the configuration file of our API let's call this folder API we're going to do that in our Expo project but it's like separate independent so just for Simplicity we're putting it into the same folder but it doesn't have to be there can uh create it as a separate project as well so from our terminal let's navigate to that folder using CD API now that we are here uh and now and the next step for us is going to be to to create our API where in another way is going to um put it in another words we will simply transform a rest API to a graphql API to do that the first step is going to be to have this URL that is working here for us and make sure to also have it with uh multiple or let's uh let's not do it with multiple let's change it back to only one symbol uh we're going to start importing this query first and after that we're going to think about a list of symbols as well so uh let's make sure that everyone are is on the the same page let's go to the 12 data and let's go to the core data and here code let's simply press on the code here and copy the URL from the top the URL from the top is the the URL that we want to parse and transform to a graphql to do that with steps in you're going to be impressed how easy it is all we have to do is write steps and import rest no steps and import and then the URL that we just copyed let's press save uh of course I forgot that we need steps and import rest is it steps and import rest oh no it's corol yes come on steps then import and Cor now let's paste the URL that we just copied and press enter the first question is going to be how do we want to call the endpoint I'm going to press simply enter and go with the with that one and we see that graphql successfully imported the schema that was generated there I'm going to show you in a moment what actually happened there but let's go ahead and do steps and start to start our uh staben API What's Happening Here stepen is going to de deploy the imported schema to stabs and cloud and uh at the end we are going to see this graphical uh URL that we can press and open in our browser and through this URL through the dashboard we're going to be able to interact directly with our API so if I'm going to go to variables I see here that we need to provide API key so let's copy the API key from 12 data back to to here we need this source which actually we don't need so let's just do docs and we need the symbol that we want to query for example AAP for Apple if I'm going to press run now what we should see is we should see the information about Apple the good thing is that now this is a graphql API and I can only leave the things that we need for example symbol and name if that's what our user interface needs so if I send now a request we see symbol Apple name Apple Inc if I will also add the close here uh we're going to see another field so just like that from a rest API we created a a graphql API that uh we can integrate and we also deployed it to to stabs and now yeah this is a deployed uh end point that we can call from anywhere we don't have even to think about like hosting it somewhere and stabz is um is scaling really well with with the demand of your uh application uh this was just the beginning let's have a look at what happened uh during this process so the first step that we what we have done is tabs and import curl by running this command stepen sent a request to this URL that we provided to him if we send manually a request V uh if we send V manual request their response is going to be this one steps and receive uh response it pared it it understood what is the structure of the data that it's receiving back it's also understood what parameter this URL needs and it created a graphql schema for us automatically to have a look at that schema let's go into the API folder in the curl F folder and here where is the index graphql if we scroll down a bit we see that there is a query that is sending a rest uh rest API request to this endpoint to VPO api2 dat.com code it also added the API key the source and the symbol AS string parameters because they were parameters in our URL and it will automatically append them to the end of URL and the result is this root result that we can safely rename to something that makes more sense for us for example in our case this can be uh a symbol right or a code symbol code or a code code because we are sending like slash code yeah maybe this is going to be code so if we rename it to code here we should rename it to code here as well now the my query can be renamed to code to make more sense when we are interacting with our graphql API uh the source I don't think we actually need this source so I will remove it from here and just by doing that uh if we open that terminal where we run steps and start we see that stepen is watching our files our schema and every time we change it it's redeploying it back to stepen if you don't see any errors here we can safely go to back to steps and dashboard and here we can press refresh and we're going to see that now our query is different our query query is a code query which make more sense and it doesn't it has only the API key and the symbol that we need to send well I don't really want to send the API key I want this API key to be somehow preconfigured for me because as a as a user of my API I don't want to to to to handle the API key from 12 data I want my graphql API to handle it so what I can do is either I can manually added here at the end with question mark API key then the the actual value like ABC but a better way would be to use a config file to use a config file I'm going to go back to the stabs and documentation in the setup let's see maybe not in the setup but transform rest to graphql so let's go ahead and look at this config file so to configure headers let's go ahead and create a config yaml file and add this structure as the configuration in the API folder let's manually create a config do yaml file and here let's paste the configuration structure that we saw there for the name we can give here the name I don't know 12 data something like that and here we are providing different configuration headers for example in this case we are providing an authorization uh token I will point back to the documentation of 12 data in the getting started under authentication we see that there are two ways we can authenticate uh the requests either with a query string by appending API query API key with your key or you using a header uh a header authorization that has the following structure API key your API key so that means that instead of beer here we need API key this one API key uh and then the our API key that we can take from the dashboard so I can put it here so now we have a configuration called 12 data that adds a header authorization with our API key the last step is to go back in our uh graphql schema and assign this configuration set to our rest end point here by adding here at the after the endpoint the [Music] configuration I think configuration let's check double check the documentation it's in the rest we have configur configuration and the name of the configuration so the name of our config was 12 data 12 data now we can safely remove the uh the variable API key because now the API key is managed through a header that is in our configuration let's check the terminal and we see that uh we have an error if that's happening what uh that means that we we have some some issues configuration configuration configur oh it should be a string right yes now deploying and after it's finished we see done in 3.5 seconds that means that I can go back to the dashboard I can press refresh and now my my request doesn't need an API key it only needs the symbol so it's much easier to consume this graph API because I only need to provide the symbol run it and I get information about the symbol so as we can see uh if everything is still working if you see the information that means that all our configuration that we have created there is uh still working correctly it's adding the authorization uh so yeah everything is fine um give me just one second I'm going to be back and the next step is going to be to create the codes endpoint because at the moment this one only returns us one information about one um symbol name and symbol because if we're going to try to for example provide here a badge uh symbol list like apple and Van um uh Google in that situation we are going to see name null and symbol null so we're going to have to change a little bit our API to make sure that we can not only request one code for one um stock but also a batch request for multiple Co for multiple stocks as well so that's going to be the next step uh I'm going to come back in a second for all right so I am back are you still here uh so let's see let's see is it clear so far do you have any questions am I going too fast let me know in the comments guys Enrique is saying I started building applications thanks to your tutorials oh that's so nice now two years later I'm working on a m massive project for one of the biggest distributor companies I have no words to express my gratitude oh my God I'm so happy to read these kind of messages I really appreciate that enri and good luck to you with your project what what what application are you building there uh uh Kumar yeah I will check into that to be honest I don't know how how that is happening but I can have a look should be string yes thank you very much we fixed that anyway let's continue we still have a lot of things to do uh and yes our first uh graphql endpoint that is returning us information about one uh stock like like the code of one stock is working um let's go ahead and adjust it or maybe add another request that is going to return us information about multiple codes uh first of all let's see how that works on the API and on the API by simply adding when we query the symbol if we add comma and another one for example Microsoft the demo API key is not working in this situation so we need the actual API key we are able to request for one single request to to to to 12 data we are able to request information about multiple stocks it's a batch request uh all right so that means that the the end point is actually the same it's SL code the only difference is that the symbol is different and pay attention at the uh structure of a response because when we send a request only to one uh to one uh query it's an object with the values directly if we send the batch request it's an object where we have uh key value P payers for all the symbols that we sent there so response structure is a little bit different than what we uh have previously to create a graph query in steps then we created the first one by running steps and import that's not the only way to do that that's uh that's only that's the easiest way to do it but if you know a little bit of graphql you can write this queries right right away in your graphql and by by knowing like the the directives that steps and is supporting like you can build them yourself I know graph well but uh I think by having an example it's not that complicated to adjust things for example if we need another query let's start by simply duplicating the one that we already have I'll go ahead I will d publicated here and the name of this query is going to be codes let's be safe and just see if the steps and is um deploying let's go ahead in our dashboard and if I refresh and if I go into open the Builder now we see that we have code and we also have codes um code uh query sorry my brain stopped working for a for a second so it still works uh Apple maybe average volume is not there but symbol let's see yes it still works the thing is that we want this code API to work with bash request when we have not only one symbol but we have for example Apple and then uh IBN and then Microsoft for example if now I send this request to the codes we see that the return type is diff is is trying to have the same return type and it's actually null because the symbol and the name when quering it like this is actually null um what we are going to do is the response that we receive here we're going to transform it a bit in order to make it work the way we want it to work if we go into the documentation of stepen and if we are looking at for example search transform uh and scroll down to the stepen directive reference and here is the rest API the rest directive and the rest directive has a way to add transforms transforms are a way to get the response that we get from the rest API and before trans transforming it before returning it uh as a graphical schema uh if we scroll down a bit I found found a very useful predefined transform that we actually need in this situation and it's called object to array let me zoom in a bit so the object to array is exactly like for what we're are doing here many backends return a list of key value payers with field names representing a key as opposed to an array so that's what we have we have a key value page instead of an array what we want to do is transform from an object with key value payers to an array to do that we are going to uh use a transform so let's copy from here transforms I'm going to copy from documentation and I'm going to add this transformation to our code API the transformation is going to work uh on directly on on the response without having to look into the data so I'm going to remove the data from here and I'm going to only have like here which basically means for every object that we get for every key value payer transform it to to an array the array that is going to be transformed to so this will produce the following array name which is the which is going to be key of our response for example apple and the value value which is going to be the code of that symbol so remember we get back an array of objects where we have name and value fields that means that the response is not going to be code it's going to be codes or yeah let's call it codes or no no no no let's do um it's going to be a very response is going to be an array of uh co co codes codes right and a code basically the array as I said is going to have name and value let's define a type called codes and this type will have name and value the name is going to be of type string but the value the value of our object if we look into the request the value is going to be this object this is actually information information about the the symbol so the value is going to be exactly the same as here so the value is going to be code so let's let's uh refresh what we have here we are sending the same request here but this is going to be a bash request the answer for The Bash request is a bit different than a normal request for that reason we have to apply a transform that will transform an object to an array the object to array transform will get the object where we have key value payers and we'll transform it to an array where we have name and value this way uh this is going to be a response it's going to be an array of codes where one code has a name which is the symbol and the value which is the actual details so with this let's check if our API has been uh deployed yes it has now we can go to the dashboard of steps then and we can refresh now if we look uh you can look into the documentation of your API you can check the query you see that you have API codes and it returns codes and so on let's go ahead with a builder I'm going to remove everything from here and from the Builder let's open codes let's go with a symbol for example a a and Microsoft and maybe even IBM and as a result let's take the name and also information about the value like name symbol open and so on if I if I send this request that's what we have it works exactly how we want it the codes is an array and the array contains information about every uh symbol that we have requested with the value of it in fact the name from this object to Value we don't need it because it's going to be the the same as the symbol here so IBM IBM so we can and leave it out and only take the values the value and I think we can also apply another transform to make sure that we we are unwrapping this value right away here not to have to go to codes. Value do something not sure if I want to continue because even right now everything is going to work but for example transform no I'm going to leave it like this that's uh that's our second API in point so now we have two uh graphql queries one to get a code uh which is information about one symbol and the second one is to get um a list of codes okay let's go ahead and commit these changes so I'm going to open a new terminal make sure you are in the root of your folder of your project so let's do git add G commit minus M um set up uh stepen API and add to queries Co code and codes uh before we start quering this API in Now application I want to include I want to add another query in our graph and in our graph API that will give us the time series of one stock this query is going to be uh needed for our graph uh and let's go ahead and see how we can do that first of all let's look at the API documentation for 12 data uh I'm going to close some of the stuff that I don't need uh yes let's go here and in the core data there is a API and point for time series this API call returns meta and time series for requested uh instrument and the time series is an array of objects ordered by time descending with open high low close and so on uh okay so let's press on this URL to see what's going on here if we press we see in we see a uh a um an example of a request to time series for Apple here in the request here we see the symbol Apple we see also the interval for what we want and the the API key demo and the source docs let's copy this URL and what we have to do is we have to go ahead and import this rest this end point which is a rest API endpoint in our staben to do that we're going to open the terminal we're going to go there where we have our API running or maybe I'm going to leave it running so in another terminal I'm going to do CD API make sure that you are in the API directory of your of your project and let's go ahead and do steps then import curl and paste the URL that was not what I wanted to do I need to copy the URL from time series and let's do stepen import curl and paste the URL stepen is going to go ahead do a request analyze the response and create another folder inside our API directory called curl 0.1 what you can do is you can rename them for example uh but I'm going I'm going to do that in a moment let's just see in the index graphql what we see here in the index graphql we see a query called my query uh let's test it out first so let's check stepen is still running if not run steps and start and let's go to our dashboard and let's refresh from the Builder I'm going to remove a query and I'm going to open Builder we see that now we have a new query called my query if I open it up I need to provide the API key of uh 12 data so let's do that I just want to test it later we are going to improve it I need to provide the interval and the interval can be one Min which is one minute The Source I think it doesn't need to be there but let's do docs here and the symbol I'm going to do AAP let's select from The Meta the symbol type let's select everything I don't probably I don't need everything the the status and the values in the values I'm going to choose all if I press run we see that we are sending a request to Apple for one minute intervals the status is okay and we get an array of values this is going to be exactly what we are going to need to feed our graph and to display this time series in the graph uh perfect uh I love that let's go back in our API and improve a little bit the query and so on for example I'm going to rename it from my query to time time uh how to do it time let's do timecore Series M the API key or let's do the yeah the API key I'm going to remove it from here and instead of that I'm going to add it inside the rest directive so after the endpoint I'm going to add it through a configuration file so configuration is going to be a string called 12 data because that's how we called it here in the config yaml 12 data and these configuration simply adds our API key header 12 data I hope I called it correctly 12 uh the symbol no the symbol we need but the source we don't so I'm going to remove that the interval I'm going to leave it because uh I want to be able from our front end to send different intervals to see a chart for for basically different intervals symbol is important uh the answer I don't want it to be called root I want it to be time series so let's find the root and call it time series this is meta this is status this is values entry Valu entry maybe you can do here time but it's okay Valu entry I think makes sense you can leave them like this uh in different files I think I I will leave them like this in different files the only think is that I will change here the name from Coral 01 to timecore series and if you change the folder name go ahead and open index graphql because this index graphql from the root of your API is where we merge everything together so make sure to change the name of a folder here as well to time and _ serus and you can change the first folder name from curl to code code and if we change the file name in index as well from curl to code code now with that being said let's check if stepen is being deployed yes it is I can go here I can uh refresh and in the codes I'll will delete this codes uh URL I see a new query called time series I can change I can send here the interval one minute for uh IBM and we can check the values of the close and that's it because that's well and the date time of course and if I send this request that's all that's the data exactly the data that we need for our uh graph and not more not less and that's the power of graphql because instead of receiving all of these data we are we are getting only the values that we need for for the for the graph perfect so now that we have our time series as well I think we on the graphql API we have all the on the on the back end on the graph API we have all the queries ready that we need to integrate our existing UI with so on the first screen what we're going to do is we are going to send a request to our codes by sending multiple symbols and we're going to receive back an array of codes uh on the detail screen at the top we're going to send a request to a code to get information about only one uh symbol and on the um for the graph we're going to send a request to the time series to but to to get information to know what do we need to plot on the graph so that's going to be the next step but before we do that let's go ahead and do a clear do a get add and a g commit time uh series graphql endpoint or query query perfect so before we move on uh let me know if you have any questions so far code novator thank you very much I appreciate that take a look at Expo screen capture should be able to handle many cases that's a recommendation to managing like screen recording and screenshots give me just one second I think I need the second cup of coffee and our next step is going to be integrating our graph API inside our re native application querying the data that we need and displaying like real data throughout the application instead of dummy data but for that we need some coffee and we are going to continue give me just one second okay so we are back let's go ahead and continue our tutorial and our next step as I was saying is going to be querying our graph qu API inside rack native there are multiple ways you can do that there are multiple libraries that can help you with that the library that we are going to use for this tutorial is Apollo client in previous tutorials uh we also used react query why my my keyboard is not working oh it's working so API we created the code we created a config file imported object to array perfect so yes we're going to use Apollo graphql uh client to fetch a graphql API from react and in this case react native as well from a react native application and a um doesn't only handle like fetching but it also handles caching on the device as well so the data that we receive is cached and it's normalized something that we don't get with other Solutions and I think it's um as I was saying like in previous tutorials I was trying react query I know a lot of people are using R query and it's great especially like when you're working with rest apis for graphql apis I found aollo client to be easier to integrate with and moreover aollo client also normalizes the cache which means that it's more performant and when you're sending requests from different parts of your application they are store basically if you are requesting the same information about uh an object from different parts of your application is going to be store all in the same place um so let's go ahead head and actually get started with Apollo client we're going to first install aollo client and then we're going to do our first queries so go here let's go to the client react and the react client is going to work with react native as well I'm using version three and let's go ahead and uh check the get started so the step one is going to be to install the dependencies let's copy this there are only two dependencies the Apollo client itself and graphql and the graphql uh library is here to help us parse the graphql queries after we have done that we're going to have to initialize aollo client for that I usually create a new folder called Apollo where we keep information about Apollo and here let's create a new file called client. TS in this client. TS uh we need to initialize the Apollo client for that let's import uh Apollo client and the inmemory cache and let's see in the next step how we can initialize the client I'm going to copy it from the documentation to initialize the client all we need is the URI to our graphql and the cache the U to our graphql should be our steps Z graphql end point if we for example stop our stepen and then do stepen start uh the steps and start will show us our API endpoint so here deploying and we see that this is our API end point you can copy it and we can put it here uh the cache is something like where should Apollo manage the cash so we are using the inmemory cache step is going to be to to authorize with steps then because when we have to send a request to our steps and API not everyone will be able to do that only the ones that knows the API key so here in an example we see that to send a request we need to add the header called authorization where we have API key and where we will put our public API key for stepen with Apollo client we can manage this globally by adding here headers and the value is going to be as you can see authorization so you can even copy paste this field to to the value here to the key and the value is going to be API key space and the actual API key so API key space and now the actual API key the actual API key you can get by simply running in another command you can run steps and who am-- API key and this is going to be your public API key for stepen copy it and paste it right away here if you know how to work with environment variables in Expo go ahead and add it as a environment variable I'm going to leave it for here for now now the last step is to go ahead and Export default uh client because we are going to need this client to in the Apollo client provider where we will expose it to the other components in our application to do that we need uh to wrap our application with Apollo client provider and that is going to allow us to run queries from any part of our application remember as I was saying we are we are using the global providers inside our app directory underscore layout this is the root layout where we are doing with global providers so here what we need is we need two things we need to import the Apollo client Provider from Apollo client is it yes and also we need to import the client that we just created and we just set up so by having the Apollo client provider and the client we can go ahead and wrap it around our application I don't think it should be above gesture Handler so I'm going to put it below gesture Handler as a polo client provider and here let's send the client equal client make sure that um in my case this is a very common error like if it's a self closing tag that means that that our stack or other things will not have access to this client provider so make sure to remove this self closing and close it at the end because the way a provider works is the children everything inside it will have access to this CLI so that that's exactly what we need so if I do a Reload Apollo client provider did I mess up the name connect your client to react Polo client Apollo provider oh it should be Apollo provider okay it should be Apollo provider Apollo provider here just messed up the name let's rename it and also the closing tag as well now everything is working uh which is fine we don't have any errors which means that we have initialized our client correctly let's go ahead and try to send our first uh our first query the process to to send a query is the following go ahead on your steps and dashboard and build your query here and test it out and make sure that it works the way you want it so I'm going to start by removing everything and let's start by sending the query on the home screen that will get a list of um of tickers or a list of symbols that is going to be our codes request the symbol uh instead of hardcoding it here let's add it as a variable at not a dollar sign symbol here which should be a string now this dollar sign symbol we are send it to our codes query and I'm going to open up here and I'm going to say it I need in from the value I need the name I need the symbol I need the percentage change and I need the close basically the information in the data we need on this screen so let's try uh by adding here variables make sure to add the symbol here with multiple values let's try to send this request if everything works and if that data structure is the way you want it that means that our query is uh is complete and we can go ahead and copy it and we're going to use it in our application let's go ahead on the screen where we need to run this query and that is going to be up tabs Index this is where we have our top five stocks that currently are coming from the dami data now to do a query we need two things here a hook called usequery and the use Query come on use Query from Apollo client and also we need the the graphql or gql tag that will allow us to Define here the query the query string so the query string we're going to build with gql here we're going to add uh we're going to follow it with a back TI and inside this back string we're going to put the query that we copied from the steps and dashboard so now this is a graph query stored in a variable called query that we can run using the we can run in our screen using the use Query hook like this if we do that something is happening but without receiving the result we're not going to get a lot of benefit a use Query gives us back a object and the three fields that I usually destructure from here here are loading uh or let's say let's start with data loading and error uh Apollo client is handling for us the loading and error States so if it's still loading the loading is going to be true and we can check here if loading I can return an activity indicator right if there is an error I can return a text saying failed to fetch uh how is it called Fetch uh stocks otherwise if it's not loading and if it's not error then there should be some data so let's start by console logging data if I have a look in the console log here and if I reload our application we should see already an object here an object with a value code and inside it we see an array of actual codes so the data will have a field called codes because that's how we named our query codes so if I do data. Cod quotes uh and if I will put it into adjacent Dot stringify with two additional parameters null and two I'm going to see more information about this code it has a type name and it has a value so from this array of objects I actually need only an array of these things right because that's that's what we need um for the for the flat list an array of information of symbols and so on which is still null which we're going to cover in a second but because I started let me um Let's do let's do the following so as I say I don't need an array of objects that have a value I need an array of values themselves so what I'm going to do is data do codes I'm I'm going to do it the following data. codes. map and for every code I want to take only the code. value value now if I save we see that the the the array that we console log is actually uh an array of actual values about symbols so what I can do is instead of console logging it I will store it into stocks equal this and the stocks that I am taking from dami data I'm going to remove all together all right so we have something I don't know what's happening here but we have the problem is that if we look into the logs we see that name symbol and so one is null why because we forgot got to send the symbols the the symbols variable that we want to query to send a variable to a query in the use Query we need to pass the second object here with variables where variables is going to be an object that will contain the symbol that we need there and the symbol will be for example AAP uh IBM Microsoft uh um General Electric General Motors uh Netflix and so on not sure still what's happening a lot of data it keeps squaring oh because it's Json string if oh whoa whoa whoa chill I just need the mapping not the Jason stringified uh value but I can I would be able to use this console log Json stringify stocks to see what's going on there is it still n n n yeah it's still n n n n if I do a request from here varibles symbol uh let's try these variables right that we have here because from the dashboard it works from here it doesn't which is a bit weird and again it doesn't maybe to be honest maybe my API is getting um my API key is getting uh capped but it doesn't seem like it doesn't seem like it variables uh I'm going to open you know what I'm going to open the J to see uh the inspector and to see directly the network request that we are doing so here uh why I cannot zoom in does anyone know how to zoom in here because they cannot so if I refresh oh now it works and the Microsoft I think was a bit different so let's go go ahead and take some uh some tiers for our home screen uh we have IB IBM we have meta what else we have Nvidia Tesla AMD Tesla AMD okay uh here just a little uh Insight um I'm hardcoding like the tickers that I want to to request for my home screen uh which yeah I'm getting uh uh rate limited because I'm doing that too often uh but in a lot of applications what you'd like to show on like the home screen is maybe the Market Movers which are the list of stocks that uh that people should should keep an eye on the problem is that these are only available on the prop plan which I don't have yet so that's why I'm hard coding like a list of popular stocks that I want to see on the home screen so what's happening here and why yes after reloading we see uh a list of stocks that I have predefined there and they have actually the correct uh value the the price and also the percentage change amazing so we just saw how we can install a polo client how we can create a client how we can create a polo client that would connect with our graphql endpoint uh we added the authorization header and we made sure to uh provide it in the root layout using the Apollo provider now now because we have provided uh all our screens in our application including our uh home screen the stock screen they can run uh queries and mutations using the cook use Query to do that we first need to define the query object with the fields with a query that we want to run and the fields that we want to return and using the use Query hook we can execute that query it sends request to our graphql endpoint it receives it it stores it normalized it caches it and um it handles like all the loading error States for us and after that we just take this the data and render it in our flat list amazing uh yes perfect then let's go ahead and let's uh commit get commit minus M and this is going to be query um stock stocks data on home screen perfect the next step is going to be now if I press on one of these talks if I go to the details uh for example Nvidia we see that it doesn't display it because the details page that we can see under the symbol here we are still working with the dam data well let's go ahead and use and query our backend for information about this symbol uh the process is as following is the same one and let's repeat it we go to our um steps and dashboard let's remove a query and let's build the query that we want this one is not going to be code it's going to be code because we're going to only use one symbol the symbol that we're going to use is going to come from the variable called symbol of type string we take this variable and we send it to our query the field that we're going to get back is going to be the same name symbol uh close and percent change where is it percent change for now that's the only thing that we need to know about the co the the stock on this screen let's go ahead and copy this uh query and let's go in our application we're going to go on the detail screen which is our app and this symbol we need to import two things they use Query and the graphql from Apollo client and first we're going to need the to define the query that we want to run using the gql uh let's paste it the one that we created using steps and dashboard and inside our stock detail screen we are going to again have get the data uh loading and error error from not from but using the use Query hook here in the use Query we need to provide the query that we want to run and as the second variable we need the variables which our query needs the symbol so the symbol should be the one that we received from the puff parameter we don't need to hardcode it here any longer it's going to be the dynamic symbol that we found here so the stock where we're no longer going to take it from the symbol but we're going to do the following first of all manage the loading state so if it's loading return early and return an activity indicator which is a spinner if there is an error Let's do let's return this this stock wave symbol could not be found or fetched or something like this and then the stock is going to be equal to data dot data dot the name of our query inside here so data. code so if I go now to Nvidia it's going to load and we're going to get the information about Nvidia if I'm going to go to Tesla it's going to load we are going to get information about Tesla if I'm going to go back to Nvidia it's going to use the cached version so it's not going to we are not going to see a loading indicator even though the query behind the scenes is being updated so if there is any new data it's going to automatically refresh but the initial request the initial request is going to be out um instant so yes just like that we can uh our detail screen is also integrated with the our API and we no longer need the top five dumi data uh and I'm going to do that in the tubs index we no longer need the top top top five dami data ve as well so the first two screens they are working with real data uh so let's go ahead and do G add G commit minus M query stock uh details perfect uh the last query that we need to send is this time series right and that is going to happen in our component graph well as you can see we don't only send uh graph qu queries from from the screen level we also send them from different um components as well so on the graph layer we need the time series so let's go ahead in our graphql let's start building our query we have a Time series here for the interval uh and for the symbol we're going to use again two variables here symbol symbol of type string and uh interval of type string these values we're going to send to here interval and for the symbol is going to be symbol let's open the the object and let's see what information we're going to get back for the meta I don't think we need anything from the metal because this is the the symbol the type and so on we will only need the values for our graph and we need the values for from the values we need the date time and we need the closing value so if I send now a request like this uh it's going to be null because uh because our interval we need to provide in variables here and if it's required we can put it as required here so if I do here if I put a exclamation mark we're going to see an error that the variable interval is required and for the symbol as well like let's make them required uh I'm going to take only one symbol and I'm going to send here the interval of one day if I do run we're going to see a list of values and the interval between the two of them is one actual day perfect uh that means that let's go ahead and take this query and in our graph let's import two things we're going to import the use Query hook query and the graph ql from Apollo client let's define the query that we want to run here using gql and paste the query string let's run this query at the top of our component and we're going to get data loading an error error using the use Query and here we're going to provide the query that we created we also need uh some um variables such as symbol so in the variables we need the symbol which at the moment we do not have it so let's just do AAP and for the interval we need one day for now later on maybe it's going to be adjustable now let's do the following um the use state I'm going to move it a little bit uh to the top maybe even as the first line before the use Query because between this use Query and before handling the the points I will do some checks here so if it's still loading I will return an activity indicator uh if there is an error I'm going to return a text saying error otherwise I'm going to start by console logging the data so if I go here to the Tesla what's going on points. length yeah here we don't have access to points. length so I'm going to remove them if I go to IBM for example all right the information is there uh if we look at the console log data we see that we have this time series so instead of using the dummy data here that we imported from assets let's map through data dot time series as we see it here timecore series just like that we have real values Apple but all of them are for the symbol Apple because the graph doesn't yet know what symbol are is it trying to render so let's go ahead and uh receive the symbol through the properties uh and we can also type that hey symbol should be of type string now if we look at the application detail screen of our symbol we're going to see where we render a graph we have to send where a symbol that we are trying to render as well and it's going to come from stock dot symbol and just like that if we refresh if I'm going to go to Apple we're going to see a graph for Apple if we look at AMD we're going to save a graph for AMD IBM all of them yeah I'm getting rate Limited oh wait wait wait wait wa wait I'm still only quering Apple I just need to remove apple and double dots in order to take them yes So Meta we see it's going down uh Nvidia also it's a bit down Tesla we see it's going up and we can move and see the actual values on different dates perfect yeah I'm getting rate limited I'm sending too many requests but it's so fun to play with it it looks so nice yeah here as you can see I go above a line but yeah I I will wait a bit and uh it's going to go go back but now as you can see the graphs are also fetched from our graph API which is getting data from this 12 data perfect amazing so let's go ahead and do the following uh we are going to do get OD get commit minus M and this is going to be query uh graph date at the end if we have time we are also going to implement a feature to switch uh the the time period for example very similar to how Yahoo finances is doing so if you're checking something you can take check like one day interval 5 day intervals one month six months and so on so if we have time we are going to implement that but the next feature that I want to implement which will open the doors for you to a lot of new other possibilities is being able to save stocks as favorites and with this approach with being having to to save something as favorite we're going to integrate our uh steps and graphql with a custom database a custom database where we can write anything that we that we want and this will allow you not only to use outside data that is coming from 12 data uh so not only using external data but also adding on top of it custom features for example by connecting with a pogress we will I will show you how you can Simply Save favorites but in future you can Implement things like being able to track your personal portfolio so yes information about the stocks is going to come from external API but information about user's personal portfolio you as the application will have to manage it so for that you will need a custom uh database uh where you will store this information and you will merge it in a way with external stock data this is where IBM steps in is actually uh bringing the most value in this project because so far you might have been thinking like why do we need that graphql uh layer here on top of the rest API couldn't we simply query the rest API in our application well we could but in a situation where we need to bring data from multiple places such as our situation right now it would be very hard to to do that with graphql API we're going to Simply connect uh connect it with a different data source in this case we're going to connect it directly with a postgress SQL database and and we're going to be able to merge this data together into one single unified graph end point that we can query and from the application from the client side from the front end we don't need to think about where is this data coming from we only know that hey uh we have this Builder it with a documentation it shows us what data is available and we can query it that's it that's the the power of of graphql so yes we are getting into the last chapter of the tutorial and here I'm talking uh connecting uh our graph API to a custom database to create a you can create and host a pogress database in a lot of different ways you can even do it locally if you know how to to to set it up but for Simplicity I'm going to use uh a service called new one. Tac which allows us to easily create pogress databases uh that are store serverless so I'm going to use it in development you can also use it in production they are pretty powerful but what I like about them is they the user interface which is really modern and easy to use uh they also have a free tier where you can have one project and unlimited databases so let's go ahead and sign up create an account I'm going to go ahead and I'm already signed up after you uh create your account on neon uh. te this is where we will simply store our postgress database let's call this project stocks uh the database name I can leave it like this and let's press create project that's it our progress SQL database has been initialized has been deployed and we are ready to connect with to it we don't want to connect yet because we don't have any tables yet so if we go to the tables uh tab here we see that we don't have any tables let's go ahead in the SQL Editor to create some tables using some SQL if you know SQL you can create it here if you are new to SQL you can uh use charity it's very good at uh creating these uh SQL queries I have actually prepared a query like some queries for you that first creates a table called favorites with a column id symbol and user ID it inserts then a default value and then it runs a query on it so let's copy these three lines in our Neon console in the SQL editor let's remove everything that we have here and paste our code let's run the queries and at the bottom we should see the result of the three queries the first one your query ran successfully that's good that was for creating the table the second one was for inserting the table and if we look at the third one we should see one item here with ID one with symbol AAPL for for apple and the user ID Vadim and this record if we go into the tables now we should already see one table called favorites with this value what this means is uh this means that a user with ID Vadim uh favorite or saved as a favorite the symbol AAPL so from our application we would for example highlight the the fa here and maybe in the second tab where we would want to see all the favorite stocks we're going to query only the ones with their favorite okay now we have our postgress SQL how do we connect it with our graphql well if you look at the stabs and homepage you can see that steps and then connects with different data sources with rest this is connecting with rest apis we already saw that we did that in order to connect with our stock data provider 12 data bsen also connects with SQL backends using another directive called DB query that's mind-blowing because we can directly connect from from staban to a database and by using the same steps and import database command we can go ahead and automatically create our queries and mutations that will be executed and written to our database so if we go to the documentation we can see how we can go to pogress SQL page and here we can see how we can use tabs and import postgress SQL to create a graph API from a postgress SQL database in minutes so let's copy this command because it's super simple to do let's go in our project is it no it's not this one it's this one uh yes let's go here let's open the the terminal and let's make sure to go to the a to the API folder make sure if you do LS here but not LS but PFD that you are in the/ API folder now similar to how we did steps and import corl we we're going to do steps and import uh postgress SQL enter step then will ask us what is the host of your database let's go uh to our newon console let's go to the dashboard and here below you will see the conect connection string Under The Connection details instead of connection string let's choose parameters only in parameter only the first one is the PG host which is the one that we need the host of our database let's copy it let's paste it here for steps in what is the username the username is PG user from the dashboard copy it paste it here password I'm going to show it to you but later I'm going to delete it so let's press enter and lastly what is the database that PG database is neon DB enter and for here we can leave blank so let's press enter and the next question is if we want to link no we don't want to link at the moment press enter that's it that uh and if we look into the other terminal where we have running steps and stars if you don't have it open just do steps and start inside your API directory and if you have done that we can go to the dashboard dashboard we can uh refresh our API and under the queries we see that we already have four more queries favories by user ID favorites by user ID and symbol favorites list and favorites pin list if I go to the favores by user ID and say Hey I want to query the id symbol and user ID for favorites where the user ID is VM I'm not going to need here or let's let's actually do here user ID uh is going to be a string and the user ID let's pass it to the user ID field here and in the VAR variables down below let's actually prepare because we're going to need it in a moment user ID Vadim so if I do that and run the query the first time uh it takes a bit of time because it's uh it's load it's uh uh spinning it up uh but next next queries they are going to be much faster and we see that hey there is already a favorite for the user with ID uh Vadim and his symbol of his favorite symbol is Apple that's exactly what we need and that's how simple it was to connect uh a postgress SQL database to staben and create a graphql layer on top of uh of the database if we have a look at the things that was generated we have a new folder called postra and here in the pogress we see uh a lot of queries for example favorit by user ID we see favorites by user ID and symbol favorite list and so on but also mutation for deleting and inserting favorites uh if you need like custom uh queries you can create them yourself and simply provide the SQL query that should be run here so it's very configurable you can do a lot of custom queries that you need but at the same time staben uh is predefining some queries and some mutations for you to get started and in our case that's everything that we need and where the favorite data is going to contain id symbol and user ID before we integrate that but no let's let's actually um let's actually integrate that query it in our application run some mutation and after that we're going to see some other benefits of steps and of how we can connect them together um for example on tab two what I want to do is I want to send a request for all the favorite items right so what I'm going to do is I'm going to go in the application in tub tab two and here let's go ahead and similar to the first I to the first list I want to to render a flat list of symbols but only this time they they should be my favorite symbols so I still am going to have like the the flat list and the stack screen so let's copy it from index to tab two I will put them here uh let's import stack from from export router the title is going to be favorite the flat list let's import it from react native data is going to be empty string empty array at the moment we need to query it and stock list item let's import it here uh so if I go here we don't see anything all right well what do we need we need to query our favorite stocks we saw a query already uh in our steps and dashboard by cing favorites by user ID we can get a list of favorites perfect so let's import use Query s and gql from Apollo client the query that we're going to run is going to be use is going to be gql and it's going to be this one that we Define in the dashboard my query favor is by user ID where we send the user ID and it we give get back the symbol the symbols that the user favored let's go ahead and run this query and get the loading error and data by calling use Query and sending this query the query needs a variable so let's send variables as the second parameter and the variable is going to be user unare ID is Bim if it's loading if loading I'm going to return an activity indicator from rack native if it's Error I'm going to WR uh a text saying fake failed or just simply error otherwise let's go ahead and console log data console log data so if I go to my favorite screen uh I don't see anything because it's still Mt here in the flat list but if I look here we see that hey we have some information we have favor by user ID which is an array with actual data so let's go ahead and do here const stocks equal data Dot and the field it should be this one favor is by user ID and let's try to use it in the flat flat list as the stocks here so if I go here we see the Apple stock here the there are a bit of issues right now because we only see the symbol we don't see a name and anything else we're going to handle that in a moment uh but before we do I will um before we do I will go ahead and do the following um I want to when we go on one of these screens if I press on the star uh I want to for example here if I press on the star I want to add this symbol to the favorites uh so far we saw how we can run queries to add a thing as a favorite we need to write something writing or updating stuff with graphql is handled not by a query by but by a mutation let's go to the graph qu dashboard let's remove here the query and here under add new let's select a mutation uh you might not see it properly I'm going to do it like this but yeah under add new I'm going to select a mutation let's press plus and now we see here to available mutations delete favorites and insert favorites if I'm going to select the insert favorites and if I'm going to provide here for the symbol I don't know um Google and user ID V and then I'm going to take id symbol and user ID and run this mutation we're going to see that this uh is going to create a new item in our database with this data if I go to new on uh database and refresh my table we're going to see that the mutation from graph Q let's open Favorites reached our database and it added the data here here so what we need to do is we need to run this mutation when the user presses on the on the star in application to do that uh the last step in the mutation is to add here variables for example symbol let's call it symbol with dollar sign should be of type string and required and the same user ID should be ofp type string and required and now we take the symbol and instead of hardcoding it we're going to use symbol and the same for user ID we take user ID and instead of hard coding we put it here okay so now that we have our mutation let's copy it and let's think where do we need to to handle that I think we need to handle that on the components in the uh stock list item stock list item here we have this star and the star if we add the onpress uh on favorite press let's define it here const console War hello I'm still not sure like uh yeah it if we press exactly the icon it's not going to navigate if we press anything else it's going to navigate so that's good that means that when we do that we want to run and execute the mutation of inserting the mutation that we defined here of inserting a favorite so let's copy this mutation and at the top we're going to need two things this time we don't need to use Query this time we need to use mutation and the gql from Apollo client let's define the query where in this case the mutation using the gql and here we're going to paste the mutation string I'm not sure what's happening here stock list item uh what expected it's a bit weird but I think it should work maybe something wrong with my preter gql is it gql oh no it's shouldn't be import it should be con okay my bad so now uh using the use motation hook we need to Define this one uh we need to Define this mutation here const uh equal use mutation we need to provide the mutation object and we need to also provide here variables function that when executed will run the mutation because we don't want to run it as soon as possible we want to run it only when the user does something and the second one is going to be the same dat error and so on uh I'm going to leave it like this and in the variables if you know the variables ahead of time you can provide them here for example for user um ID I can provide it here as uh by dim and actually the the stock as well like the symbol I know it as well here in some cases you don't know the the variables uh from the beginning Maybe maybe you need them to take from a state variable so in that case when running the mutation we can also send and overwrite some variables in this case stock do symbol so when we press on favorite let's simply run the mutation if I do that and I will press on the Tesla not sure what's happening but let's check the database uh let's refresh and check the favorites database we see a new item added with a symbol test la and the user ID by them perfect that's exactly what we wanted and again you can send here different variables as well if you know them only when the user does the action and you don't know them right over gate but in our case it's a bit easier so this way we have added uh we have executed a mutation and added a favorite Veer now if I go here maybe if I will read refresh and if I go to the top two we should see three of them Apple Google and Tesla but at the same time we don't know all the information about this uh this symbols because if we want the name or the price or the change we would have to at the moment when quering the I'm going to look into the history to check my query for favor by user ID if I'm going to do that like I only have access to the symbol here even if I look in the Builder it's only the symbol I cannot get the name and so on because this query from the database doesn't have that things so an option would be to send another request to the code after we get this the favorites to the code to get details about that code but that goes against the the principles of graphql of having to send one request and getting all the data that we need so we don't want to send multiple requests we want to get all the data we need in one single request with uh staben the benefit is that we can connect data from different sources and we can connect between them and this way uh creating a unified schema that uh combines this data so what do I mean by that in the pogress index here I want our favorites to have one extra field with details about the code the type of this code is going to be if I look into the code it should be I want all this information so the type is going to be code but how do I get this data here well we can use a directive called materializer m realizer m realizer and the materializer helps us connect different queries in one for example with materializer we need to specify what query do we want to run to get this code the query is called if I look in the code is called code and it has remember the code has a property called symbol so let's go in pogress we say that hey I want to run a query code to get more information about this favorite but that one also has some arguments so arguments is going to be an array where we say the name of the argument which comes from the code I will check here the name is symbol so the name symbol should be equal to the field from our object which is is symbol here so whenever we are going to ask for the code of a favorite it's going to take the symbol from here and it's going to run a query called code by sending the symbol to the parameter symbol does it make sense hopefully it does and here let's see step Zen has been deployed and if I will refr copy this query and refresh we see that now the favor by user ID has a code which which I can get for example name I can get clothes uh I can get percent change and so on so if I send this request now I get all my favorites as I was getting them but at the same time I get the details of the codes and all of this data is coming from two different sources this information about favorites is coming from our custom pogress SQL and the information about the code itself is coming from a external API called 12 data that gives us information about the stocks so just like that uh we have we get more information about them um we need name symbol and close so let's copy this code from here let's go to our uh source application tabs in the tab to where we have our favorites in the request in the favorites by user after all of this I'm going to add the code information so now I don't even need this user and symbol I will only go ahead and uh map from favorites to their favorite codes so in the stocks favorites by user I'm going to do dot map for every favorite I will only take favorite. code because that's what we need here and just like that we have our codes here so if I'm going to add meta here and if I'm going to refresh you can also do that it will refresh automatically uh it's going to be added here but again I'm getting rate limited so even though in the neon database I see the I should see the meta uh because I'm rate limited uh I don't have a premium API meta uh I don't see it here but after a couple of refresh or a couple of time it's going to query it properly as you can see yeah now I'm getting hardly rate limited so yes just like that we saw how we can use materializer to uh to connect or to connect the two Fields uh from different parts of our API and you can do the same vice versa for example in the code index for example under a code we can add here a field called is favorite and we can query this field using um the answer is going to be uh or yeah let's let's do favorite and the answer is going to be of type favorite and we're going to get it using materializer we're going to do a query called uh favories by user ID not favories by user ID and symbol uh so favor is by user ID and symbol and for the arguments we're going to pass their user ID and symbol for the symbol we're going to take it from here okay but for the user ID we need to I will probably hardcoded viim here for a moment so now let's check if arguments invalid symbol oh uh oh no no no no no it should be another object another object where name is user ID and field or maybe not field value can it be value is going to be viim unknown field user ID value can I do here how to hard code it value Val value value field materializer let me check quickly with docs materializer uh combine so arguments field [Music] uh how would you how would [Music] you yeah like I don't know how to to hardcode it in this situation i' would have to check the the the um the API but this way we can have the visce Versa like whenever we query a code we can check the favorite and did it uh deploy yeah it has the user ID doesn't have a mapping favorite M field selection requires a favorite head oh and it's going to to be a an array of favorites but it needs the user ID which I don't know how to take let's also call symbol which doesn't make makes sense but just for me to to see what is deploying yes and now that means that whenever we in any part of our application where we call a code we can also take the favorites uh by refreshing I will have access to favorite here and it's going to tell me if there is an item favorite in the API so in this case we know that apple is not favorite and so one but uh we need to aut to update it in order to properly send the user ID to to to that request so that's how we can connect them uh between each other and based on this uh favorite field you can uh either highlight the the star or not so with that being said I'm going to go ahead and do get ad get commit favorite with postgressql favorite all right guys so that was everything that I wanted to teach you today so in this tutorial what we have done is we have implemented the stock tracking application and uh on the home screen we are quing a list of stocks we can check the details of them and uh I encourage you to continue building this project because you can add some small features that would imp improve a lot the the application because for now we can only display v stocks but by simply adding an input field here where the user can manually type a symbol you can allow him to check any kind of stock data and yes now we see that we not only take information about the stock but also the display play on the graph with more information about that stock we can also favorite them and they will appear in our favorites uh so yeah that's that's the the tutorial I hope you enjoyed it if you did make sure to subscribe to the channel it's going to help us a lot reach more developers and I want to remind you that uh next Tuesday a full stack um very in depth tutorial that we worked for the last three months is dropping so make sure to to stay tuned for for that tutorial thank you very much staben for sponsoring this video I'm rushing because I really have to uh to go and end um and end the the the live stream before um yeah so let's continue our discussion uh in the comment sections I'm going to answer I'm going to try to answer as many comments as possible and yeah see you next week with more tutorial like this all right guys have a nice evening and keep building awesome applications keep learning and keep rocking bye-bye guys

Channel: notJust․dev

Views: 17,410

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, react tutorial, react native tutorial, react native ui, react native for beginners, React Native, Stepzen, Stock Price Tracker, Mobile App Development, Stocks API integration, User Interface Design, GraphQL, App Performance Optimization, Interactive Graphs, API Integration, step-by-step tutorial, react native first app, stocks price tracker react native, react native app guide

Id: Z1UkQuwY4bk

Length: 238min 55sec (14335 seconds)

Published: Sat Feb 03 2024