React API Project - Cryptocurrency Finance Price Tracker App Using Hooks and Axios

Подписаться 113 тыс.

Просмотров 115 тыс.

50% 1

Learn how to make a cryptocurrency finance price tracker app in this React API Project. We will use React Hook and Axios for this beginner React JS Project. We will mainly use useEffect and useState in this tutorial.
You will be able to search currencies and have it display on the browser. Also, the prices will update live whenever you refresh the page. We will get all of the data from a public API.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
API Link
www.coingecko.com/en/api
Source code
github.com/briancodex/react-a...
Timeline
0:00 What we are building
1:49 Creating React App
4:47 Getting the API Link
8:00 Installing Axios
15:20 Editing Coin Component
20:19 Mapping through API Data
28:58 Adding the CSS
React Todolist App Tutorial
• React Todo List App Tu...
Responsive React Website Tutorial
• React Website Responsi...

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 182

@MarkTaylor-wk6zj 3 года назад

thanks for making a tutorial showing how you made the entire app from scratch!

@steverangel1023 3 года назад

Buddy, Ive done like 5 of your tutorials and you are the best. Compile this all up and get on Udemy and rake in the $$$. I was all over youtube looking for a good quick API call lesson and boom, theres my dude, breaking it down. Cheers bro, you really are fantastic in your mannerisms/attitude, succinct explanations, transparency and code availability. I absolutely appreciate your work here and whats its done for me getting back into OOP after 13 years out the game.

@briandesign 3 года назад

Thanks Steve! really appreciate it!

@rishavsharma4206 2 года назад

Nailed this one. Thank you Brian. Discovered you through a YT video. FANTASTIC project. Thanks again 💛

@sydneyroseenglish 2 года назад

There are thousands of bad developers who runs youtube, wrong codes, bugs.. but this teacher, I can trust, very accurate and also he teaches very well. Thank you

@ajaygonepuri2285 Год назад

With no doubt the Best Video found on internet!! Great job on explaining everything from basics that also in such a short span of time. Thanks a lot!!

@red07home 3 года назад

Thank you so much!!! Great content as always! I have shared it on my FB wall

@samrei6223 3 года назад

The videos keep getting better, thank you! Keep going bro, you will be at 100k before ya know it.

@briandesign 3 года назад

Thanks Sam!

@joaopaulorodriguespereira4768 3 года назад

Excellent work! I'm learning React now, and I made it without Hooks and it was great to train and learn how to consume API. Thank you very much!

@briandesign 3 года назад

Nice Joao!

@jaskaransingh42 3 года назад

More power to you my friend! This tutorial is so good and your code is so clean and organized. You should have a lot more subscribers.

@briandesign 3 года назад

Thanks Jaskaran!

@busrakara4929 3 года назад

Thank you for this great tutorial ! Please keep going!

@dovudyusufzoda2216 2 года назад

Thanks man, really enjoyed this video

@rkworld9354 3 года назад

Excellent tutorial, loved it. I am a beginner in react and would like to become as good as you are at it. Cool!

@briandesign 3 года назад

Thanks! consistency is key!

@nicholasholloway8490 3 года назад

Thanks Brian! First React app I created. Nice tutorial!!!!

@briandesign 3 года назад

aye awesome to hear!

@jerrymiller1590 3 года назад

Thank you Brian, for this awesome tutorial. I used this to start my cryptotracker project in the beginning of September (with no prior knowledge of React), and now I have made the project into a full stack application. Will release it in January!

@briandesign 3 года назад

awesome Jerry! feel free to send your link whenever you finish it so I can check it out

@oz4549 2 года назад

so how did that go?

@nikolaradanovic3388 2 года назад

short and great tutorial ! thanks

@coding7909 2 года назад

thankyou so much for this tutorial, much appreciated! :D

@ashikurrahman5729 2 года назад

This is the best tutorial I v't seen ever.❤️❤️ Love from Bangladesh

@0x0abb 2 года назад

Awesome tutorial - nice coding style - specially for beginners or mid level

@hasanbaaqeil42 2 года назад

Woow I like your sincerity.. well done for making this video clear and simple and to the point

@sire906 Год назад

thank you so much i learn alot it works perfectly thanks

@GraphicalBoss 2 года назад

Great job man! 👍

@billynoyes6388 3 года назад

Really good tutorial and the finished design looks so sick

@briandesign 3 года назад

Thanks Billy!

@jonahg6564 3 года назад

This channel is so awesome. Killing it!

@briandesign 3 года назад

Thanks Jonah!

@ani68 2 года назад

Really ...it was an awesome project for API beginners ...understood all the concepts 🙌🙌🥳

@Back-up-all 2 года назад

thank you friend!

@brendano1204 2 года назад

thankyou for this tutorial.

@thevolcanick Год назад

Thank you brian! learned something new today. I am very happy. keep it up.

@yogeshsingh4343 Год назад

does this api work on all domain?

@thomashoddinott4537 3 года назад

Awesome, thanks again.

@briandesign 3 года назад

Appreciate it Thomas!

@yevgenia7785 3 года назад

Thank you so much!

@codingsenju4189 2 года назад

Wonderful job! I was nervous to begin working with API’s as the company I work for makes them sound really complicated (which I’m sure they can be). But after going through your video I see it’s nothing to be nervous about. Just your typical array of objs., And a few methods haha. Thank you! 🙏🏼

@aminkhan7179 2 года назад

is this tutorial predicting value of cryptocurrencies

@detroiter4eva 2 года назад

Great tutorial. I finished it. I must be getting good at this. Ha Ha. Now I gotta learn how to deploy it to react to the web.

@nikhargangwar 2 года назад

awesome tutorial!!

@wobsoriano 3 года назад

GJ again brian!

@briandesign 3 года назад

Thanks Robert!

@CodingFire 2 года назад

Excellent

@lukaafromgeorgia8651 Год назад

I do think this is the best React tutorial i have ever seen on Yt

@yogeshsingh4343 Год назад

does this api work on all domain?

@valdemiro8465 2 года назад

Maravilha. Muito obrigado por partilhar conhecimento👍

@gauravwaghmare3883 2 года назад

Thank-you so much!!!

@vahesevachyan9399 2 года назад

good stuff, keep up the good work.

@wekesabuyahi5854 3 года назад

Thanks Brian

@jadenking2483 2 года назад

Thank youu!!

@jaxius6 2 года назад

Thanks Brian, that was awesome fun. 2 questions: How would I search for ticker AND name? How would I add the column titles in?

@aryasaputra7113 2 года назад

that's great, thanks

@coding_den 3 года назад

You literally make the best videos on youtube. If I get a nice paying job as software engineer, I'll definitely have you to thank.

@briandesign 3 года назад

Thanks! really appreciate it!

@coding_den 3 года назад

@@briandesign Update, over the past few weeks, I have received multiple offers for full-stack developer / React roles! Thanks so much man

@ketanvaish4939 2 года назад

Can you help me make this react project responsive.. it doesn't look fine on phone

@user-cv6hi1mm7z 2 года назад

greeeaaaat thanks

@priyakapte1808 11 месяцев назад

Thanks 🙏👍

@obong_samjoe 9 месяцев назад

awesome

@laterinthepast8071 3 года назад

love it !!!!!

@briandesign 3 года назад

Thanks! feel free to check out my recent on using next js

@carlosporcayo3676 3 года назад

it is great!

@rajsuthanofficial7585 3 года назад

Hey Brian, really awesome videos. Keep up the good work. Your React videos are amazing as well. I also have a YT Channel and just wanted to make more catered to React, cuz that's the Trend. Anyway keep going, man. 🔥🚀

@briandesign 3 года назад

Thanks Rajsuthan! Keep creating content as well!

@borbor9649 Месяц назад

Mutch love

@Sanyat100 3 года назад

U good brah, u good !!

@briandesign 3 года назад

Thanks Sanyat!

@michaelploplis9631 2 года назад

Hey Brian, thanks a lot for the video. Definitely learned some stuff. I am new to React and the problem I'm having is occasionally the search works fine. But then most of the time, when you type a key into the input the whole page disappears. I've googled the hell out of it and I'm not sure if it's the page refreshing and not re-rendering the data or what. Sometimes it works fine so there's definitely not a problem with code itself, but I also don't see anyone else having this problem in your comments. Any help would be awesome...

@yashdeore473 3 года назад

awesome!!!!🐱‍👤🐱‍👤🐱‍👤🐱‍👤🔥🔥🔥🔥

@vasifmammadov5236 3 года назад

When do you save, it automatically adjusts codes line. What is this extension name in Visiual Studio? I need exactly the name. Thank you for your understandable tutorial and for your answer.

@jyotindratavanoji9929 3 года назад

Hi brother while giving the price change function I'm getting error as :- Type error : Cannot read property 'toFixed' of null .. could you please solve my problem ?

@luckyugwu 2 года назад

Quick question? What part of the code decides when the price values are going to be green or red. Like I saw the priceChange < 0 part, but doesn't that mean that price above 0 is green and below is red?

@ktahir000 3 года назад

Great tutorial, would have been awesome if charts were implemented as well.

@briandesign 3 года назад

yeah I might make another video in the future with charts!

@ktahir000 3 года назад

@@briandesign Thank you, can't wait!

@nelsonndukwe7274 Год назад

Thanks Brian for this awesome tutorial it's just awesome, I tried using the same method to implement the exchange list from the coingecko list of Api, but it isn't working. Please could you make a video on how to implement this so i can know whats wrong with my approach.

@l3aIIin23 3 года назад

thanks!

@divewithsk 2 года назад

Thanks brian, i learned lot about api. how to track the graph for the price

@alvinacosta2312 3 года назад

hey Brian! Awesome work here as well as your previous videos! One question though, when I was trying to import axios I found that my editor was auto importing 'Axios' with an uppercase A. What's the difference of the uppercase Axios to the lowercase one as used here in your tut. thanks man. Keep it up!

@briandesign 3 года назад

based off axios github they import it as "import axios from 'axios'", so that's what I followed.

@alvinacosta2312 3 года назад

@@briandesign i dont think it's much difference. Thanks man! Appreciate it. More subs comeing for you im sure!

@bengrzybowski7671 3 года назад

Great video, really enjoying the tutorials. I ended up having to do some (successful) debugging, and I am curious if anyone can answer a couple questions I have. 1. I originally had the useState set for the search const set to a blank array (square brackets) I.E. const [search, setSearch] = useState( [ ] ); and it was throwing errors, when changed it from square brackets to single quotes I.E. useState( ' ' ), it fixed the issue. My question is, why did this fix the issue? 2. Is the onChange event that is linked to the input element filtering results from the original axios call or is it making a new axios call on every change? I'm a little confused as to how those are interacting. Thanks! Again great content.

@detroiter4eva 2 года назад

Crickets.

@kessehemmanuel6997 Год назад

can this project be done with a separate backend.? where we call the api in to the react app from a node express app. will be glad if you could demonstrate that as well

@dukewellington5222 3 года назад

Hey Brian, thank you so much for this great tutorial! If I wanted to add charts that show the price variation of individual currencies over a certain period of time, how would I proceed? Is there a free API that delivers this kind of data?

@briandesign 3 года назад

I'm not too sure. I've heard of plotly and charts.js for displaying data, but you'd prob have to research ways to add charts or different libraries you could use

@dabzbmg3197 3 года назад

yo... thank you.

@philk7364 3 года назад

Great video, thank you. Is there anyway to have labels for each column though that are able to stay fixed? Each column heading would be as follows: LOGO | SYMBOL | PRICE | 24 HR VOLUME | 24HR % CHANGE | MKT CAP the only label you provided us in this video would be Mkt Cap, but it shares space with the actual data which makes the table seem crunched.

@hmx21 2 года назад

Hey man you found any fix ?

@CaseTechnologies 2 года назад

LOGO SYMBOL PRICE 24 HR Volume 24HR % CHANGE MKT CAP

@surajbiswas9458 3 года назад

Do you have video on the same project in angular??

@jusgaming99 3 года назад

It was great, but try to take it slow, little bit more explanation would be amazing for beginners

@aravindreddy7475 3 года назад

Love the video. I would like to see the data(stock value) change dynamic, What is the best way to achieve that ? Thanks

@niloben659 Год назад

Same, any ideas?

@quintonnistico9347 3 года назад

Hi! I am curious if I can add this app to a bitcoin mockup website I made a while ago? Or is this a standalone app?

@ashmitmishra Год назад

Hello Brian, From your guidance, I have finally completed this project thanks. But when I am sharing the link to other devices it is not working, So how will add this project to my resume? Please tell

@oz9985 2 года назад

how would u implement a refresh button that doesnt remove th einput uve done ... for example u wanna look for shiba inu and just only refresh that one

@IshanKesharwani 3 года назад

Hey Brian how the currencies are getting filtered ? Is it the function included in the API because we haven't made any function to make it happen.

@briandesign 3 года назад

what do you mean? I created a filter coins function

@agrimsharma1869 2 года назад

How can we implement real time price data change (without refresh)?

@christopherwmcdaniel510 3 года назад

Thank you very much, learnt alot - is there a way to link each coin to its own page if you wanted to click on the coin?

@briandesign 3 года назад

Not sure off the top of my head, but I'd have to look into that and see what's the easiest way to display a specific coin's data without having to create multiple pages

@agrimsharma1869 2 года назад

Hey man, When I paste request URL in browser, it shows raw data and not parsed. Why is it so? (and btw thanks for tutorial, its great)

@sakshihada5836 3 года назад

That was a great project 👏 can we add an email alert to show people that there is a change in their currency. If that modification is possible please let us know Thankyou for this awesome project

@aminkhan7179 2 года назад

Is this tutorial is for predicting cryptocurrencies???????????

@emmanuelakuffo8048 3 года назад

hi Brian cool tutorial......i have an issuse , the app breaks when i add ".toFixed" of the p tag for the green.....

@barteksoltys1247 3 года назад

try delete ".toFixed(2)" from Coin.js and in App.js in element change "priceChange={(typeof coin.price_change_percentage_24h=='number') ? coin.price_change_percentage_24h.toFixed(2) : coin.price_change_percentage_24h} " worked for me.

@adityarajrastogi6862 2 года назад

Can i get the project report of the above cryptocurrency price tracker project ?

@TheNamesJT 3 года назад

priceChange is still saying its null anyone know how to fix this? so did a bit of digging and this is caused by the actual api data being null so how would you get around this? Yeah this tutorial is broken, constantly getting priceChange is null and can't seem to work around it cause its null on the api itself that we are fetching

@swappy4515 2 года назад

1K like😉

@JuandeLellis 3 года назад

Amazing video! You have a new suscriber! Only one question, do you know why it gaves me an error if instead of showing 10 results, i want to show 100? Keep up the good work!

@briandesign 3 года назад

not sure. what does your error say?

@JuandeLellis 3 года назад

@@briandesign Hi Brian this is the error when i put results per_page 100: ibb.co/cXdxVD1

@briandesign 3 года назад

hmm try only showing 20, then 50 and see if that works. If not, then it might be a syntax error somewhere else

@JuandeLellis 3 года назад

@@briandesign Ok i will try that! Thank you!!!!!!

@manoharsirvi885 3 года назад

Hey Brian .. Thanks for your awesome tutorials , But can you please make tutorial on news[LIVE] website using reactJS.

@briandesign 3 года назад

news live? I'm not sure what that is

@manoharsirvi885 3 года назад

@@briandesign i mean to say that a live update news website using reactJS

@teddygoldenretriever1878 3 года назад

Can you do CSS course which will focus on speed learning by showing important concepts/tricks ?

@briandesign 3 года назад

I'll add that idea to my list! but my advice to learn CSS the easiest is just to find website designs that you like and try to code it up. Eventually, you'll notice a pattern that most designs use and then you can always look up the other things that you couldn't figure out

@everythingpies Год назад

I was wondering how would you monetize an app like this? Do you need a backend to handle logins and a payment gateway? How about software licenses? Any idea would be helpful. Thanks

@niloben659 Год назад

Yeah you need a backend to handle logins etc

@zeroproductions7759 3 года назад

Hi Brian,. Can you make a video on css tutorial. Your design looks awesome

@briandesign 3 года назад

what kind of project did you have in mind? Or just any website?

@zeroproductions7759 3 года назад

@@briandesign yes..just any random website with css

@souravdas423 2 года назад

can we use fetch() here?

@clipsofsardoche7593 2 года назад

nice video, but how to add the graphic ?

@aarongauthier6051 3 года назад

I have a question: in the Coin.js file line 16 I have an error - it states "Cannot read property 'toLocaleString' what went wrong? How do I fix this?

@aarongauthier6051 3 года назад

fixed it! You really don't need the toLocaleString in there...it fixed my error

@briandesign 3 года назад

ah okay! glad you figured it out

@rahulwankhade4547 Год назад

i forked the code in my device but while debuggin it shows me the error "non-JS module files deprecated" and server shows "localhost refused to connect". Can someone plz help me out

@gauravwaghmare3883 2 года назад

Can you please make video of React and Aws

@aziazhar4664 3 года назад

Bro while I am getting API as INR(Indian) currency , output values remains same as USD.

@aatmictiwari514 2 года назад

change ${price} to Rs {price} :)

@rupayan6309 2 года назад

@@aatmictiwari514 use ctr+shift+4 for ₹

@Monsterkosh 3 года назад

Could someone please tell me the name of the extension for autocomplete stuff like .(classname) for a div. Thanks

@sankalpsaxena1364 2 года назад

Emmet.

@shafigh6916 2 года назад

where is ur public folder and index.html file ??? how do you expect to run this project without these file structure?

@dheerajnaik6467 3 года назад

Please create React Step Forms with validation .I am waiting for this. Thanks

@briandesign 3 года назад

any specific design you had in mind?

@dheerajnaik6467 3 года назад

Any design is fine because your designs are usually great. Also can u make another tutorial on pagination as well?

@_MadhviSharma Год назад

Sir can i made this project for combined web development and data science mini project ?

@_MadhviSharma Год назад

Waiting for reply

@kinggamer11006 2 года назад

for indian currency?

@R0ckyRocket 3 года назад

on mobile the currency image does not appear, do you know how to fix it?

@bouchetouche 3 года назад

You can make the div into a table and each coin into its own row. I saw a comment with a github link by incorporating bootstrap to add table styling to the elements. I personally just coded the table directly in and it looks great on desktop and mobile now. Also added a table header for the name, 24change, price and market cap.