You need to sign up here to follow along: https://bit.ly/rapidapi-hub In this video I show you how to make a Crypto Dashboard using two APIs. This project is great for those looking for fun projects to make with unique APIs.
hello everyone out there on the internet today today i'm going to be showing you how to use apis in order to build out a
crypto dashboard our crypto dashboard is going to have a currency converter on it
in which we will be selecting from a list of currencies in order to convert one to the other based on a certain
amount we will also have an exchange rate display that will show us the currency live exchange rate between the
two currencies and a cryptocurrency news feed as well that will bring back seven articles along with the url that we will
encapsulate the title of the article in to get the latest data we are going to
be using two apis from rapid api one being this currency converter api
right here and the other being this crypto news api right here this tutorial is perfect for those
wanting to learn how to use apis and how to use them in react projects in order to build out their front-end developer
portfolios the only prerequisites for this video is to have a basic understanding of the fundamentals here
so css html javascript and react okay so what are we waiting for i'm
excited let's do it okay so let's do it
so here we are on the rapid api hub rapid api hub is a platform used by
developers to find and connect to hundreds and hundreds of apis as you can see right here i like to use rapid api
as i can literally scroll through all their options in a categorized way and
not only that once i have a rapid api key i can use the same key for all the
apis that you see here okay so no need to sign up to various
different platforms and manage hundreds of passwords and api keys you literally
just need one to access all of these for this tutorial the apis that we are
going to be using are this crypto news live api to get a news feed in our app
as well as this alpha vantage api that we're going to use in order to get the
cryptocurrency conversions okay so these are the two we need let's
get to it so i'm just going to bring up my ide of choice of course you are free to
use whatever ide that you wish this is just the ide that i will be using for
this tutorial and i'm just going to create a new project and this is going to be a react app so
i'm just going to click here and that will bring up the command that i need in order to spin up a pre-configured react
app okay and here is what i'm going to call my project so let's go ahead and call this crypto
dash board for those of you who have not used this
command before it's really great as it allows you to spin up a single app
application with all the files be configured so for example with all the correct dependencies and all the correct
file structure okay so let's get to it i'm just gonna click
create just like so and that should spin up my app for me
there we go you will see all the dependencies being installed all the files being created and you should see
that populating in my crypto dashboard project right here now for those of you who aren't using
webstorm you can of course do this using your terminal so i would simply go into
a directory of my choice such as development and then i would use nph create react app and just simply call
this something let's go ahead and call it crypto dashboard again and just click enter but
of course i'm not going to do it this way because i am using webstorm to do this but that is an alternative for
those of you using something like vs code for example okay
so this should be done any second and done
happy hacking okay wonderful so as i said you will see all the files being generated in here
i'm not going to talk you through this because this tutorial has the assumption that you've already worked for react so
i'm not going to talk you through what a dot get gnaw file does and what a
package json file does however just know that all the dependencies we need are
here they have been installed thanks to npx create react app but we are gonna add one more okay so i'm just gonna get
up my terminal just like so and using npm i i'm gonna install the package
axios okay so i'm just gonna let that install
and for those of you who don't know axios is a promise based http client for
the browser and node.js so we can use axios in the back end or the front end
which makes this perfect for our project if you want to have more of a read about axios and how to install it as well as
the code you need to get started please go ahead and visit mpmjs.com so the npm registry forward
slash package forward slash axios okay wonderful while that is installing i'm
just going to go in here and actually delete everything that we don't need so i'm just going to go ahead and delete
anything to do with tests and setting up web vitals as well as the logo as we will not need that so i'm simply going
to delete these files like so and delete anyway
and i'm also going to get rid of the app.css file as i want all my styling to be done in the index css file so just in
one place as this is a small project and i'm just going to get rid of this app test file too
so just like so great so now if we look in app js well
we don't have these two anymore so i'm just going to delete that i'm going to delete these semicolons just like so
and save this page i'm going to go into index yes and once again just delete everything that we don't need along with
the semicolons because i don't really like using semicolons but that is totally my choice and it's totally up to
you great so let's have a look to see if that is done and wonderful so the axios package has
been imported if you have a look in the package jason you will see it show up here along with its version okay so if
you are having any issues in the future it could be down to the fact that this package in the future is now outdated so
please go ahead and revert back to this one if that is the case same goes for all of these as well
okay wonderful so now that we have that let's continue to building our app so i'm just going to go back in here and
first of all we need to start our app so in webstorm i can simply press this button and that will run this script
right here so the start script or if you're not using webstorm all you'd have to do is go npm
run start but as we don't have to do this because we are using webstorm i'm just going to go ahead and click
here and that will spin up our app
and uh logo is not defined so let's go back to our js file and get rid of the
logo and just click save and there we go so let's just go ahead
and visit this url now and wonderful
so there we go that is essentially what is showing up here just without any styling just to show you that i am not
lying i'm going to change this to anya and it changes to anya so that is
working i'm actually going to get rid of all of this code as well as well as this
div with the class name of app as we don't have it anymore so let's just go ahead and have two wrapping
divs just like that and there we have it we now have the basic structure to start our react app
i'm just going to change this to be a function expression as well again this
is just my personal preference you could have kept it as a function if you wish great
so now that we have a blank slate well what do i want to do i want to create an app that on the right has a news feed
and on the left has a currency converter that will also show us the currency converted exchange rate
so i'm going to do this with components so i'm going to create my first component as we said i want a news feed
on the left so i'm going to create a component that will have my news feed in it so just on the same
level as the index css file i'm going to create to go new directory and i'm going
to call my directory components where i'm going to store all of my components so these components are essentially
react components and i am just going to create a new file and let's call this
newsfeed just like so and in here well just like we did with
this component right here so i could actually just copy this if i wish
and paste it in here and then rename this to news
feed making sure to rename it down here when we export it as well and of course
delete that so this is now our news feed
just like so and then perhaps just so we can actually see it as well i'm going to
give this the class name of
newsfeed great
use feed use food so this is looking good i am happy with
this let's carry on i'm actually going to copy this again because we do want to make two more components
so let's go back to here we have a news feed component and on the
left i said i wanted something to show the currency converter
so just like so so that is going to be our conver con
ver so that is going to be our second component if i spell that correctly that
looks good so once again in here i'm just going to create a new file i could
just select javascript file if i want and i'm going to call this currency converter
just like so we don't need to add js because it already knows this is a javascript
file so there we go we've got a currency converter and once again i'm just going to click on component let's call this
currency converter that's correct making sure to export default it down here and
also maybe let's give this some styling just so we can differentiate between the two so i'm going to call this
you guessed it currency converter
great so now just so we can see what's going on before we add the third component let's style it up
so in here let's go ahead and just keep that code for now i'm going to get the news feed
class so dot for class and let's just give it the background color of red for now
and then i'm also gonna get the currency
and go background color blue okay so great we've made two components i
also now need to import these components so import
news feed from and because it's an export default it actually doesn't matter what we call this okay it will
know that we want that component so we need to import it from components
news feed just like
that making sure that news feed is spelt exactly the same here so now this
whole component is being imported into my app once again like i said it doesn't matter
what we call this we can call it whatever you want as the export of the component is just a default so we just
know that whatever this is it will be imported into here as whatever we call this
great let's do the same for the currency converter so import currency
converter from components and then currency converter
so now if we look in this browser you will see the news feed and the currency converter let's perhaps just go and make
sure that this says currency converter just so we can
know which one we are talking about at all times okay so there we go news feed and currency converter however as we
said we want the news feed to be on the right and the currency converter to be on the left so i could do so easily with
some styling so let's go back in here and on this div let's just go ahead and give this the class name of
app and go back in here just above here i'm going to add a app class and i'm going
to say display
flex okay so now the two appear next to each
other wonderful while we are here i'm actually just going to give it some more styling just
to make sure that they're always uh next to each other no matter what fret selection column will just mean that
they're always next to each other and i'm going to align items in the center
okay so that is just something for the future when we start building this out a
little bit great so we have created two components however i did say i want a third and
that third component is going to show us the exchange rate so let's go ahead and
create an exchange rate component so once again in here create new file let's
make a javascript file and i'm going to call this exchange
rate we could call it display if we wish or we could just say just exchange rate
component it's up to you so i've just added that and once again
i'm just going to basically copy this because it's exactly the same and i'm going to call this exchange
rate export the exchange rate component and
let's just give it the wording of exchange right here and once again let's also give this a class name so i'm going
to call this exchange rate so there we go
i'm going to my css file and once again all i'm going to do is simply give it a background color so we can differentiate
let's go ahead and give this the background color of green great and now this time i don't want to put my
component in here okay i actually want to put it in the currency converter so i'm going go in
here and import import
exchange rate from and because we are in the same directory this will be very
easy all i need to do is essentially just go to the file so just
like that and where do i want to put it well i just want to put it below here so i'm
going to put in the component like so and now if we look here
wonderful so actually i want these flipped around so i'm just going to go ahead and do that
making sure that the news feed is after the currency converter and
great so we've got the news feed on the right we have the currency converter on the left which also includes the
exchange rate in it as a child so the exchanger is the child component of the currency exchange component which i have
missed name again let's just go currency con versa again this won't be important i'm
just showing you this for now wonderful so now that we've got that let's get to
converting some currencies so i'm going to be doing this in this component right
here so i'm just going to get rid of all the others we're not going to need them for now i will keep the css file as that
could be useful in a bit so the first thing that i'm going to do
is let's actually just create an h2 tag and put currency converter in it just so
that we know what is going on here so let's call that currency converter and now in here what i actually want to do
is create a table okay so i'm going to create a table
just like so just to make sure that everything is structured at all times so here is my table
tag and as you might all might know when we use the table tag with the jsx we
actually need to put a body tag in here as well and now we can start
making table rows so i'm going to make my first table row and in it
and in it i'm going to have a table data cell which i'm going to give some text to which is going to say
primary currency just like so so there we go
and now i'm going to have another table data cell but this time in this table
data cell i'm going to show you how all this looks like in a bit i'm going to have an input element
okay and this is going to be a self-closing tag and the input element
well i only want numbers to go in here so i'm going to give it the type of
number because currency should be in numbers
let's also give this a name for good practice so i'm going to call this currency
amount 1 and then the value which at the moment
it's not going to have a value so i'm just going to leave it as an empty string like so and let's have a look at what this looks
like so there we go we have a table which the row consists of primary
currency and then an input which allows us to select different numbers okay great
before we move on i do actually want to put this in a wrapping div just because i feel like it should all be in a
wrapping div so we can give it some extra styling around the table so i'm going to grab that entire table and put
it in this div just like so and then let's give this div a class
name of
input box as that is what we are creating and we actually need one more table data
cell so here's our first one here's our second one let's put one
last one before we move on to the next row and in this table data cell i
actually want a select element
and in this select element well i'm gonna have to put some stuff in here
so we need a value which once again i'm just gonna leave
empty for now let's also give this a name
this is going to be called currency option one as it's going to be the currency that we first choose to convert
to the other let's give this a class name of again let's just put
currency options for now not currency option one as we're
going to apply this class name to uh to select elements and then we're gonna have to have some options so i'm just
gonna leave one option for now but we will be mapping
an array onto more options making sure that is outside of here
and in between these two select tags so right now could be a good time to just reformat this just to make our code
a little bit neater format file run
okay so that is looking much neater let's carry on so now if we look in here
you will see private currency an input and a select with nothing in it to select i want two of these okay because
i want a primary currency and then the second currency as to which is converted to so i'm simply going to grab all of
this so the whole table row trs for table row and simply just paste it
again and this time let's call this secondary currency
currency amount two currency option two so whatever option
we choose and this is looking good wonderful
so now i think it's time to actually get some currency options so let's go ahead
and do that up here right under where we return the jsx so
i'm actually going to hard code these currencies this is because the api that we are using returns so many
currencies not all of them crypto and i want to make sure that they're all crypto so all i've done is simply use
this api right here the alpha vantage one and done some research on what kind
of cryptocurrencies it has and what format we need to put them in okay if you want to do your own research
please go ahead and see the documentation and read more so all i'm going to do now is use what i
have previously found again this is my research and i know that this api takes
bitcoin in that format ethereum and i'm just going to maybe copy paste the rest
because again i don't want to be here while you watching me type it out
so those are the ones we're going to convert to i do have us dollars in there as well so maybe that's not the only
cryptocurrency one but i think it's a useful one to have so there we have our currencies it's an
array and i'm going to use this array called currencies to map out the options
onto different option elements so here we have our option element and
to map onto it well i'm going to show you how to do this we need to put this in some
curly braces and then i'm going to grab the currencies array and use the javascript method of map
to map again i'm just gonna wrap that around in parenthesis and for
each item or for each currency let's call it in my currency array so for every item
that exists in this array i've called this currency i can call it i i can call it whatever i wish and for each of those
well what do i want to do so again let's just use our parenthesis to wrap the option
i want to essentially just
put the currency in between these options okay so there we go that's really it i'm going to make this smaller
for you so if we now look in here you will see my currency options
uh we are not yet done however for best practice i do need to put an index even
though we won't really be using it so as we are not going to be using it i can
simply just do index like this
okay so i pass through an index but we don't really need it it's not really that important and hence i'm putting in an underscore it can be ignored
so that means we also need to put a key on the option so i'm just going to pass through the index
ah let's have a look at our warnings now okay
apologies this should be tea body not body that is my fault
and where is the other one tea body so that has been updated
great and it's telling us to put in a value okay this we are aware of we have left it blank for now
wonderful so we finished our first select let's carry on i'm gonna also
apply to the second select so just like we did up here i'm just going to grab all of this
and also map onto the options and the second select right there so wonderful
so that is looking good the next thing we need to do is actually save the selected option to state so i'm going to
show you how to do this now so for this we're going to actually have to
import use state from react i'm going to do import use state
from react hopefully you know how to use use state if you don't please go ahead and research that now otherwise feel
free to code along with me i'll do a brief overview of what it is
so to use use state to save things to the state of this component what i have
to do is use this syntax so for example if we want to save the first
chosen currency let's choose to call this chosen primary
currency for the first select and then we're going to set
chosen primary currency like so and use used state
for now i'm going to pass through no okay so what i can do so at the moment
using use state i am saying that chosen primary currency is null but i can
change that value by using set chosen primary currency making sure that it's a
small s so i'm going to do that now i'm going to use this and on the select i'm going to say that
as soon as this changes so whenever this changes in value i'm going to pass through e4 event you
can pass through the whole event or you could just pass through if you wish and i'm going to use set
chosen primary currency to change the value of chosen currency to whatever the
value of my select is okay so hopefully that makes sense if i now
console log chosen primary currency we look in here
so let's have a look at the first one at the moment it is null because that's what we use state to set chosen primary
currency to however if i select ltc we have changed chosen primary currency to
ltc we can also get it to display in here and i can do so easily simply again
on the select changing the value to you guessed it chosen primary currency
so that is looking good now there is one thing that i just wanted to make you aware of because we
are starting at no and as you can see here it says btc this could potentially cause errors okay because we think that
we have chosen btc but the value of chosen primary currency is null so i'm
going to actually hard code this to be btc just to be in line with what we see
wonderful so we've done one let's do the other so how do you think we would do this other select
well quite simply we do it the same way so i'm simply going to copy this and we're going to do chosen secondary
currency so it's chosen secondary currency also we'll start it at btc
let's console.log chosen secondary currency just to make sure everything is working fine
and on change of the select so on
change sets chosen secondary currency to e target value and also show the chosen
secondary currency here set chosen secondary
currency it's very long i think that's fine set chosen secondary currency so now if we go here and then
let's just check this work so refresh as you will see the chosen secondary
currency is btc and if i change it to ada there we go
so wonderful we are storing the first chosen currency we are storing the
second chosen currency the next thing we need to do is
store the amount that we want to convert to state because we're going to have to send all three of these things over to
our api so as you will see here to get a
currency exchange rate for crypto here well it's asking us for the currency
we're going to change it from the currency we're going to change it to and then we are choosing to save the
amount so that we can get the exchange rate and multiply it by the amount we want to exchange
so great let's go ahead and do that so once again up here i'm going to go
const amount set amount
use state and i'm going to pass through a 1 as a default okay because we want to convert
one of a btc to whatever the currency that we choose to convert to
so at the moment amount here is the number one but we can change that using set amount so i'm going to do so on the
first input so just up here and this time once again we're going to use
unchanged
we're going to use e for event and we're going to use set
amount and pass through e target value okay so
great now we are saving all three things let's just go ahead and check if this
has worked so i'm gonna console log the amount but i'm also going to show the amount
in the input itself so let's have a look obviously one is
showing up as we used use state in order to do this and if i now change it to two
you will see the amount changing as well so we have all three things saved let's
carry on now it's time to actually use
this piece of code in our project so i'm going to hook this up i want to
say that as soon as i click a button then we make this get request so let's
go ahead and create a button i'm going to do so right at the bottom here
after the table so there we have our table let's go
ahead and create a button i will be formatting all of this a little bit better at the end let's just continue
for now and the button is going to say convert and let's go ahead and give this an id in case we want to
style this or anything like that i'm going to call it convert button just like so and i'm going to say that on a
click i want to let's possibly call back i want to
convert so this is a function that i have not yet written in fact i'm going to write it
now so i'm gonna write this function up here so const convert equals and i'm gonna
just write a function so what do i wanna happen when we press the button well i
essentially want to make a get request so i'm simply going to get all of this and i'm going to
paste that in here making sure to take this out and we're going to import axios by
ourselves here so import axios from axios this is the front and way to do it
great so we've imported the package that we installed as a dependency at the beginning of this video and we can now
use it in here as you will see we are making axios request i'm just going to tidy this up a little bit i don't want
to use var let's use const and once again let's just get rid of any curly braces and i'm just going to use arrow
functions here too so just
like that okay
so now as soon as we have all three of these well i want to make a
get requests so i'm going to replace this with the chosen primary currency
and i'm going to replace this with the chosen secondary currency so just like
that and for now let's just check this works let's just go in here
and press refresh and i'm going to keep this as a one and i'm going to change bitcoin to us dollars and click convert
and there we go we are getting back our data so as you will see here is our data it's actually
the same data that if we tested this endpoint so if i go ahead and click test endpoint we're getting the exact same
data okay so this is looking good if you haven't signed up to this now is a good
time to do so otherwise you can't test the endpoint and what we have done might not work for you so please go ahead and
sign up to use this as you will see i am subscribed this one does have some
pricing that comes along with it so we can only make 500 requests a day however as this is a personal project that
should be fine i do not expect to go over this per day okay
so wonderful let's carry on so hopefully that is now working for you
once again you do need to be subscribed in order to use this and in order to test it so if something is not working
for you it could be because you have not subscribed great okay so now that we're getting back
response i actually want to save this response once again you guessed it to state so that we can use it so i'm going
to do that down here let's save this as exchange rate as that is essentially
what we want to get from here i'm looking for the exchange rate okay that's what i want so to go into
this object i will need to go into the real-time currency exchange and
then find the exchange rate so i'm going to show you how to do this
first of all let's just set up our you stay here
so exchange rate set exchange rate use state
and i'm just going to start off with this being zero this time
okay so there we go so now there's our data however we want to go into the object
and to go into the object but by the property or key i'm going to just get
oops this right here as a string so that is what we want to get and then once i am
in that object i want to get the
the what that was cleared i'm just gonna go ahead
and let's look in here making sure that we are in digital and crypto on the
exchange rate you can have a look at sample responses so we're going to get the real-time currency exchange and then we're going
to get the currency rate so i need to get that whole string and then simply
put it in here so that should get me the exchange rate i'm also going to set this
to set exchange rate and pass through essentially this whole thing right here
okay so now if we console log
exchange rate we should see the exchange rate so let's have a look at that
so once again let's maybe let's select usd and click convert there we go we are getting the exchange
rate should we try another one let's do this one and convert and we're getting
another exchange rate so this is looking great we have a few
more things to do i actually want to display this exchange rate
multiplied by the amount that we want to convert in here so i'm going to do that next and that
will actually solve this warning for me as well so let's go ahead and do that so that is
my exchange rate another thing i want to set is the result and the result is the result of the exchange rate multiplied
by the amount so i'm just going to simply go this which is the exchange rate
and i'm going to multiply it by the amount so that should be fine this returns back
a number and this is a number however we also need to get the results so sets or
results we can do set result equals use date and i'm going to start off at zero so now i can use
result and display this in this input right here
so that is the second input and actually what i also want to do on the second input is disable it okay because i don't
want it to be tampered with i simply want it just to show the result
okay so this is looking good we don't really need to type for this as it's just
showing the result and
make sure this is a d and there we go you will now see it's
disabled and if i now select a value so two bitcoin to
us dollars and click convert amazing now i can now actually change
this and it will do another conversion for me
so this currency converter is officially now working
wonderful so hopefully that makes sense we aren't getting any warnings yet we have solved
this warning let's carry on
now i did also say that i wanted to
show my exchange rate in its own component so here's my exchange rate component
it is the one in green here i'm simply going to pass through the exchange rate
not the result into it so i can do so easily so i can go in here
and just go exchange rate and pass through the exchange rate so i'm just
passing through a prop into the exchange rate component so let's go ahead and
save that making sure that is a small e and now let's go into our
components again so the exchange rate component and i'm going to destructure the exchange rate
that i passed through and simply just show it in
here so now if we look in here you will see the exchange rate showing up not the
result but the exchange rate from one currency to another wonderful
let's carry on so now i'm going to just do some styling on this component this is going to be a very simple one all i'm
going to do is actually just have an h so an h3 tag this time
exchange rate like so and i'm going to show the
exchange rate let's put in h1 tag h1 tag
oops okay h1 just like so
making sure that's an h1 as well and then we could also pass through if
we want maybe we can pass through you know chosen primary currency to secondary currency
just so it's super clear what is happening here it is the
conversion rate from one to the other which means we just have to pass through the chosen
primary currency
and the chosen secondary currency so that is also something that we can do
it just means we need to pass them through here as well so let's just go ahead and do that
so i'm just passing them through as props and chosen primary currency i'm also
going to pass up through as a prop and then destructure it in the exchange rate so now if we look here you
will see the exchange rate and you will also see that what we are exchanging it from okay and let's just try again so
let's go ethereum to use dollars and click convert
you will see that changey great and if i increase this
convert again that will change
wonderful so i'm happy with this at the moment of
course we will style it up a lot better for now i just also need to do my news feed so let's tackle that first and then
do any styling and any other issues that may arise from what we have built so far so let's do it i'm just going to go back
to here and i'm going to get rid of the currency converter and the exchange rate
and i'm just going to open up my news feed this time so as we said for the news feed this
time we're going to use this crypto news live again please make sure you are subscribed to it so you can use it the
pricing of this isn't too bad we get 300 requests a month so this is okay for
personal projects like i said this is for building up your personal projects portfolio so please go ahead and
subscribe to this one and just make sure you don't go over 300 so my end points for this are like so i
just want to get all the articles to get all crypto news so all i'm going to do is just copy this again we don't need a
different api key it's the same api key for everyone please keep it safe i will
be deactivating my api key after this
so all i'm going to do is go back in here and this time because i just want to
get all the news articles we don't need to attach this to a button i'm going to use use effect
just like so and then in this use effect thank you for importing use effect for
me make sure that is imported from react i am just going to have no dependency so that this only
runs once and i'm going to paste all the code we just copied and again this is for back end so i need to import access
the front end way import axios from
axios making sure that i just want to use single quotes
again that is a preference you don't have to and now this code should work and i'm just going to once again switch this to a const and get rid of any
semi and again changes to an arrow function
you can also use async and a way it is totally up to you i just copied this so there's less work for us to do
great so now that we have that let's go ahead and save the results of this so these
are the results if we test it out so if we test out the end point this is
what the result should look like so this is an array of items this is good it's
good that's an array or make it a lot easier for us so once we get the results
back so the response data that should be an array that we can work with
so let's go ahead and work with it so once again here is the array and let's
save this as something i'm going to say this is articles so this is where we use you state again i'm going to go const
articles set articles and i'm going to use
use state and set this as null this time and let's go ahead and make sure we use
state as imported from reaction you can use it and now the response data i'm going to
just use set articles to set articles to be the array
which is response data so response data will come back with the array as we just saw in rapid api response data
great so let's check it out let's see if that is indeed bringing back our articles
and wonderful an array of all the articles so now we're going to do some more mapping
so just in here in the news feed well what do i want to happen i think that we
should just in here let's perhaps also give this an h2 tag this time of news
feed and then well let's map each news article
there is a lot of articles so what we can do is just get the first i don't know first 20 articles or
something first first let's just do first seven so i would get the articles
array and i'm going to use the javascript method of slice and just get
the first oops seven so that's how you do it that's how you get the first seven items of an
array and i just want to check this exists first because obviously it might not exist on the first render so if it
exists i want to save this as first seven articles
and once we have those first seven articles well this is the array that i want to map onto something and i think
we can just map this onto a p tag just like so
so let's get our curly braces up again and i'm getting
the first seven used articles and if they exist i want to then
map that onto the p tag okay so for each article so for each
article that exists in the first seven articles i want to
use some parentheses just print out the article
let's have a look i want to print out the article title so article dot title so let's get
the article title just like so and there we go
once again we will get an error as we have not passed through the key but at least we're getting our news feature up
this is looking good i want to limit the amount of re-renders because obviously that's going to
count towards our 300 so let's just keep that in mind
and then i do underscore index and give the p tag a key or we can actually which
might be a better thing to do we can wrap this in a div itself so wrap the p tag and a div
so that we can give each div some styling if we wish and let's give this the key of
underscore index just like so and perhaps maybe let's space this out so it's a bit more readable
and we can also because we see this comes back with an article
title and an article url i can now use that url to wrap the p tag in it so if i
go a and then just whack the p tag in there
and give this an href of oops
the article url or how is it spot here yes url that
should wrap each of them in a url so that we can click this and go
to the news article to read about it instead grace i'm really happy with how
this is looking so of course please feel free to use
whatever news feed you wish this is just the first one that i came across on rapid api there are so so many to choose
from so this is looking good this is pretty much all i want to
do the next thing that i want to talk to you about is storing your rapid api keys safely in a
way that will prevent other people from taking them from your github okay so that is what we are going to do
now and i'm going to finish with some styling and refactoring and just checking everything works properly
so to store this we need to store our rapid api key in a dot env file and that
dot env file is in the root of your project it's on the same level as the package.json and i'm just going to
create a dot env file and then in here i'm going to store this we don't need to
specify this as a string that is implied and let's call this rapid api
key however to use this in the react app i
also need to append react app to it just like so so that will now
work so now all i need to do is grab this and i need to use
process env in order to get the key from my.env file and then just paste that
i'm going to do so as well for the
currency converter get request and again it's the same key so just like
that and now we need to restart don't forget to restart the app so i'm going to stop and re-run
okay so again this is now kept safe in a emv file that seems to be working just as
intended that is good and then i also need to add this to the dot ignore so
that it doesn't get uploaded onto github by mistake and don't forget that even
though we are storing this in a git ignore and we are preventing this to being uploaded onto github
technically this is not super safe the only way to really keep your secret safe
is to build up a back end which we will not be doing in this tutorial however if you do want to check that out please do
i do have some videos on this this is just for your own demo purposes for projects to get hired okay this is not
how you would do this in real life so you can either choose to just save this as a personal project or watch some
tutorials of mine on node.js express and so on but just to prove to you that this
is still viewable if i go to sources then go to static
and then go to main chunk and search for rapid api
you will see the key is showing up okay it's being bundled up and we don't see process e
and v react app anymore we actually see the string itself so that's just something that you should know people
could still find this uh especially to the more trained eyes so keep that in
mind great now this is all looking fine there is
some styling one thing that i would like to do however because as we can see if i
change this everything is changing here and if i convert this
there we go we get the exchange rate from ethereum to us dollars however if we start messing around with this
obviously i don't expect that to change but this is no longer the correct exchange rate i only want to pass
through the chosen currency the primary and the secondary
one so i'm going to show you how to fix this i am doing this on the fly though so please bear with me this is not
something i pre-prepared but the way i would do this is that i would say this to state so again you
will see here that we are saving the exchange rate well the exchange rate is the only thing that we want to pass
through into the exchange rate here so there is two ways i can do this the simple way is for me just to simply set
set primary currency
set primary currency exchanged maybe let's call it like that
and pass through the chosen primary currency and then create
another use state so this time it's going to be set
primary currency exchanged and primary currency exchanged
and then do the same for the secondary currency set secondary
currency exchanged and then secondary currency exchanged so now we can
essentially set the currency that we want to pass on to
our exchange rate component chosen secondary currency
so instead of this so instead of the chosen private
currency i'm passing through the set one and same for here so secondary
just like so okay
so at the moment it's now of course we should probably change this to be the default which is btc
okay so now when we choose one of these let's go bitcoin to us dollar
do one convert that will change and if i change this now that will not change again so that
is one way to do it uh again there's better ways to do it my
suggestion would be to change this all into one thing and just save all of this as
an object just because we're not using this for anything else apart from passing into here and i will
just look a lot neater so you can keep it like this or of course you can make this an object maybe
let's make an object so const exchange to exchange
or exchanged data let's call it
data changed data once again i am doing this
on the fly exchanged which is why it's taking me a while to think of how i should call these
use state and then i'm going to have to set this
as something i'm going to set this as
primary currency
btc secondary
currency btc and then the exchange rate
as serif now so that is the object that i want to pass and i'm going to use set
data
right here to comment that out
set exchange data i'm going to open this up and once again i'm just going to have the same
structure that i did here and this time exchange rate is going to
be this i'm going to copy that and this is going to be the
chosen primary currency and this is going to be the chosen second degree currency which
means i don't need this anymore because i'm just dealing with everything in this one object so that should now be saved
to exchanged data we can console log this out
and i'm simply just going to pass through the exchange data exchange data get rid of these
go back to the exchange rate simply just pass through the exchange data
and now i can get the exchange data exchange rate exchange data chosen private currency and the
exchange data chosen secondary currency so let's hope that has worked
exchange rate is not defined
just gonna get rid of these for now
there we go oops that should be primary currency
and this should be secondary currency
exchange rate is exchange rate
and let's check it out so now if i go bitcoin to
us dollars convert okay so that is changing it will not
change this so that is good however the exchange rate is not showing up why is that
exchange rate let's console log the
exchange data
convert so the exchange rate is being passed through i can see that uh it's because
it's a capital e so let's go ahead and change this here exchange rate
exchange rate wonderful so let's just make sure that
that is the same too and there we go this should be fine again
thank you for bearing with me as i fix this on the fly converge wonderful
so we have done it we have now built our currency converter it converts currencies it only passes through the
set currency and it won't change anything if i select other ones so just like so
not all of these convert to each other by the way you would have to do some more research on that and if i press the
button the currency version will go through great
so now just some final styling and we're finished so i'm going to go back to here
and we have our app our newsfeed i actually don't really like this color let's go ahead and change this i'm going
to use rgb for this tutorial sometimes is use hex and sometimes i don't uh i
know this color is nice so this is something that i pre-prepared in terms of styling because i don't really like
to spend too much time on the styling if you know me i feel like i like to focus on the javascript
options a little bit more so let's give it some margin let's also give it some box shadow
uh so if you know how to use box shadow this should be familiar too sorry that i am not explaining this very much much
once again i don't really like to focus too much on styling aspects in my tutorials
and finally i'm also going to give this a max width so the news feed itself of 300 pixels as it is a bit intimidating
at the moment it's taking up too much space i only want it to take up this much space great so there we go and that's the
currency converter well i'm actually also going to change this to rgb and this is a color that i picked out
earlier so they're all going to be quite light initial colors let's also give this some padding of 10 pixels
margin 5 pixels just to space all the boxes out from each other and once again i'm just going to copy this box shadow
styling and i'm also going to make all the text aligned to the center so that has now
changed our currency converter to look like this one more thing to do and that is style with green exchange rate so
let's find the exchange rate and once again let's change this to be an rgb color and i'm going to change this to
the 2 2 1 2 3 2 2 1 and let's again give it some padding so
padding 20 pixels margin top
10 pixels and then box shadow
again just let's give it that great so that is already looking a lot cooler
i think uh let's also make sure that it's in the center so i'm going to do that now and maybe
let's style the button a bit
so button order none
float right because i want it to go to the right
let's give it some margin i love a bit of a margin font family
now the font family should be applied from the body i think so perhaps let's just relieve that
that is looking fine uh however on the button hover
so as soon as we hover over the button i want the background color to change
let's start off with coral but let's maybe just change it around a little bit
to also be rgb a
okay well let's keep it coral for now and i can always replace it later
so now when we hover over it changes color let's also space this out a little bit so
let's perhaps do that now i'm going to get the input
box
give it a background color rgb
two one eight two two seven two three eight
padding 30 pixels border radius i like a bit of border
radius 210 pixels and once again some
box shadow now this is shaping up much nicer now that button's in here and this is
looking a lot slicker a few more things to do i want to add some assignment to the select and the input
so i can do so like this i can grab the input and the select
and just give it a border of none okay so i've got rid of the border of that
and i think this is looking good
i'm really enjoying how this is looking perhaps let's also add some border to this here so border radius
on the exchange rate should also be 10 and wonderful and one last thing i did
say i want to center this so let's go ahead and do that so change that to an f that should have
been an f from the beginning so now these two are once again on top of each other i want them to be next to each
other so all i'm gonna do is go into here and in the app i'm going to put these
in another div i'm just going to get these cut them and give this a class
name of app
wrapper grab the app wrapper
and just once again to display flex so now they're next to each other and
one final touch i'm just going to add a title for our apps on h1 tag and let's call this crypto
dashboard and wonderful we have now finished our
crypto dashboard i hope you've learned something new i hope you can take this project and share it with your potential
employers really demonstrating that you know how to work with apis as we work with two and demonstrating your react
skills as well as demonstrating that you know about the safety of api keys thanks very much and i'll see you soon
