logomedCode
January 5, 2024

Build UI currency exchange with Next.js use (API)

Explore the world of real-time currency exchange with a comprehensive guide on building a dynamic and interactive UI using Next.js. This article delves into the creation of a modern and responsive cur...
Build UI currency exchange with Next.js use (API)

#Next.js #API #Crypto #DEV

1-Create Next.js project

open your vs code and follow :

npx create-next-app@latest

NT: use javascript and tailwind CSS

2- Get API Key

open this link Rapid API and copy the code as image bellow :


2-Create Crypto component

open your project and create Crypto.jsx and copy the code below:

"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import Loading from "../loading";
import Image from "next/image";

const Crypto = () => {
  const [news, setNews] = useState();
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    const fetchSeoData = async () => {
      const url =
        `https://coinranking1.p.rapidapi.com/coins?
referenceCurrencyUuid=yhjMzLPhuIDl&timePeriod=24h&tiers%5B0%5D=
1&orderBy=marketCap&orderDirection=desc&limit=50&offset=0`;
      const options = {
        method: "GET",
        headers: {
          "X-RapidAPI-Key":
            "1813cb997bmsh2a47f326c30f6a0p166fd4jsnd62e31fba852",
          "X-RapidAPI-Host": "coinranking1.p.rapidapi.com",
        },
      };
      try {
        const response = await fetch(url, options);
        const result = await response.json();
        console.log(result);
        setNews(result.data.coins);
      } catch (error) {
        console.error(error);
      }
      setLoading(false);
    };
    fetchSeoData();
  }, []);

  return (
    <>
      <span className="text-xl font-semibold mb-8 text-gray-800 font-lexend 
        rounded-lg sm:text-sm xl:text:sm dark:text-light">
        Best Hardware Wallets-Crypto Prices (USD)
      </span>
      <div className="bg-white rounded-md mt-4 border border-b-red-500
                       mb-6 dark:bg-dark dark:border-light">
        {loading ? (
          <Loading />
        ) : (
          news?.map(
            (post, index) =>
              index < 6 && (
                <div
                  key={post.uuid}
                  className={`${
                    index === 0
                      ? "bg-yellow-400 flex justify-between items-center p-4 w-full sm:p-4"
                      : "flex justify-between p-4 w-full xl:p-4 rounded-lg sm:p-4 dark:text-light"
                  }`}
                >
                  <Link
                    href={post.coinrankingUrl}
                    target="_blank"
                    className="inline-flex items-center justify-center"
                  >
                    <span className="px-3 text-xl font-bold sm:text-sm xl:px-1
                                     xl:text-xs dark:text-light">
                      {index + 1}
                    </span>
                    <Image
                      loading="lazy"
                      width={100}
                      height={100}
                      className="rounded-[50%] w-8 h-8 xs:w-6 xs:h-6"
                      src={post.iconUrl}
                      alt="crypto_icons"
                    />
                    <span className="text-[13px] font-semibold text-gray-900 px-8
                       uppercase dark:text-light xl:text-xs xl:px-1 xs:px-2">
                      {post.name}
                    </span>
                  </Link>
                  <p className="text-[13px] font-semibold p-1 flex xl:text-xs">
                    {post.price.slice(0, 10)}{" "}
                    <span className="text-yellow-400">$ </span>
                  </p>
                  <p
                    className={`${
                      post.change < 0
                        ? "text-red-500 font-semibold text-[13px] xl:text-xs"
                        : `text-green-500 font-semibold text-[13px] xl:text-xs`
                    }`}
                  >
                    {post.change} %
                  </p>
                </div>
              )
          )
        )}
      </div>
    </>
  );
};

export default Crypto;

3-run your project

npm run dev


NB: don't forget add comments if it's was useful and share

author image
AuthorNAHIDA EZ-ZOUIANEContent Creatornahidaezzouiane@gmail.com

This website uses cookies to enhance your browsing experience, analyze site traffic, and serve better user experiences. By continuing to use this site, you consent to our use of cookies. Learn more in our cookie policy

Explore the latest insights, articles,free components, and expert advice on programming and software development

© Copyright 2024 MED DAKIR. All rights reserved./privacy policy