> ## Documentation Index
> Fetch the complete documentation index at: https://docs.world.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Testing your mini app

> Enter your App ID and scan the generated QR code to test your mini app.

export const QRCodeGenerator = props => {
  const {appId: initialAppId = "", hideInput = false, baseUrl = "https://worldcoin.org/mini-app", hideDetails = false} = props || ({});
  const [appId, setAppId] = useState(initialAppId);
  const trimmed = useMemo(() => appId.trim(), [appId]);
  const isValid = useMemo(() => (/^app_[a-f0-9]+$/).test(trimmed), [trimmed]);
  const payload = useMemo(() => {
    if (!trimmed || !isValid) return "";
    return `${baseUrl}?app_id=${trimmed}`;
  }, [trimmed, isValid, baseUrl]);
  const qrSrc = useMemo(() => {
    const size = "200x200";
    const data = encodeURIComponent(payload);
    return `https://api.qrserver.com/v1/create-qr-code/?size=${size}&data=${data}`;
  }, [payload]);
  const containerGridClass = hideDetails ? "" : "grid gap-4 md:grid-cols-[200px_1fr] items-start";
  return <div className="not-prose p-4 border rounded-xl space-y-4">
      {!hideInput && <label className="block text-sm font-medium">
          App ID
          <input type="text" placeholder="Enter App Id (eg. app_f88bb2a....)" value={appId} onChange={e => setAppId(e.target.value)} className="mt-1 w-full rounded-lg border px-3 py-2" aria-label="App ID" />
        </label>}

      {trimmed && !isValid && <p className="text-sm text-red-600">
          Invalid App Id. Eg. app_xxxxxxxxxxx
        </p>}

      <div className={containerGridClass}>
        <div className="flex items-center justify-center border rounded-xl p-2 bg-white">
          {isValid && payload ? <img src={qrSrc} alt={`QR for ${payload}`} width="200" height="200" loading="eager" /> : <div className="w-[200px] h-[200px] grid place-items-center text-sm text-gray-500">
              {hideInput ? "Provide an App ID via props" : "Enter a valid App ID"}
            </div>}
        </div>

        {!hideDetails && <div className="space-y-2 text-sm">
            <div className="text-gray-700">
              Encoded value:
              <code className="ml-2 px-2 py-1 rounded bg-gray-100">
                {payload || "(empty)"}
              </code>
            </div>
            <ol className="list-decimal pl-5 space-y-1">
              <li>Enter your App ID {hideInput ? "via props" : "above"}.</li>
              <li>Scan the QR with your phone’s camera.</li>
              <li>Confirm the prompt in World App.</li>
            </ol>
          </div>}
      </div>
    </div>;
};

# Testing

### Testing your mini app

Enter your app id in the text box below and scan the QR code generated with your phone's camera.
Your app id is in the developer portal in the format `app_xxxxxxxxxx`.

<QRCodeGenerator />

### Tips

1. You can use [Ngrok](https://ngrok.com/), [zrok](https://zrok.io/) or [tunnelmole](https://tunnelmole.com/) for local testing.
2. [Eruda](https://github.com/liriliri/eruda) is helpful for showing logs on mobile.
3. You can use the [L2 Faucet](https://www.l2faucet.com/world) to get testnet WLD on Sepolia.