coingecko

Build A React JS Website – Cryptocurrency API – Multi-Page App With React Router DOM


Join Daily Airdrop

YouTube video


In this video we will be building a React JS application based around cryptocurrencies. We will be using hooks such as useState and useEffect while using Axios to interact with the Coin Gecko API. We will also be using React Router Dom v6 to have dynamic routes. Learn about useParams, DOMpurify, and navigating common issues when working with API’s in React. Hope everyone enjoys the video – let me know down in the comments below!

GitHub Repo:
https://github.com/fireclint/crypto-app-react

CoinGecko API:
https://www.coingecko.com/en/api/documentation?

☕ Buy me a Coffee ☕
https://www.buymeacoffee.com/clintbriley

Instagram 💪
https://instagram.com/fireclint


Join Daily Airdrop

Shortcuts:
01:40 – Create React App
03:35 – Install Axios
04:30 – useState/useEffect Connecting to API
06:17 – Grab CoinGecko API
28:30 – Install React Router Dom v6
34:42 – Single Coin Coin Gecko API
37:55 – useParams – React-Router-Dom
40:02 – Code the Individual Coin Paige
01:01:44 – DOMPurify to sanitize text

🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard – https://amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse – https://amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor – https://amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone – https://amzn.to/3O00nqG
Mic Boom Arm – https://amzn.to/3NHn6YU
Monitor Desk Light Bar – https://amzn.to/3xzKlyj

source

Related Articles

22 Comments

  1. I really enjoyed this video, it is very helpful for me since I am trying to sharpen my skills.

    However this video is 100% not for beginners like you said at the start. Unless you know the concepts already it would be impossible to follow, I think you should not present it for new comers because it will discourage them.

    But again, this video is PERFECT if you are trying to work on your newly developed skills.

  2. Hey Man, In this video please add search box for filtering coins please🙏🙏🙏

  3. Hey brother just a heads up to save you time when you type a div or other things like Lorem, you can for example do div.container [enter] and it will auto generate for you the <div classname='container> </div> for you. Or for using Lorem for example if you type loremX [X being a variable] ex Lorem20, it will auto generates 20 word of Lorem text….. Not sure if you knew but I Hope it saves you some coding time..

  4. At 43:00 we can use 'Optional Chaining' : <img src={coin.image?.small} /> 🙂

    Also, instead of set many conditionals, i've set additional state:
    1: [ isLoading, setIsLoading ] = useState(true);

    2: then i've set it to 'false' – just after data is fetched and added to our coin state.

    3. I've created <Loader /> component with spinning circle, and send it to view while the data is fetching:

    return (
    <div>
    {isLoading ? (
    <Loader />
    ) : ( Our whole Coin.js jsx code here ;> )

  5. Hi! 🙂 I followed your instructions with your github file but still it does not work 🙁 I got the following:
    Compiled with problems:X. ERROR in ./src/index.js 9:0-40

    Module not found: Error: Package path ./CLIENT is not exported from package C:crypto-app-react-mainnode_modulesreact-dom (see exports field in C:crypto-app-react-mainnode_modulesreact-dompackage.json)

    This is index.js:

    import React from 'react';

    // import ReactDOM from 'react-dom';

    import './index.css';

    import App from './App';

    import { BrowserRouter } from 'react-router-dom';

    import ReactDOM from 'react-dom/CLIENT';

    const root = ReactDOM.createRoot(document.getElementById('root'));

    root.render(<App />);

    ReactDOM.render(

    <BrowserRouter>

    <App />

    </BrowserRouter>,

    document.getElementById('root')

    );

  6. Hi! HELP 29:17 Your code in this video does not work, because your index.js is not made according with the latest React installation version which does as follows in index.js: Please could you check that? THANK YOU! 🙂
    const root = ReactDOM.createRoot(document.getElementById('root'));

    root.render(

    <React.StrictMode>

    <App />

    </React.StrictMode>

    );

  7. thanks man, you can suggest how do auto update data by day or about times in day. Tks

  8. Thanks Man , could you please make More React API or Redux projects tutorial, it would be very helpful

  9. at 38:53 how do i fix the cors error? I'm getting–> "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header"

  10. HAPPY BIRTHDAY! excellent! Practical and instructive!

    God bless you and continue with much success!

    OBS: I'm Brazilian, I'm using Google translator!

  11. thnaks for useful video!!!! I seem, I've done a little bit simpler const {image, market_data} = coin , then if (image === undefined || market_data === undefined ) return null; Is it correct ?

Back to top button