Be taught superior React finest practices, State Administration utilizing Redux Toolkit, UI Creation utilizing Ant Design, creating charts utilizing Chart.js, and fetching information from a number of sources utilizing RapidAPI whereas constructing the perfect Cryptocurrency App on YouTube – Cryptoverse.
⭐ RapidAPI –
⭐ CoinRanking API –
⭐ Bing Information Search –
Because the 1st of January 2022 you may should make the next modifications to the code:
1. Change the api v1 to v2 on RapidAPI
2. In new model, to entry the exchanges endpoint you may want a premium plan
three. Change the coin worth historical past endpoint to the next – `coin/$/historical past?timeperiod=$`
four. Change coin id to coin uuid in cryptocurrencies.jsx file
5. In cryptoDetails.jsx file ensure to match the stats and genericStats values
📚 Supplies/References:
GitHub Code (give it a star ⭐):
Kinds & Different Code:
cryptocurrency.png:
information picture URL:
📧 Be part of our JavaScript Mastery’s Publication on Net Improvement, JavaScript & React to get unique programming guides, suggestions & methods, and full e-books: 🔥
⭐Hostinger is my private advice for internet hosting –
Use the code JAVASCRIPTMASTERY to avoid wasting as much as 91% on all yearly internet hosting plans.
💻 Grasp JavaScript:
Use the particular promo code “YOUTUBE” on checkout to avoid wasting $60!
❤️ Assist JavaScript Mastery & Counsel Future Movies:
BuyMeACoffe:
Patreon:
🌎 Discover Me Right here:
Discord Group:
Instagram:
Twitter:
💼 Enterprise Inquiries:
E-mail: [email protected]
Time Stamps 👇
00:00:00 Intro
00:02:06 RapidAPI
00:03:25 Structure
00:32:59 Homepage
00:36:31 Redux Toolkit & API Dev
00:53:32 Cryptocurrencies
01:11:28 Crypto Information
01:32:02 Crypto Particulars
01:56:24 Chart
02:01:37 Cellular navigation
02:06:22 Problem
supply
How to fix this error Switch was not found in react-router-dom ??
God Bless you.
Great content bro keep going ♥️♥️
I just changed a little design and its working too fine, Thank You Adrian ( @JavaScript Mastery )
Click here to see my deployed version => https://lx-crypto-app.netlify.app /
Hello Adrian!
Switch is not work no more, what We should use its better ?
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.
thank you so much 🙂
god bless you
I am almost done. The only other issue I am having is when I click on the cards to get info about the crypto, I just get a blank page. There might be something wrong in my CryptoDetails.jsx but I'm not sure.
HOW TO FIX THE LINE CHART
1. the V1 API for the crypto API is deprecated, so you can only get 24h price data no matter which timePeriod you use. it also always returns the same date so you have to multiply this number by 1000.
//in cryptodetails.jsx, this fixes the incorrect timestamps which need to be multiplied by 1000 since they are in milliseconds and also formatted properly
const coinPrice = [];
const coinTimestampRaw = [];
for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
coinPrice.push(coinHistory?.data?.history[i].price);
coinTimestamp.push(
new Date(
coinHistory?.data?.history[i].timestamp * 1000
).toLocaleTimeString()
);
}
2. how to fix the chart
//in linechart.jsx, this fixes the chart itself
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
const data = {
// X-Axis
labels: coinTimestamp,
// Y-Axis
datasets: [
{
label: `Price in USD ($)`,
data: coinPrice,
fill: false,
backgroundColor: "#0071bd",
borderColor: "#0071bd",
},
],
};
const options = { scales: { y: { ticks: { beginAtZero: true } } } };
return (
<>
<Row className="chart-header">
<Typography.Title level={2} className="chart-title">
{coinName} 24h Price Chart
</Typography.Title>
<Col className="price-container">
<Typography.Title level={5} className="price-change">
{coinHistory?.data?.change}%
</Typography.Title>
<Typography.Title level={5} className="current-price">
{coinName} Price: ${currentPrice}
</Typography.Title>
</Col>
</Row>
<Line data={data} options={options} />
</>
);
};
if you want to get the price data as he shows. inthe video you'l have to modify your code as. to use the V2 crypto api data
Thank you for all this useful information you give out all time. Thank you. I surely know purchasing this courses will cost fortunes, but if you don't mind in your next videos. you can add a payment link to buy you a coffee . You deserve more, but for now, let appreciate you
Anyone getting this error while calling the custom hook of "useGetCryptoNewsQuery" :
Uncaught TypeError: (0 , _services_cryptoNewsApi__WEBPACK_IMPORTED_MODULE_2__.useGetCryptoNewsQuery) is not a function
looking good 🙂
This video was like one of the few good ones I came across on YouTube. 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.
thank you
Who else has issues displaying the graph👀
Thanks so much
i can not use switch from react-router-dom
Amazing stuff, but…Why do you use divs almost all of the time instead of using semantic HTML elements?
❤️😍🔥
thanks
What's that "?." Operator means iat 51:05
Input:
import React from 'react';
import millify from 'millify';
import { Typography, Row, Col, Statistic } from 'antd';
import {Link} from 'react-router-dom';
import { useGetCryptosQuery } from '../services/cryptoApi';
const {Title} = Typography;
const Homepage = () => {
const{data, isFetching} = useGetCryptosQuery();
const globalStats = data?.data?.stats;
if(isFetching) return 'Loading…';
return (
<>
<Title level ={2} className="heading">Global Crypto Stats</Title>
<Row>
<Col span = {12}><Statistic title = "Total Cryptocurrencies" value = {globalStats.total} /></Col>
<Col span = {12}><Statistic title = "Total Exchanges" value = {millify(globalStats.totalExchanges)} /></Col>
<Col span = {12}><Statistic title = "Total Market Cap" value = {millify(globalStats.totalMarketCap)} /></Col>
<Col span = {12}><Statistic title = "Total Total 24h Volume" value = {millify(globalStats.total34hVolume)} /></Col>
<Col span = {12}><Statistic title = "Total Market" value = {millify(globalStats.totalMarkets)} /></Col>
</Row>
</>
)
}
export default Homepage
Output:
Failed to compile
./src/components/Homepage.jsx 16:25
Module parse failed: Unexpected token (16:25)
You may need an appropriate loader to handle this file type.
| isFetching = _useGetCryptosQuery.isFetching;
|
> var globalStats = data?.data?.stats;
| if (isFetching) return 'Loading…';
| return /*#_PURE_*/React.createElement(React.Fragment, null, /*#_PURE_*/React.createElement(Tit
💛💛💛
The best channel. Period. I haven't found any other channel with such content. Thanks man!!
Hey can anyone just say why am I getting the times stamp in charts as only a single date(1/19/1970) how to get the recent dates???…any help would be appreciated 👍…
wish you're available to help with issues…..mine crashes when i populate the App.js with contents from Homepage.jsx and also contents don't align at the middle like in yours!! Any help pls?? Great tutorial!!!!
The best learning platform have ever seen on YouTube. Keep up the good work sir.
I am currently trying to build this. react-router-dom has been updated. Switch has been replaced by Routes but when I import that it kills the front end. I've been pretty stuck here.
This is awesome, i would love to see how create a crypto exchange app! go for it bro!
sir I am getting 401 unauthorized as error in console while I console logging useGetCryptosQuery
Has anyone come across an error with the time filtering "const time = ['3h', '24h', '7d', '30d', '1y', '3m', '3y', '5y'];" – it all looks perfect in my project but when I select a time period e.g 30 days the chart details all remain the same , nothing happens – I've checked the GitHub code and my code is all correct – I've also implemented the changes in the description above – please let me know. Thanks
Also, great video thank you!!
the rapid api part is not working for me can you please help me….it shows a warning that the api is not connected and lost and the output shows like blank page
I have a question, if you want to retrieve data from the API, you must use asynchronous but in the Homepage.jsx components there is no asynchronous function, and when you retrieve data from stats you can't because you get an error message "Uncaught TypeError: Cannot read properties of undefined (reading 'total' )"
How to solve this?
Thanks man 😊
js files shouldn't contain jsx syntax so it doesn't confuse people. when you do enterprise apps, a linter might be present and that will point this non-sense
Hey, Adrian, can you implement TDD or BDD in the next app?