Step 3: Fetching Data
Build a local server to fetch Open Graph data.
The Challenge
Your browser can’t just fetch any website’s HTML for you. There’s a security rule called CORS — browsers block web pages from making requests to other domains unless that domain explicitly allows it. Most websites don’t.
The fix: build a small server that runs on your computer. Your browser talks to the server, the server fetches the webpage, and it pulls out the Open Graph tags for you.
Build the Proxy Server
Create a small Node.js server that:
- Accepts a URL as a query parameter
- Fetches the HTML from that URL
- Parses the HTML to extract Open Graph meta tags (og:title, og:description, og:image)
- Returns the extracted data as JSON
- Runs on localhost:3000
Keep it simple — just one file, no framework needed. Use the built-in
Node.js http module and a lightweight HTML parser.Claude will create a server.js file (or similar) that acts as your proxy. This is a small backend — just a few dozen lines of code that do one job: fetch a page and pull out the OG tags.
Connect the Frontend
Update the frontend so that when the user submits a URL,
it sends a request to our local server at localhost:3000
instead of trying to fetch the URL directly.
Parse the JSON 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
Show a loading state while the request is in progress.Error Handling
Good tools fail gracefully. Ask Claude to handle the things that will go wrong:
Handle these error cases:
- Invalid URL (not a valid URL format) — show a message before even making a request
- Server can't reach the URL (network error, site is down, timeout)
- Page has no Open Graph tags — show a message explaining that, not just a blank card
- Server isn't running — show a helpful message instead of silently failing
Make each error message specific and helpful. The user should
understand what went wrong and what to try next.Run and Test
Start the server:
How do I start the server?Claude will tell you the command (usually node server.js). Then open your HTML file in the browser.
Try these URLs to test different cases:
- A popular site like
https://github.com— should show a full preview card - A URL without OG tags — should show a clear message
- An invalid URL like
not-a-url— should catch it before making a request - A URL that doesn’t exist — should show a network error message
All four cases should show something useful, never a blank screen or cryptic error.
Checkpoint
- Server starts and runs on localhost
- URL submission sends request to your server
- Data fetches and displays in the preview card
- Error cases show specific, helpful messages
- Loading state shows during fetch
What You Learned
- Client-server communication: Your browser (the client) sends a request to your server, which does the work and sends back the result. This is how most web apps work — the frontend handles the interface, the backend handles the data.
- APIs and JSON: Your server exposes an API — a URL that accepts input and returns structured data (JSON). You’ll use this pattern in almost every project you build.
- Parsing HTML: The server reads raw HTML from a webpage and extracts specific pieces of information (the OG meta tags). This is a common technique called scraping.
- CORS and proxies: Browsers restrict cross-origin requests for security. A proxy server is the standard workaround — your server can make requests that your browser can’t.
- Error handling: Real tools need to handle every failure case with clear feedback. The difference between a prototype and a usable tool is error handling.