back to all posts

Cryptocurrency Price Tracker in NextJS

by Nabendu Biswas / April 27th, 2021

#nextjs #react #beginners
Series: NextJS

Continuing our NextJS journey, the next app which we will build is the Cryptocurrency price tracker app, which will show a nice interface showing latest prices of top ten cryptocurrencies.

So, open your terminal and create a new NextJS app by below command.

    npx create-next-app crypto-next

Now, as per the instructions change to the newly created folder. I have also opened the project in VSCode. After that run npm run dev to start the project.

CryptoCrypto

Now, the Next app will start on http://localhost:3000/ and we will se this default page.

Crypto BasicCrypto Basic

We will first create our Searchbar component. So, create a components folder in the root directory and a file SearchBar.js inside it.

Put the below content in it. Here, we are first importing the styles module and then inside the component, we are adding a input with style and other parameters. We will pass these parameters soon from the parent component.

    import styles from '../styles/Searchbar.module.css';

    const Searchbar = ({ ...rest }) => {
        return (
            <div className={styles.coin__search}>
                <input className={styles.coin__input} {...rest} />
            </div>
        )
    }

    export default Searchbar

Next, create a file Searchbar.module.css inside the styles folder and add the below styles in it.

    .coin__search{
        margin-bottom: 64px;
        display: flex;
        align-items: center;
        width: 300px;
    }

    .coin__input{
        background: #222531;
        border: none;
        padding: 16px;
        border-radius: 4px;
        outline: none;
        height: 100%;
        width: 100%;
    }

    .coin__input::placeholder{
        color: #e2e2e2;
    }

Now, in the file index.js we have removed everything and just showing the SearchBar component.

    import SearchBar from '../components/SearchBar'

    export default function Home() {
        return (
            <div>
            <SearchBar type='text' placeholder='Search' />
            </div>
        )
    }

Now, our localhost will only show the SearchBar.

localhostlocalhost

We will show the Cryptocurrency prices from an API in coingecko.com and you don’t need any API keys for the same.

The link for the same is https://www.coingecko.com/en/api#explore-api

We will use the /coins/markets endpoint. Here, we need to fill some details and click on execute to get our endpoint.

endpointendpoint

So, we can go to the endpoint in browser and see the data we get from it.

EndpointEndpoint

Now, we will use the getServerSideProps from NextJS to hit the API endpoint and get the data. We are then mapping it to a props- coinsData.

index.jsindex.js

Now, in localhost open the console and we can see all the data.

localhostlocalhost

Now, we will start to show this data in our App, but we will create a separate CoinList.js in the components folder.

Here, we are just mapping through coinsData which we have received as props and passing the required information to another component Coins.

    import Coins from './Coins';

    const CoinList = ({ coinsData }) => {
        return (
            <d>
                {coinsData.map(coin => {
                    return (
                        <Coins 
                            key={coin.id}
                            name={coin.name}
                            id={coin.id}
                            price={coin.current_price}
                            symbol={coin.symbol}
                            marketcap={coin.market_cap}
                            volume={coin.total_volume}
                            image={coin.image}
                            priceChange={coin.price_change_percentage_24h}
                        />
                    )
                })}
            </d>
        )
    }

    export default CoinList

Now, create a Coins.js file in the components folder and with different styles, we are showing the different props.

We are also adding different styles when the Cryptocurrency’s priceChange is less then 0.

    import styles from '../styles/Coins.module.css'

    const Coins = ({ name, id, price, symbol, marketcap, volume, image, priceChange }) => {
        return (
            <div className={styles.coin__container}>
                <div className={styles.coin__row}>
                    <div className={styles.coin}>
                        <img src={image} alt={name} className={styles.coin__img} />
                        <h1 className={styles.coin__h1}>{name}</h1>
                        <p className={styles.coin__symbol}>{symbol}</p>
                    </div>
                    <div className={styles.coin__data}>
                        <p className={styles.coin__price}>${price}</p>
                        <p className={styles.coin__volume}>${volume.toLocaleString}</p>
                        {priceChange < 0 ? (
                            <p className={styles.coin__percent, styles.red}>{priceChange.toFixed(2)}</p>
                        ) : (
                            <p className={styles.coin__percent, styles.green}>{priceChange.toFixed(2)}</p>
                        )}
                        <p className={styles.coin__marketcap}>
                            Mkt Cap: ${marketcap.toLocaleString()}
                        </p>
                    </div>
                </div>
            </div>
        )
    }

    export default Coins

Now, create a file Coins.module.css in the styles folder and add the below CSS in it.

    .coin__container{
        display: flex;
        justify-content: center;
    }

    .coin__row{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
        border-bottom: 1px solid #2e2e2e;
        width: 1000px;
        padding: 0rem 2rem;
    }

    .coin__row:hover{
        background: #171718;
    }

    .coin{
        display: flex;
        align-items: center;
        padding-right: 24px;
    }

    .coin__img{
        height: 30px;
        width: 30px;
        margin-right: 10px;
    }

    .coin__h1{
        font-size: 16px;
        width: 150px;
    }

    .coin__symbol{
        text-transform: uppercase;
    }

    .coin__data{
        display: flex;
        text-align: right;
        justify-content: space-between;
        width: 100%;
    }

    .coin__price{
        width: 110px;
    }

    .coin__volume{
        width: 155px;
    }

    .coin__marketcap{
        width: 230px;
    }

    .coin__percent{
        width: 100px;
    }

    .red{
        color: #f00606;
    }

    .green{
        color: #13c783;
    }

Now, we will add the CoinList component in index.js file.

index.jsindex.js

Now, in localhost our app is already looking good.

AppApp

Now, we are soon going to show the details also for the Cryptocurrency in a different route. Before that we will have the common styles in the Layout.js file in the components folder.

Here, the code is less but i am using a svg logo, which i have created from https://svglogomaker.com/ and it is taking much space.

    import Head from 'next/head';
    import Link from 'next/link';

    const Layout = ({ children, title = 'Crypto Tracker' }) => {
        return (
            <div className='layout'>
                <Head>
                    <title>{title}</title>
                    <link rel='icon' href='/favicon.ico' />
                </Head>
                <header className='header'>
                    <Link href='/' passHref>
                        <a>
                            <svg version="1.1" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="200" height="200">
                                <path fill="#ffc600" d="M31.044,113.748c0,0.252-0.112,0.42-0.448,0.56c-1.848,0.756-3.528,1.148-5.572,1.148c-5.908,0-8.792-4.172-8.792-9.94c0-5.74,3.444-10.136,9.072-10.136c1.932,0,3.668,0.392,5.264,1.176c0.336,0.168,0.448,0.308,0.448,0.476c0,0.112-0.028,0.224-0.084,0.364l-0.644,1.764c-0.084,0.252-0.224,0.364-0.392,0.364c-0.084,0-0.196-0.056-0.308-0.112c-1.4-0.728-2.66-1.008-4.06-1.008c-3.892,0-5.404,3.584-5.404,6.972c0,4.312,2.016,7.056,5.46,7.056c1.344,0,2.716-0.308,4.032-0.896c0.14-0.056,0.252-0.112,0.336-0.112c0.196,0,0.336,0.14,0.448,0.42l0.56,1.512c0.056,0.14,0.084,0.28,0.084,0.392z M42.79,101.652c0,0.084,0,0.168-0.028,0.252l-0.308,1.988c-0.028,0.252-0.168,0.364-0.392,0.364l-0.112,0c-0.224-0.056-0.504-0.084-0.756-0.084c-0.952,0-1.988,0.504-2.688,1.344l0,8.904c0,0.448-0.196,0.7-0.672,0.7l-2.044,0c-0.448,0-0.672-0.224-0.672-0.7l0-8.736l0-3.444c0-0.56,0.28-0.7,0.7-0.7l1.792,0c0.448,0,0.7,0.14,0.7,0.532l0.028,0.896c0.868-1.092,1.82-1.792,3.388-1.792c0.224,0,0.532,0.056,0.784,0.112c0.196,0.056,0.28,0.14,0.28,0.364z M58.708,101.932c0,0.084-0.028,0.168-0.056,0.28l-5.516,14.504c-1.26,3.332-2.828,4.508-6.188,4.508c-0.532,0-1.008-0.028-1.484-0.14c-0.308-0.056-0.42-0.224-0.42-0.476c0-0.084,0.028-0.14,0.028-0.252l0.196-1.456c0.056-0.364,0.196-0.504,0.504-0.504l0.168,0c0.336,0.028,0.672,0.084,0.952,0.084c1.736,0,2.464-0.616,3.024-1.932l0.532-1.26l-5.096-13.132c-0.028-0.084-0.056-0.14-0.056-0.224c0-0.224,0.168-0.392,0.42-0.392l2.688,0c0.392,0,0.588,0.196,0.7,0.476l3.108,9.268l2.94-9.1c0.14-0.448,0.364-0.644,0.84-0.644l2.268,0c0.28,0,0.448,0.168,0.448,0.392z M75.382,108.148c0,2.128-0.644,4.06-1.82,5.432c-1.036,1.176-2.492,1.904-4.312,1.904c-1.288,0-2.576-0.476-3.388-1.316l0,6.272c0,0.56-0.252,0.728-0.728,0.728l-1.96,0c-0.448,0-0.672-0.252-0.672-0.728l0-18.256c0-0.476,0.224-0.644,0.672-0.644l1.68,0c0.476,0,0.728,0.112,0.756,0.532l0.028,0.756c0.812-0.924,2.408-1.624,3.92-1.624c1.848,0,3.136,0.7,4.06,1.708c1.204,1.316,1.764,3.276,1.764,5.236z M71.854,108.316c0-1.316-0.252-2.464-0.812-3.248c-0.532-0.756-1.316-1.148-2.296-1.148c-1.036,0-2.324,0.672-2.884,1.372l0,6.104c0.56,0.756,1.68,1.372,2.744,1.372c0.98,0,1.764-0.448,2.24-1.036c0.7-0.868,1.008-2.044,1.008-3.416z M88.22,114.28c0,0.28-0.14,0.42-0.42,0.532c-0.868,0.364-2.016,0.644-3.136,0.644c-1.428,0-2.66-0.364-3.36-1.176c-0.868-0.98-0.896-2.128-0.896-4.172l0-6.244l-1.316,0c-0.532,0-0.616-0.112-0.616-0.7l0-1.064c0-0.336,0.168-0.56,0.504-0.56l1.428,0l0-3.052c0-0.476,0.252-0.616,0.7-0.672l2.016-0.252l0.14,0c0.364,0,0.532,0.196,0.532,0.616l0,3.36l3.164,0c0.336,0,0.532,0.112,0.532,0.476l0,1.316c0,0.336-0.224,0.532-0.56,0.532l-3.136,0l0,6.412c0,0.84,0.056,1.456,0.364,1.904c0.252,0.364,0.644,0.588,1.316,0.588c0.7,0,1.288-0.168,1.792-0.336c0.112-0.028,0.196-0.056,0.28-0.056c0.196,0,0.308,0.112,0.364,0.336l0.28,1.4c0.028,0.084,0.028,0.112,0.028,0.168z M104.754,108.316c0,4.032-2.464,7.14-6.832,7.14c-4.564,0-6.664-3.08-6.664-7.168c0-4.032,2.464-7.112,6.832-7.112c4.564,0,6.664,3.024,6.664,7.14z M101.254,108.316c0-2.296-0.728-4.48-3.192-4.48c-2.492,0-3.304,2.156-3.304,4.396c0,2.296,0.7,4.564,3.192,4.564c2.464,0,3.304-2.184,3.304-4.48z" />
                                <path fill="#bad923" d="M112.372,94.544921875q0-0.19140625,0.2666015625-0.2939453125t0.3486328125-0.1025390625l0.505859375-0.08203125q0.505859375-0.08203125,1.025390625-0.1435546875t1.01171875-0.1162109375q1.736328125-0.21875,3.47265625-0.4306640625t3.5-0.2119140625q0.13671875,0,0.3759765625,0.013671875t0.478515625,0.0751953125t0.41015625,0.1708984375t0.1708984375,0.30078125q0,0.13671875-0.1298828125,0.2392578125t-0.3076171875,0.1572265625t-0.3623046875,0.068359375t-0.2939453125,0.013671875l-0.2392578125,0t-0.2392578125-0.0546875q-0.724609375,0-1.4287109375,0.068359375t-1.4287109375,0.123046875q0.19140625,0.21875,0.205078125,0.615234375t0.02734375,0.68359375q0,4.83984375,0.068359375,9.625t0.123046875,9.666015625l0,0.02734375q-0.451171875,0.396484375-0.7724609375,0.505859375t-0.6494140625,0.109375q-0.314453125,0-0.6357421875-0.1162109375t-0.7724609375-0.4990234375l0-0.02734375l0.109375-10.732421875q0-1.06640625-0.02734375-2.3515625t-0.02734375-2.6044921875t0.041015625-2.5498046875t0.21875-2.146484375q-0.806640625,0.08203125-1.708984375,0.24609375q-0.779296875,0.13671875-1.490234375,0.13671875l-0.24609375,0q-0.0546875,0-0.3212890625,0.013671875t-0.546875-0.013671875t-0.505859375-0.109375t-0.2255859375-0.2734375z M125.88897265625,105.072265625q0-0.560546875,0.1982421875-0.943359375t0.8408203125-0.3828125q0.24609375,0,0.615234375,0.0751953125t0.423828125,0.3759765625q0.13671875,0.806640625,0.150390625,1.75t0.095703125,1.77734375q0.314453125-0.615234375,0.806640625-1.326171875t1.12109375-1.3125t1.3671875-0.998046875t1.50390625-0.396484375q0.0546875,0,0.205078125,0.041015625t0.2802734375,0.1162109375t0.1572265625,0.1708984375t-0.150390625,0.177734375q-0.0546875,0.1640625-0.232421875,0.1982421875t-0.314453125,0.0341796875q-0.08203125,0-0.259765625-0.068359375q-1.01171875,0.533203125-1.72265625,1.44921875t-1.162109375,2.0302734375t-0.65625,2.3515625t-0.205078125,2.4130859375q0,0.587890625-0.2666015625,0.7109375t-0.8544921875,0.123046875q-0.314453125,0-0.6630859375-0.068359375t-0.4853515625-0.4375q-0.24609375-0.779296875-0.4033203125-1.791015625t-0.2392578125-2.0849609375t-0.1162109375-2.1123046875t-0.0341796875-1.873046875z M135.6051640625,108.900390625q0-0.9296875,0.2529296875-1.791015625t0.7587890625-1.5380859375t1.2646484375-1.080078125t1.7568359375-0.4033203125q0.615234375,0,1.3603515625,0.1845703125t1.4013671875,0.546875t1.09375,0.9228515625t0.4375,1.28515625q0,0.341796875-0.1162109375,0.51953125t-0.4716796875,0.177734375l-0.150390625-0.02734375q0.396484375,1.06640625,0.68359375,2.1875t0.560546875,2.2421875q0.109375,0.21875,0.1640625,0.3896484375t0.0546875,0.3349609375q0,0.21875-0.123046875,0.3623046875t-0.3212890625,0.2119140625t-0.41015625,0.095703125t-0.3759765625,0.02734375q-0.587890625,0-0.8818359375-0.205078125t-0.423828125-0.560546875t-0.1572265625-0.7998046875t-0.109375-0.8955078125q-0.1640625,0.533203125-0.4306640625,1.0390625t-0.62890625,0.9091796875t-0.8544921875,0.642578125t-1.107421875,0.2392578125q-0.90234375,0-1.517578125-0.51953125t-0.9912109375-1.2783203125t-0.546875-1.6201171875t-0.1708984375-1.599609375z M137.5465703125,108.708984375q0,0.505859375,0.068359375,1.06640625t0.2255859375,1.107421875t0.4033203125,1.0322265625t0.615234375,0.8544921875q0.669921875-0.724609375,0.9912109375-1.763671875t0.57421875-2.0029296875t0.57421875-1.654296875t0.9912109375-0.6904296875q0.423828125,0,0.7109375,0.150390625q-0.13671875-0.341796875-0.451171875-0.6630859375t-0.7041015625-0.587890625t-0.806640625-0.4375t-0.7861328125-0.1708984375q-0.109375,0-0.2529296875,0.0341796875t-0.2255859375,0.0068359375q-0.560546875,0.1640625-0.9228515625,0.5673828125t-0.587890625,0.9501953125t-0.3212890625,1.12109375t-0.095703125,1.080078125z M147.45416796875,108.626953125q0-0.984375,0.2529296875-1.9755859375t0.7861328125-1.77734375t1.3603515625-1.2783203125t1.9482421875-0.4921875q0.478515625,0,1.052734375,0.1162109375t1.0595703125,0.369140625t0.8203125,0.65625t0.3349609375,0.9912109375q0,0.369140625-0.19140625,0.4921875t-0.505859375,0.123046875l-0.095703125-0.13671875t-0.2666015625-0.3486328125t-0.3623046875-0.451171875t-0.369140625-0.4033203125q-0.560546875-0.560546875-1.052734375-0.6015625l-0.109375,0q-0.41015625,0-0.765625,0.24609375q-0.396484375,0.30078125-0.7041015625,0.84765625t-0.5126953125,1.162109375t-0.3212890625,1.244140625t-0.1162109375,1.0390625q0,0.560546875,0.1298828125,1.2783203125t0.4375,1.3603515625t0.779296875,1.080078125t1.2099609375,0.4375q0.669921875,0,1.216796875-0.328125t1.0458984375-0.7314453125t0.9775390625-0.724609375t0.984375-0.3212890625q0.21875,0,0.4443359375,0.0546875t0.2255859375,0.287109375l0,0.08203125q-0.24609375,0.642578125-0.833984375,1.134765625t-1.3193359375,0.8544921875t-1.517578125,0.5400390625t-1.4013671875,0.177734375q-1.1484375,0-2.0166015625-0.3759765625t-1.4423828125-1.0322265625t-0.8681640625-1.5791015625t-0.2939453125-2.0166015625z M159.385203125,114.451171875l0.287109375-0.341796875q-0.0546875-2.296875-0.123046875-4.580078125t-0.068359375-4.5390625q0-2.802734375,0.3349609375-5.4208984375t0.6630859375-5.3662109375q0.02734375-0.1640625,0.1572265625-0.2666015625t0.3212890625-0.1708984375t0.3896484375-0.095703125t0.3623046875-0.02734375q0.21875,0,0.546875,0.08203125t0.65625,0.478515625q0,0.13671875,0.0205078125,0.2392578125t0.0205078125,0.2392578125q0,1.0390625-0.2802734375,2.228515625t-0.3759765625,2.283203125q-0.109375,1.33984375-0.150390625,2.65234375t-0.041015625,2.666015625l0.02734375,1.203125q0.2734375-0.341796875,0.779296875-0.875t1.09375-1.0322265625t1.17578125-0.8544921875t1.06640625-0.35546875q0.724609375,0,1.0048828125,0.41015625t0.2802734375,1.080078125q0,0.615234375-0.2666015625,1.28515625t-0.697265625,1.3056640625t-0.9775390625,1.1416015625t-1.080078125,0.751953125q0.724609375,0.90234375,1.4833984375,1.72265625t1.6611328125,1.544921875l0,0.314453125q-0.02734375,0.13671875-0.1708984375,0.205078125t-0.314453125,0.109375t-0.3349609375,0.0615234375t-0.2734375,0.0205078125q-0.669921875,0-1.2919921875-0.396484375t-1.162109375-0.970703125t-1.0185546875-1.216796875t-0.875-1.12109375q0.08203125,1.572265625,0.1845703125,3.1376953125t0.1025390625,3.1376953125q0,0.19140625-0.1708984375,0.3212890625t-0.396484375,0.1982421875t-0.4580078125,0.095703125t-0.3828125,0.02734375q-0.806640625,0-1.1416015625-0.2939453125t-0.5673828125-1.0185546875z M162.1879375,108.01171875q0.341796875,0,0.8134765625-0.2939453125t0.9775390625-0.7314453125t0.943359375-0.9228515625t0.7041015625-0.9228515625t0.2666015625-0.7041015625t-0.369140625-0.2392578125q-0.13671875,0-0.560546875,0.396484375t-0.943359375,0.970703125t-1.0390625,1.244140625t-0.79296875,1.203125z M170.45491015625,109.4609375q0-0.95703125,0.2119140625-2.255859375t0.7177734375-2.4609375t1.3330078125-1.9755859375t2.0849609375-0.8134765625q1.17578125,0,1.763671875,0.6767578125t0.587890625,1.8251953125q0,0.751953125-0.2802734375,1.6474609375t-0.7998046875,1.6953125t-1.23046875,1.3330078125t-1.5859375,0.533203125l-0.35546875-0.02734375q0,0.369140625,0.109375,0.9912109375t0.3212890625,1.2373046875t0.546875,1.080078125t0.8134765625,0.46484375q0.697265625,0,1.33984375-0.560546875t1.216796875-1.244140625t1.06640625-1.244140625t0.90234375-0.560546875q0.21875,0,0.451171875,0.068359375t0.259765625,0.3828125q0,0.19140625-0.1025390625,0.314453125t-0.1845703125,0.2734375q-0.423828125,0.724609375-0.9228515625,1.380859375t-1.1279296875,1.189453125t-1.3740234375,0.8408203125t-1.6474609375,0.3076171875q-1.17578125,0-1.955078125-0.4169921875t-1.2578125-1.12109375t-0.6904296875-1.626953125t-0.2119140625-1.9345703125z M172.90217578125,108.421875l0.3828125,0.341796875q0.2734375,0.24609375,0.546875,0.109375t0.4921875-0.4990234375t0.4033203125-0.8955078125t0.328125-1.09375t0.2119140625-1.09375t0.068359375-0.888671875l0-0.46484375t-0.041015625-0.4921875t-0.1435546875-0.3896484375t-0.3212890625-0.1982421875q-0.068359375-0.013671875-0.123046875-0.013671875q-0.46484375,0-0.79296875,0.587890625q-0.35546875,0.65625-0.57421875,1.5927734375t-0.314453125,1.9208984375t-0.123046875,1.4765625z M181.8800859375,105.072265625q0-0.560546875,0.1982421875-0.943359375t0.8408203125-0.3828125q0.24609375,0,0.615234375,0.0751953125t0.423828125,0.3759765625q0.13671875,0.806640625,0.150390625,1.75t0.095703125,1.77734375q0.314453125-0.615234375,0.806640625-1.326171875t1.12109375-1.3125t1.3671875-0.998046875t1.50390625-0.396484375q0.0546875,0,0.205078125,0.041015625t0.2802734375,0.1162109375t0.1572265625,0.1708984375t-0.150390625,0.177734375q-0.0546875,0.1640625-0.232421875,0.1982421875t-0.314453125,0.0341796875q-0.08203125,0-0.259765625-0.068359375q-1.01171875,0.533203125-1.72265625,1.44921875t-1.162109375,2.0302734375t-0.65625,2.3515625t-0.205078125,2.4130859375q0,0.587890625-0.2666015625,0.7109375t-0.8544921875,0.123046875q-0.314453125,0-0.6630859375-0.068359375t-0.4853515625-0.4375q-0.24609375-0.779296875-0.4033203125-1.791015625t-0.2392578125-2.0849609375t-0.1162109375-2.1123046875t-0.0341796875-1.873046875z" />
                            </svg>
                        </a>
                    </Link>
                </header>
                <main>{children}</main>
            </div>
        );
    };

    export default Layout;

Now, to show it in all our pages, the best way in NextJS is to add it in _app.js file.

app.js_app.js

We will be completing our styles in globals.css but before that we need to add a className of coin__app in index.js file.

index.jsindex.js

Now, in globals.css add the below styles.

    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
        color: #fff;
    }

    body {
        background-color: #101012;
    }

    .coin__app {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        color: #fff;
    }

    /* Layout CSS */
    .layout {
        height: 100%;
        width: 100%;
    }

    .header {
        display: flex;
        justify-content: center;
    }

Now, styling of our App is complete and looking great in localhost.

App completeApp complete

We have two more things remaining, and we will first complete our Search functionality. It is very simple and we will use the useState hook to have a search state.

Now, we are adding an onChange handler to SearchBar, which fires a function handleChange, whenever someone types in the input field.

After that we are taking our search input and creating a filteredCoins variable using filter. And we are passing it to CoinList component.

index.jsindex.js

After that if we search anything in the searchbar, it will show the correct result.

SearchBarSearchBar

Now, we are going to add the logic to show Cryptocurrency details, when someone clicks on the cryptocurrency. For this we need dynamic route, so create a coin folder in pages and a [id].js file inside it.

But first also wrap the whole row shown from Coin.js with a link tag, which will take to the /coin/id route.

Coin.jsCoin.js

Now, if we click on any row in localhost, we will be taken to the correct path. But we will get an error as we don’t have anything in [id].js file.

coin pathcoin path

Now, we will use a different API endpoint to get the details of each cryptocurrency.

bitcoinbitcoin

Now, in [id].js file we will hit this api using getServerSideProps, with the similar method which we have seen in index.js file. We are passing the id, which we are getting from the page click in it.

After that we are destructuring it and showing it inside the component.

    import styles from '../../styles/Coin.module.css';

    const Coin = ({ coin }) => {
        return (
            <div className={styles.coin__page}>
                <div className={styles.coin__container}>
                    <img
                        src={coin.image.large}
                        alt={coin.name}
                        className={styles.coin__image}
                    />
                    <h1 className={styles.coin__name}>{coin.name}</h1>
                    <p className={styles.coin__ticker}>{coin.symbol}</p>
                    <p className={styles.coin__current}>
                        {coin.market_data.current_price.usd}
                    </p>
                </div>
            </div>
        );
    };

    export default Coin;

    export async function getServerSideProps(context) {
        const { id } = context.query;
        const res = await fetch(`https://api.coingecko.com/api/v3/coins/${id}
        `);
        const data = await res.json();

    return {
            props: {
                coin: data
            }
        };
    }

Now, create a Coin.module.css inside the styles folder and add these styles in it.

    .coin__page {
        display: flex;
        justify-content: center;
        height: 75vh;
        align-items: center;
    }
    
    .coin__container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1px solid #2fffe5;
        border-radius: 10px;
        padding: 4rem;
        width: 400px;
    }
    
    .coin__image {
        margin-bottom: 1rem;
    }
    
    .coin__name {
        margin-bottom: 1rem;
    }
    
    .coin__ticker {
        margin-bottom: 1rem;
    }
    
    .coin__current {
        margin-bottom: 1rem;
        font-size: 2rem;
    }

Now, if we go to any page, we will see the cryptocurrency details.

Crypto detailCrypto detail

The github for this project can be found here. I have also deployed it in vercel and it is live.

Crypto TrackerCrypto Tracker

Nabendu Biswas