Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video
Vložit
- čas přidán 16. 06. 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 CZcams - Cryptoverse.
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special CZcams discount code is automatically applied!
⭐ RapidAPI - rapidapi.com/hub?...
⭐ CoinRanking API - rapidapi.com/Coinranking/api/...
⭐ Bing News Search - rapidapi.com/microsoft-azure-...
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/adrianhajdin/proje...
Styles & Other Code: gist.github.com/adrianhajdin/...
cryptocurrency.png: i.ibb.co/Z11pcGG/cryptocurren...
news image URL: www.bing.com/th?id=OVFT.mpzuV...
📧 Join our JavaScript Mastery's Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: resource.jsmastery.pro/newsle... 🔥
⭐Hostinger is my personal recommendation for hosting - www.hostinger.com/javascriptm...
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
💻 Master JavaScript: www.completepathtojavascriptm...
Use the special promo code "CZcams" on checkout to save $60!
❤️ Support JavaScript Mastery & Suggest Future Videos:
BuyMeACoffe: www.buymeacoffee.com/JSMastery
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.
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
This is GREAT stuff. Thank you for putting superior quality behind this course and for making it available to us!
This was almost an advanced tutorials covering the topics like React, ReduxToolkit, ChartJs, AntDesign and much more 🔥❤️❤️
Glad it was helpful!
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!
This is absolutely amazing, I can't stress enough how much good you are doing for the dev community!
Thank you Andrew!
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 🙏🏾
Already love it in the first 2 mins. Cannot thank you enough for these hands on projects!
Thank you!
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 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!
This Channel is pure gold itself, a lot of quality content about JS React & javascript frameworks.
Thanks so much for this!
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!
Just the app tutorial I was searching for😄, thank you so much man!!
No problem 👍
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!
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! 😊
Awesome. Looking forward to tackling this after my current project 🙌🏻
Thanks Luke, good luck with it! :)
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
The fact that this is publicly available for free is crazy. Amazing stuff 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!
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
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 video was like one of the few good ones I came across on CZcams. 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.
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.
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! :)
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! 😊
This would be a 10 hr course somewhere else, I am really impressed man.
Lots of love to this channel. Can't wait to see you create another awesome stuff in the upcoming video.
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
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 🙏
The best channel. Period. I haven't found any other channel with such content. Thanks man!!
The best learning platform have ever seen on CZcams. Keep up the good work sir.
Thankyou very much for providing such content for free!! Speechless
Thank you, glad you like it!
My man!!! Always coming up with excellent projects and content.
Glad to hear that!
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 ??
This is the exact stack we're using at the new job. This helped a lot. Thanks so much for this
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 :)
Thank you Adrian ! Your teaching method is fabulous 💖
Glad you think so!
Thank you. I've never watched your content before. But this one is undoubtedly the great content.
Glad you enjoy it!
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
Master is back with master project 🔥no doubt best video on CZcams
Thank you so much!
This is really amazing. It's so kind of you to release this for free.
I'm glad you like it!
Great work, I already have a few others videos from your channel to keep learning. Thanks a lot!!! 🇨🇱
The quality of these videos is through the roof. Keep progressing, god speed!
Much appreciated!
You're a blessing to us. Thank you!!!!
You are so welcome
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!
Whatever this channel uploads are all A+ contents. Thank you.
I will use your tutorial after I complete my react bootcamp. Thank you for all your tutorials.
Best of luck!
I just started learning react and i dont think anyone on this planet would be able to teach me like you do 🤣
I can't believe this tutorial is free. As always, thank you for the quality content man!
Thank you! 😊
I haven't started but I love it already from the intro... This is worth a lot
Glad to hear that!
this is actually $1000 worth project, even more
Glad you like it!
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 fell in love with the video at the Intro, definitely worth it. Thanks
Thanks for providing us with incredible tutorials !!!
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 ??
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
You are freaking amazing bro. I loved hated code from not understanding. With you it is simple to follow and learn. Big hug best teacher ever!!
Always advanced courses and projects, thank you !!!
Thank you!
You are amazing! ty for videos
Thanks!
You're Awesome! Commenting for more reach.
Thank you!
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! 😊
Great job, very clear and understandable description, I've got something new for myself. Thank you
You really built something amazing
Thank you!
Please continue with this type of project 👌👌👌👌
Always! 👌
super excited to check best practices as the same tools i use on my web projects. ty very much
Amazing work Javascript Mastery! Love the idea of the project!
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
Ohhh man how you know what I was hoping for ...you came up with exactly that thing. You are 🎅
Thank you! 😊
Hopefully I can wrap my head around this wonderful course
Greetings from Tanzania 🇹🇿
You can do it!
You are doing an amazing work by creating these kinds of videos. Thank you so much!
My pleasure!
Woooooow! You're Awesome (from Tuku Mann)
Thanks! 😃
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,
Thanks big time. This is one of the best and smoothest tutorial available on CZcams.
If you have completed this project please provide a GitHub link for reference, I've stuck in CryptoDetails file
Just finished this project, Redux Toolkit is a lot easier than the Redux itself, Thanks for teaching that to us like so :)
jsm being the best as always!!
Yes!
Thank you!
You have so many videos which have really helped me and others , thank you!
Really helped ! Your explanation is just on another level! Love from India!
Thanks a ton!
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 CZcams. 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?
Quality as always
On the mailing list as well
Thank you!
Thank you so much for this valuable video! I learned a lot about Redux & React.
Another beast of a tutorial from the master itself...Thanks for providing Top Notch content for Free...
Much appreciated!
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
Thank you soo much...I really appreciate it!#JavaScritMastery
You're very welcome!
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 ??
This project helped me with understanding redux. Thanks!
This Channel Is on Fire!!
By the way can someone tell how to scroll a page down like in this video?
Click scroll and move your mouse down
Thank you so much sir and master, all these free courses, how very kind of you, wishing you a more blessings to come back for doing all these. Sooner after I get the right timing, will be enrolling to one of your courses, keep it up po!
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!
Looks really interesting from a developer point of view. Do you think tokens like block monsters can get a place in there?
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
This is the best tutorial that I have ever followed
I am legit crying right now... What a project man... Thanks a million times
Cool
Thanks
You have best effective tutorials…Thanks for your efforts!
You are welcome!
Thank you! Your work drives us all to a greater understanding 👍
I'm so glad to hear that Peter!
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 🙌
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?!?
Awesome brother. Again you bring something completely different for us.
Thanks again ❤️
My pleasure 😊
i really liked the search bar in the cryptocurrencies, very clean, nice use of filter method