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




Learn advanced React best practices, State Management using Redux Toolkit, UI Creation using Ant Design, creating charts …


44 Comments

  1. Great video but it needs to be updated, maybe specify the level one should be, example: i think you should show how you coded the css style sheet instead of us just hving to get the sheet and knowing nothing about it. also you forgot to install react and intall it aftter the issue, and while doing so you stated by words how to terminate the app but didn't show us, which is the purpose of a tutorial. please don't get me wrong is amazing information but i do think this video needs some editing and minor updates.

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published.


*