DEV Community: abdelilah majid

Stop Showing the Wrong Currency

abdelilah majid — Sat, 21 Mar 2026 14:20:37 +0000

Let's be honest: nothing kills an international conversion rate faster than showing a European customer a pricing page in US Dollars, or forcing a Japanese user to mentally convert from British Pounds.

If you're building a global SaaS or e-commerce site, you need to show the local currency immediately. But doing IP geolocation on the frontend is notoriously tricky. Heavy local databases like MaxMind slow down your server, and the free APIs out there are heavily rate-limited or inaccurate.

Today, I’m going to show you how to build a dynamic React hook in Next.js that detects a user's location and currency in under 50ms using a single API call.

The Strategy

We’re going to use the Core Web Utilities API. I love this specific tool because it's written in Rust, runs on AMD EPYC servers, and returns an insane amount of data (including the local currency) from a single IP lookup.

The Code

Let's create a custom React Hook called useUserLocation.

This hook will ping our API when the component mounts, grab the user's IP implicitly, and return their local currency and country code.

import { useState, useEffect } from 'react';

export function useUserLocation() {
  const [location, setLocation] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchLocation = async () => {
      try {
        // Leaving the IP blank tells the API to resolve the caller's IP automatically!
        const response = await fetch('https://core-web-utilities-api.p.rapidapi.com/v1/geoip?ip=', {
          headers: {
            'x-rapidapi-key': 'YOUR_RAPIDAPI_KEY', // Get yours from RapidAPI
            'x-rapidapi-host': 'core-web-utilities-api.p.rapidapi.com'
          }
        });

        const data = await response.json();
        setLocation(data);
      } catch (err) {
        console.error("Failed to fetch location", err);
      } finally {
        setLoading(false);
      }
    };

    fetchLocation();
  }, []);

  return { location, loading };
}

Using it in your Pricing Component

Now, let's drop this into a UI component. If the API detects they are in Europe, we show Euros. If they are in the UK, we show GBP. Otherwise, we default to USD.

import React from 'react';
import { useUserLocation } from './hooks/useUserLocation';

const PricingCard = () => {
  const { location, loading } = useUserLocation();

  // Default to USD
  let symbol = '$';
  let price = 29;

  // Dynamically adjust based on the API's currency response
  if (location && location.currency === 'EUR') {
    symbol = '€';
    price = 26; // Adjusted for exchange rate
  } else if (location && location.currency === 'GBP') {
    symbol = '£';
    price = 22;
  }

  if (loading) return <div className="p-8 text-center">Loading pricing...</div>;

  return (
    <div className="border-2 border-blue-500 rounded-xl p-8 max-w-sm text-center shadow-lg">
      <h2 className="text-2xl font-bold mb-2">Pro Plan</h2>
      <p className="text-gray-500 mb-6">Everything you need to scale.</p>

      <div className="text-5xl font-extrabold mb-8">
        {symbol}{price} <span className="text-lg text-gray-400 font-normal">/mo</span>
      </div>

      <button className="bg-blue-600 text-white w-full py-3 rounded-lg font-bold hover:bg-blue-700">
        Start Free Trial
      </button>

      {location && (
        <p className="text-xs text-gray-400 mt-4">
          Pricing localized for {location.country}
        </p>
      )}
    </div>
  );
};

export default PricingCard;

Why this matters

By wrapping this logic into a custom hook powered by a fast API, you get a few massive wins:

Zero Maintenance: You don't have to keep an IP database updated on your own server.
Instant Localization: The API returns currency, country, and even timezone, so you can localize your entire app state from one single network request.
Security: The API also returns a proxy and vpn flag. If someone is trying to spoof a cheaper region using a VPN, you can actually detect it and block them!

If you want to try this out, grab a free key from the Core Web Utilities API on RapidAPI and drop it into your codebase. Your conversion metrics will thank you!

Build Discord-Style Rich Link Previews in React (Without CORS Issues)

abdelilah majid — Fri, 20 Mar 2026 04:35:23 +0000

Have you ever tried to build a link preview card—like the ones you see in Discord, Twitter, or Slack—only to be instantly blocked by CORS errors?

If you try to fetch a URL directly from your frontend React application to scrape its <meta> tags, the browser's security model will stop you in your tracks. You have to do this from a backend.

But instead of spinning up a whole Node.js/Puppeteer backend just to scrape OpenGraph tags, I’m going to show you how to do this in 5 minutes using a blazing-fast Rust-based utility API.

The Goal

We are going to build a React component <LinkPreview url="..." /> that takes a URL and automatically renders a beautiful card with the site's title, description, and preview image.

Step 1: Get your API Key

To bypass CORS and extract the rich metadata, we'll use the Core Web Utilities API on RapidAPI.

Go to the Core Web Utilities API page.
Subscribe to the Free tier.
Grab your x-rapidapi-key.

Step 2: The React Component

Here is the complete code for our LinkPreview component. We'll use standard fetch to call our API and React's useState and useEffect to manage the data.

Pro Tip: Sometimes websites use relative paths for their images (like /favicon.ico instead of https://site.com/favicon.ico). In this component, we use the URL object to safely convert everything to absolute URLs, and we even fallback to Google's hidden Favicon service if the site doesn't have one!

import React, { useState, useEffect } from 'react';

const LinkPreview = ({ url }) => {
  const [meta, setMeta] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMetadata = async () => {
      setLoading(true);
      try {
        const response = await fetch(`https://core-web-utilities-api.p.rapidapi.com/v1/metadata?url=${encodeURIComponent(url)}`, {
          method: 'GET',
          headers: {
            'x-rapidapi-key': 'YOUR_RAPIDAPI_KEY_HERE',
            'x-rapidapi-host': 'core-web-utilities-api.p.rapidapi.com'
          }
        });

        const data = await response.json();
        setMeta(data);
      } catch (error) {
        console.error("Failed to fetch metadata", error);
      } finally {
        setLoading(false);
      }
    };

    if (url) fetchMetadata();
  }, [url]);

  if (loading) return <div className="animate-pulse bg-gray-200 h-64 w-full max-w-md rounded-xl"></div>;
  if (!meta) return null;

  // Helper to fix relative URLs (e.g. "/assets/image.png" -> "https://site.com/assets/image.png")
  const getAbsoluteUrl = (path) => {
    if (!path) return null;
    try { return new URL(path, url).href; } 
    catch { return path; }
  };

  const domain = new URL(url).hostname;
  const imageUrl = getAbsoluteUrl(meta.image);

  // Fallback to Google's Favicon service if the site doesn't provide one
  const faviconUrl = getAbsoluteUrl(meta.favicon) || `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;

  return (
    <div className="max-w-md w-full border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all font-sans bg-white">
      {/* Image Header with Fallback */}
      {imageUrl ? (
        <img src={imageUrl} alt={meta.title || domain} className="w-full h-48 object-cover border-b border-gray-100" />
      ) : (
        <div className="w-full h-32 bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center border-b border-gray-100">
          <span className="text-gray-400 font-medium text-sm">No Preview Image</span>
        </div>
      )}

      <div className="p-4">
        <h3 className="font-bold text-gray-900 leading-tight line-clamp-1">
          {meta.title || meta.site_name || domain}
        </h3>

        {meta.description && (
          <p className="text-sm text-gray-600 mt-1.5 line-clamp-2 leading-relaxed">
            {meta.description}
          </p>
        )}

        <div className="mt-3 flex items-center gap-2 text-xs text-gray-500 font-medium">
          <img 
            src={faviconUrl} 
            alt="icon" 
            className="w-4 h-4 rounded-sm"
            onError={(e) => e.target.style.display = 'none'} 
          />
          <span className="truncate uppercase tracking-wide">{domain}</span>
        </div>
      </div>
    </div>
  );
};

export default LinkPreview;

Step 3: Use it anywhere!

Now you can drop this component anywhere in your app:

export default function App() {
  return (
    <div className="p-10 flex flex-col gap-6 items-center bg-gray-50 min-h-screen">
      <h1 className="text-2xl font-bold">My Awesome Feed</h1>

      <LinkPreview url="https://github.com/rust-lang/rust" />
      <LinkPreview url="https://dev.to" />
      <LinkPreview url="https://news.ycombinator.com" />
    </div>
  );
}

Why this approach?

By offloading the scraping to the Core Web Utilities API, you get a few massive benefits:

Zero CORS Issues: The API acts as a proxy, safely fetching the HTML from the server side.
Deep Extraction: It automatically falls back between OpenGraph (og:title), Twitter Cards (twitter:title), and standard HTML tags so you always get the best result.
No Heavy Dependencies: You don't have to install heavy HTML parsers like cheerio or jsdom in your project.

Try it out!

If you're building a SaaS, a blog platform, or a chat app, rich link previews are a must-have for UX. Give the Core Web Utilities API a try for your next project, and let me know what you build!