Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video



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

You might like

36 Comments

  1. 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.

  2. 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.

  3. 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

  4. 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

  5. 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

  6. 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.

  7. 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

  8. 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 👍…

  9. 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!!!!

  10. 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.

  11. 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!!

  12. 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?

  13. 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

Leave a Reply

Your email address will not be published.