Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video
Вставка
- Опубліковано 16 сер 2024
- Learn advanced React best practices, State Management using Redux Toolkit, UI Creation using Ant Design, creating charts using Chart.js, and fetching data from multiple sources using RapidAPI while building the best Cryptocurrency App on UA-cam - Cryptoverse.
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special UA-cam discount code is automatically applied!
⭐ RapidAPI - rapidapi.com/h...
⭐ CoinRanking API - rapidapi.com/C...
⭐ Bing News Search - rapidapi.com/m...
Since the 1st of January 2022 you'll have to make the following changes to the code:
1. Change the api v1 to v2 on RapidAPI
2. In new version, to access the exchanges endpoint you'll need a premium plan
3. Change the coin price history endpoint to the following - `coin/${coinId}/history?timeperiod=${timeperiod}`
4. Change coin id to coin uuid in cryptocurrencies.jsx file
5. In cryptoDetails.jsx file make sure to match the stats and genericStats values
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adr...
Styles & Other Code: gist.github.co...
cryptocurrency.png: i.ibb.co/Z11pc...
news image URL: www.bing.com/t...
📧 Join our JavaScript Mastery's Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: resource.jsmas... 🔥
⭐Hostinger is my personal recommendation for hosting - www.hostinger....
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
💻 Master JavaScript: www.completepa...
Use the special promo code "UA-cam" on checkout to save $60!
❤️ Support JavaScript Mastery & Suggest Future Videos:
BuyMeACoffe: www.buymeacoff...
Patreon: / javascriptmastery
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / jsmasterypro
💼 Business Inquiries:
E-mail: javascriptmastery00@gmail.com
Time Stamps 👇
00:00:00 Intro
00:02:06 RapidAPI
00:03:25 Layout
00:32:59 Homepage
00:36:31 Redux Toolkit & API Dev
00:53:32 Cryptocurrencies
01:11:28 Crypto News
01:32:02 Crypto Details
01:56:24 Chart
02:01:37 Mobile navigation
02:06:22 Challenge
At 44:45 in the video, it's not necessary to create a createRequest function, instead just add a prepareHeaders function to the fetchBaseQuery function as explained here redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#setting-default-headers-on-requests
Please help stuck on this
Module parse failed: Unexpected token (51:12)
You may need an appropriate loader to handle
this file type. const globalStats
data?. data?.stats;
Brother you are Amazing i want to be coding like u
@@shubhamumbarje hey bro, i got the same issue here, the data were fine before the const globalStats, i wondered have you solve this problem
@@shubhamumbarje add middleware it will solve every problem u got
@@stevechen2608 even I am facing the same issue, can u help? if you have resolved the issue.
Please Continue doing this for us! This means a lot to aspiring developers like me. We need more people like you! Thanks so much for all those awesome stuff!!!
Thank you so much! 😊
@@javascriptmastery Hey, one question. I working on your travel advisor app. I created the google map api key but it isn't working and says in the console that I will need to enable billing cycle. But, in the video you seemed to work with it without doing billing or putting in your credit card. So, why it's not working on my end. IS there any way that I can work with it without putting in any credit card and enable billing. Please reply ...
@@hmshuvo2332 You need to adda credit card, its free but yes you need a CCARD
@@hmshuvo2332 yaa I was also facing the same error....and I didn't want to add a card in billing info that's why I dropped that project .... Do you have any other method to fix the error??
@@arunabhkumar7811 same here!
Hi, I'm the author of RTK Query. I'm happy that you are using it and creating a tutorial for it.
Unfortunately though, that `createRequest` function that you create at 44:45 is a very bad idea. RTK Query already has an abstraction for that - the `baseQuery`. You could just pass the `headers` variable into the `fetchBaseQuery` options, or add a `prepareHeaders` function there.
Worst case you need a feature that is not part of `fetchBaseQuery` and you could write a wrapper function around that and create your own `baseQuery`. But you should definitely not call some `createRequest` function in every baseQuery. That is exactly what `baseQuery` is for and why it is being called for every single request that is made.
A lot of people seem to base their work on your tutorial, so it essentially spreading a bad practice (and people do not try to understand `fetchBaseQuery` because of it).
Could you maybe add an annotation at that timestamp that says to pass `headers` into `fetchBaseQuery` instead?
Pump
Can you create a tutorial for the rtk query?
so we just do it like baseQuery:fetchBaseQuery({ baseUrl ,headers: cryptoApiHeaders}) ? or is it wrong?
@@162filo Is it work for you ?
@@ABGwaves no it didnt work
I have done corona tracker and kept it in my resume, on of the interviewer saw that and liked the work, Thanks sir for helping us, God bless you
Woah, nice!
As usual, top notch content. Devs in training, we must protect this man and his content at all costs!!!🙌🏾
Thank you so much Jason!
@@javascriptmastery No sir, thank you 🙏🏾
Tip for the new guys,
In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
You also need to update the Route declaration from
to
-from stackoverflow
Wasted 4 hrs later on i got to know this
Thanks!
Thanks for your efforts 👍
Thanks man! I wish I would've checked out the comments before trying to tackle this one it would've been faster. Good looking out!
can you tell me how are using the exhange endpoint. It's not free now
This was almost an advanced tutorials covering the topics like React, ReduxToolkit, ChartJs, AntDesign and much more 🔥❤️❤️
Glad it was helpful!
Stoked to see you using Ant in a project! Thank you for always leaving in the errors and showing us how to fix them. I've learned so much from you doing that.
Glad to hear that!
Covering these technologies in one video is not a easy task. Hat's off to you man. Thank you!
Glad you liked it
What a discovery your channel is! Got very handy tips and tricks waiting for a medical appointment.
As someone who works maintaining a legacy React project, loved how you explained which parts of useEffect correspond to which lifecycle method on class based components.
Really liked your approach to Toolkit, never seen a tutorial address the fetching methods. And a nice introduction to a friendly API.
Everything explained in a very didactic manner, with good
Thank you so much Thiago, means a lot!
@@javascriptmastery You deserve man! \o/
Also: Everything explained in a very didactic manner, with good examples*
I dont have any words. I cant say anything
You content is so FLIPING awesome you almost made me a super react developer lol 🤣
You rock!
@@javascriptmastery Thankyou sir 🙏
If I ever get a job as a React Developer, it will be only because of people like you... Thank You so so much bro... Keep it up
It's my pleasure
this is actually $1000 worth project, even more
Glad you like it!
This is absolutely amazing, I can't stress enough how much good you are doing for the dev community!
Thank you Andrew!
Master is back with master project 🔥no doubt best video on UA-cam
Thank you so much!
Already love it in the first 2 mins. Cannot thank you enough for these hands on projects!
Thank you!
Just the app tutorial I was searching for😄, thank you so much man!!
No problem 👍
I just like the way you make tutorials. You are not afraid of making 2 hour video, where you create a meaningful project, that shows quite a lot of useful features. Keep up the GJ!
Thank you Pavel!
I've been following your videos since the beginning of 2021, and now my level on JavaScript has improves, and I am really proud of myself thanks to you !
I wish one day I come to London and give you a hug
I'm so glad to hear that you're improving, great job! 😊
Highly impressed! You always come up with some unique ideas. You're one of those people who are inspiring young developers.
I'm so glad to hear that Hamza!
here what is simplified ? how it is working ??
bro , since the endpoints are paid ... can you tell me any alternative to fill exchanges component
This is GREAT stuff. Thank you for putting superior quality behind this course and for making it available to us!
Sir, thank you so much for your free content. I am unable to buy any course cause my financial condition is not good. I learnt javascript and react from you. I hope one day i will be a great developer like you.
Enjoy!
Awesome. Looking forward to tackling this after my current project 🙌🏻
Thanks Luke, good luck with it! :)
The quality of these videos is through the roof. Keep progressing, god speed!
Much appreciated!
This Channel is pure gold itself, a lot of quality content about JS React & javascript frameworks.
Thanks so much for this!
OMG.. I was looking a project on Crypto, finally got it. Thanks Man appreciate the efforts.
Please continue to do more exciting projects.
Will do, thanks!
Bro! You're a literal God-sent!!!!
I can't thank you enough for what you do. Please continue the good work 🙌🙌🙌
Thank you so much! Glad you liked it! 😊
Osam man very much appreciated your videos are best on the youtube with latest tools and technologies
Thank you so much!
@@javascriptmastery thanks to you man for those long high quality content
I've been subbed a while, just wanted to boost the algorithm and say thanks!! Your videos are ALWAYS helpful and never a waste of time, which is what I love most. Consistently amazing content!
Superb and clean explanation.. Thank you
Learned a lot of things
1. Redux Usage
2. ANT Design is super awesome and simple
3. Really fast way of implementing things
I'm glad to hear you've learned so many things! 😊
Hey have you completed the project ......did you face any errors and are there any sub topics like redux that I should learn first before starting this project??
here what is simplified ? how it is working ??
Thankyou very much for providing such content for free!! Speechless
Thank you, glad you like it!
This would be a 10 hr course somewhere else, I am really impressed man.
Wow great stuff man, didn't realize redux came out with this new toolkit. I always loved the simplicity of using hooks with graphql. This just made my day!
Thank you!
I just started learning react and i dont think anyone on this planet would be able to teach me like you do 🤣
I will use your tutorial after I complete my react bootcamp. Thank you for all your tutorials.
Best of luck!
I love this project even though I feel like it takes me 4x as long to code at the pace he does, and still make errors. Nonetheless, I love the projects you build and put on UA-cam. I can't wait to return my invest through your subscription.
Well that's the purpose of coding along. You won't be coding on the same speed with the teacher/mentor - and you will do mistakes. Maybe some times you will spend hours on configuring something of your own preference. But that's alright because that's the purpose of those videos, to make you have a hands-on experience with frameworks/programming languages etc. So even if it takes you 4x times to follow along, thats totally fine and normal. Gz on the experience you got throughout this video, seems so nice! :)
Exactly!
@@christophervradis7285 hey there, I am doing this tutorial right now...and yes it's taking me almost a week but I keep having trouble with the "simplified" operator. It's not responding when I need to toggle between 10 or 100 cyptos. The news is worse...I don't receive any objects, just errors like "too many requests" and "cryptoNews undefined" and I started to pay for the service. I am curious if you had any of these problems?
@@0x0abb hello there. I have not code along this tutorial of @javascript mastery. I just enjoyo watching his videos :)
For the toomany requets is probably because of error 429. use Retry-after header.
For undefined you are probably accessing a it before initializing it?
@@0x0abb in 1:33:50, i am getting coinId as undefined..
how did u solve this problem mate?
Amazing content as usual! I love that your actually putting your content out there for free, it really helps! I would love to see videos about mobile apps! Also, have you tried making games with Python or Unity and C#? I think you would excel at that in no time!
Thank you! I haven't yet, no. Might give it a try in the future :)
This is amazing, We really need these kind of tutorials where we can see what we can do with these technologies, Thank you for your amazing content, You have earned a new Subscriber. ❤👏
Woah, I'm so glad to hear that Austin, welcome to the team! :)
I just finished a super basic Cryptocurrency app the other day and then I'm hit with this. Talk about timing.
That's awesome, enjoy!
Really helped ! Your explanation is just on another level! Love from India!
Thanks a ton!
My man!!! Always coming up with excellent projects and content.
Glad to hear that!
Router Not Working in the newer versions. lots of antd problems.
CSS codes do not work for ant design.
Anyone with the new code ?
Hopefully I can wrap my head around this wonderful course
Greetings from Tanzania 🇹🇿
You can do it!
Thank you. I've never watched your content before. But this one is undoubtedly the great content.
Glad you enjoy it!
Hey man can you do an update for the API coinranking. It's not working anymore on rapidapi. They are migrating to their own domain
So does the project not work anymore or wht?!?
What a beautiful and amazing project man!! Thanks a lot, I started to learn JS months ago, I've just finished a bootcamp and thanks to you I learned a lot of stuff that I can add to my kit. Very clean, very well explained. Liked, subscribed etc :))
Can wait to watch your other videos!!
@@venkateshkumar6142 it does work! However, the /exchanges endpoint is only available in the paid subscription, and also you will have to do some tweaks in the CryptoDetails component in order to show the info ;)
@@venkateshkumar6142 it does work! However, the /exchanges endpoint is only available in the paid subscription, and also you will have to do some tweaks in the CryptoDetails component in order to show the info ;)
@@tomascontreras7760 What tweaks do you have to do in the CryptoDetails compoenent to get it to appear?
@@manofshad97 just change the name of the properties of the output. Console.log the response to see how the details are shown
Hey did you get the chart to change on different time periods. Mine only loads the initial time period and the charts don't change upon changing the time period
I loved this project ideia!!! But in 44:40 you dont need to create that createRquest helper, just set the headers via prepareHeaders like this:
baseQuery: fetchBaseQuery({
baseUrl: process.env.REACT_APP_CRYPTO_URL,
prepareHeaders: (headers) => {
headers.set('X-RapidAPI-Key', process.env.REACT_APP_CRYPTO_KEY)
headers.set('X-RapidAPI-Host', process.env.REACT_APP_CRYPTO_HOST,)
return headers
}
}),🙌🙌
Teaching is an art and you are a great artist
That means a lot, thank you!
The best channel. Period. I haven't found any other channel with such content. Thanks man!!
May be it will help somebody
If you have a problem to show chart at 2:00:33 and have this error : » Error: "category" is not a registered scale »
just add on the top this : `import Chart from 'chart.js/auto’`
thanks
Thanks
@@techworld3043 🙌🏼
@@sigma3720 👍🏼
Thanks a lot.. 🙌
In cryptodetails page line chart is not working properly and time period is not working and date is same in the chart. time in video 1:50:00
Any one please help me...
@Vashu Sinha thanks bro
@Vashu Sinha thanks for your help man!
Can you share how you solved the problem?
Please continue with this type of project 👌👌👌👌
Always! 👌
This is the third video I'm viewing on your channel. Your tutorials are really amazing! Thank you for doing what you do :)
i can bet you have not coded this as api is not working without a subscription
@@ujjwalthakur3024 i did it in december when it was working lol
Whatever this channel uploads are all A+ contents. Thank you.
i just finish this now, i mean this is great... please have a separate video only on redux toolkit
Great idea!
@@javascriptmastery waiting... or we collaborate but we have it on your channel, what do you say,
Job Interviewers: We are going to make life hell for you, there's no way you can show me interesting projects
JavaScript Mastery: LET ME INTRODUCE MYSELF
Hahaha nice one!
@@javascriptmastery 🙌
Lots of love to this channel. Can't wait to see you create another awesome stuff in the upcoming video.
I am legit crying right now... What a project man... Thanks a million times
Hi I started this project recently and am facing issue in the coinranking api for fetching the coins, seems like they are migrating to V2. If anyone also sees this error let me know if you get any resolution. Thanks in advance.
Any solution yet??
@@aniketjha1270 you should subscribe to plan to get results
@@MohamedGamal-hr2si I did. Changed the headers. Doesn't work. If u could tell me what all u changed, thatll be great.
Thank you Adrian ! Your teaching method is fabulous 💖
Glad you think so!
This video was like one of the few good ones I came across on UA-cam. You did a great job explaining everything in such a good way that even a person with no programming background could understand. Keep up the great work! Definitely subscribed.
I was browsing through your channel and couldn't see a video on what Plugins you're using for VS Code or a video showing how you can install node or react to be able to run 'npm' and 'npx' commands. I would love to see such a tutorial from you as well. Thank you and sorry for the long comment.
please when i click on a crypto and get to the cryptoDetails, there is an error from the stats/generic statistics arrays that says cannot read property from undefinced(reading "price")...I think the problem here is the arrays look for the cryptoDetails variable before the API is loaded...hOw can i solve that
hey, were you able to solve it ??
You are amazing! ty for videos
Thanks!
In react-router-dom v6, Switch is replaced by Routes. So for this video, install react-router-dom 5.2.0 instead.
yeah...this kept me busy for a while...
the api endpoitns are also deprecated, this tutorial its heavily outdated, i dont recomment to follow it
2 hours? Are you kidding? I will be lucky to finish this in 2 days! LOL
THANKS FOR GIVING US THIS!
My bad. I got it to work within 30 minutes. Everything is working but the News tab. Other than that. This baby is great. eslint told me to change Switch to Route. Walla!
Peace and THANK YOU!
I haven't started but I love it already from the intro... This is worth a lot
Glad to hear that!
You're a blessing to us. Thank you!!!!
You are so welcome
Awesome work sir, your courses are one the reasons I have a good job in react
Thanks!
here what is simplified ? how it is working ??
@@PIYUSH-lz1zq did it worked for you bro....i am getting a lot of errors kindly help me
Build this full project, took me about a week but learned a lot of new things.
Thank you so much SIR !!!
@@srujanashok1292 yes
here what is simplified ? how it is working ??
Amazing👍 Thank you for creating amazing and value packed tutorials. Seriously I have been following you for a year now. Learnt a lot from you. Thanks ❤
So glad to hear that, enjoy! 😊
This is really amazing. It's so kind of you to release this for free.
I'm glad you like it!
You really built something amazing
Thank you!
The best learning platform have ever seen on UA-cam. Keep up the good work sir.
you are my favourite instructor on the internet love your projects. how well you explain the things I will do this project using material-ui. Thank you sir
Cool, thanks
You're Awesome! Commenting for more reach.
Thank you!
Your tutorial is topnotch from what i'm seeing so far. As a beginner I must say that I'm able to follow every steps with great enthusiasm. However, I do need help in CryptoDetails section as It's showing "undefined" when I click, instead of showing detail of a particular coin. Kindly help out.
getting the same issue
Thanks for the free video... liked ...commented and subscribed :)
Thank you so much, enjoy! 😊
My favourite Teacher ❤️. God Bless You Sir😇
Thank you!
Unable to access coindId showing undefined
Ohhh man how you know what I was hoping for ...you came up with exactly that thing. You are 🎅
Thank you! 😊
you are really a JS GOAT
Thanks! 😊
Love the way you teach ReactJS, and am interested to see more videos/courses on React Fiber, SSR and SSG architectures. Please do make some interview specific videos on JS ES 12 and CSS.
TypeError: Cannot read properties of undefined (reading 'price')
CryptoDetails
same error
Hey man, trying to follow along with this now but I cannot get anything to show up on my pages when clicking on the different routes. I have compared code and cannot figure it out. Would it have anything to do with things being deprecated since this video? Example I had to import styles from antd with - import "antd/dist/reset.css"; - Switch was also changed for Routes as per the new guidelines.
hey, I am facing the same problems. Could you share your fixes please :)
@@arytiwari3789 I'm facing the same issue, did you solve it?
I can't believe this tutorial is free. As always, thank you for the quality content man!
Thank you! 😊
Awesome brother. Again you bring something completely different for us.
Thanks again ❤️
My pleasure 😊
Thank you for this course, I loved every second of it and learned a ton about the redux tool kit and I plan to make something out of it by God's grace.
bro , since the endpoints are paid ... can you tell me any alternative to fill exchanges component
"Failed to load resource: the server responded with a status of 404 (Not Found)", this is what I'm getting instead of an object as a response from the Rapid API, seems like generated API key is invalid but how's that possible, what's the fix for this?
Subscribe to the API then get the key
same problem bro need fix
Great work, I already have a few others videos from your channel to keep learning. Thanks a lot!!! 🇨🇱
This means a lot to aspiring developers, and me for instance. I really appreciate the way you teach.
here what is simplified ? how it is working ??
Amazing content! I can't imagine the amount of effort you put into making these videos! I wish you a great success in your endeavours!
Thank you! You too!
Sir can u give us a report or all the design documents for this project
Woooooow! You're Awesome (from Tuku Mann)
Thanks! 😃
Best course about redux I have ever seen. Thanks bro to spend your free time for new developers
To solve problem with timestamps (1/20/1970) just multiply timestamp x 1000
Nice vid I really enjoyed doing this
nice work
but I tried building the app but am having issues with the crytodetails and exchanges after I make a request to the API it returns a blank page even when i copied the exact code i still get the same blank page
Same here.
Same for me
same error ... did you find any solution ??
Hey, do you have any course on 'React hooks with redux', I want to buy.
Thanks for this video. ♥️
This video briefly goes over that. But I'm working on more in-depth courses, I'll keep you updated :)
@@javascriptmastery thank you for your words and lots of love ♥️
You are a gem to this world..🙌🙌
And a hero of all developers❤️❤️
Love From India🇮🇳
Thank you!! ❤️
Pls I need help. The RapidApi is not working in my project, how do i go about it?
I just opened my deployed app again and it was showing nothing. Then I opened the coin ranking api page and tested the endpoints. It showed 503 planned brown-out. It also said to migrate to v2 of the api as the v1 will be deprecated. So I have a request if you would show us how to migrate to this other api otherwise this application will not work and will loose its beauty😊
Same issue +1
This is where you need to go read the docs and try and figure it yourself. It's hard to start to do, trust me. But that's what real job will be like. You'll have to read other peoples code and update it.
jsm being the best as always!!
Yes!
Thank you!