In this project, I used Replit to fetch data from a crypto coin API by creating an app with Next.js 13. Let me break down the steps I followed:

1. Installation and Structure:

   • Installed Next.js.
   • Created an "app" folder and added sub-folders named "api" and "components."
   • 
     

2. Component Files:

3. • In the "components" folder, I created three component files: "Coin.jsx," "CoinData.jsx," and "SearchCoin.js."
   • 
     

4. API Route:

   • Inside the "api" folder, I created a sub-folder with the coin's name.
   • Within the coin's sub-folder, I created a file named "route.js" to define the API route for fetching coin data.
   • Inside "route.js," I imported the necessary modules, and I defined an async function named fetchCoins to fetch data from the crypto coin API.
   • I made a fetch request to the API endpoint with appropriate headers, including the "X-RapidAPI-Key" and "X-RapidAPI-Host."
   • After receiving the response, I parsed the JSON data and returned it.
   • 
     

javascriptCopy code
import { NextResponse } from "next/server";

async function fetchCoins() {
  // Fetch data from API with appropriate headers
  const response = await fetch("API_ENDPOINT_URL", {
    headers: {
      "X-RapidAPI-Key": "YOUR_API_KEY",
      "X-RapidAPI-Host": "coinranking1.p.rapidapi.com",
    },
  });

  const coins = await response.json();
  return coins;
}

export async function GET(request) {
  const coins = await fetchCoins();
  // Filter data based on search query
  // Return filtered data as JSON response
  return NextResponse.json(filterCoins);
}

4. 
   

5. Search Functionality:

6. I added a "search" sub-folder within the coin's name sub-folder.

   • Inside the "search" sub-folder, I created a file named "route.js" to define the API route for searching coin data.
   • Inside "route.js," similar to the previous API route, I imported modules and defined the fetchCoins function to fetch data.
   • Additionally, I extracted the query parameter from the request URL and filtered the coins data based on the query.
   • Finally, I returned the filtered data as a JSON response.
   • 
     

7. Styling:

   • For styling, I used Tailwind CSS.
   • 
     

8. Component Usage:

   • In the "components" files, I fetched data from the defined API routes and implemented search functionality using the "SearchCoin.js" component.