Step 3: Fetching Data

Call an API to get Open Graph data.

The Challenge

Browsers can't directly fetch other websites due to CORS restrictions. We need a service that fetches the page and extracts the Open Graph data.

Add the Fetch Logic

When the user submits a URL, fetch Open Graph data using
a service like opengraph.io or similar.

If that doesn't work, we can use a simple proxy approach
or a serverless function.

Show loading while fetching, then display the results
in the preview card.

Handle the Response

Claude will set up the fetch logic. Once it's working:

Parse the response and display:
- og:title in the card title
- og:description in the card description
- og:image as the preview image
- The domain from the URL

Error Handling

Handle these error cases:
- Invalid URL (not a valid URL format)
- Fetch failed (network error or service down)
- No OG data (page doesn't have Open Graph tags)

Show helpful error messages for each.

Test It

Try some URLs:

• A popular website (should have OG data)
• A URL without OG tags
• An invalid URL

All cases should be handled gracefully.

Checkpoint

• URL submission works
• Data fetches and displays
• Error cases handled
• Loading state shows during fetch

What You Learned

• How to fetch external data
• Working with APIs
• Error handling patterns
• CORS and why proxies are sometimes needed

Exercises

1. Send the "Add the Fetch Logic" prompt, then paste in a popular URL and confirm the preview card fills with real title, description, and image data.
2. Deliberately test each error case — an invalid URL, a page with no OG tags, and a fake domain — and verify each shows a distinct, friendly message.
3. Watch the loading state during a slow fetch; if it flickers or never appears, ask Claude to ensure the loading state shows until the response (or error) arrives.