project linkpreview

LinkPreview

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

A quick web tool that previews Open Graph data. Your first web project.

What You'll Build

LinkPreview — a simple web tool that:

  • Takes a URL as input
  • Fetches and displays Open Graph metadata
  • Shows the title, description, and preview image
  • Helps you debug social sharing previews

Quick, practical, and immediately useful.

Why This Project

This project is intentionally small:

  1. Fast wins — You'll have a working tool in 15 minutes
  2. API basics — Learn how to fetch and display external data
  3. Deployment — Get something live on the internet

Perfect for your first web project or when you want a quick confidence boost.

Before You Start

Make sure you have:

  • Claude Code installed and working (Guide: The Setup)
  • Node.js installed (Claude can help with this)
  • A code editor (VS Code, Cursor, etc.)

The Steps

Work through these in order:

  1. Starting — Create the project
  2. Building the UI — Input and display components
  3. Fetching Data — Call the API, handle responses
  4. Deploying — Put it on the internet

Time Estimate

Each step takes just a few minutes. The whole project is designed as a quick win.

If You Get Stuck

  1. Describe what went wrong — "I pasted the URL but nothing shows"
  2. Share any errors — Copy the browser console errors
  3. Ask Claude for help — "What should I check?"

Let's Start

Ready? Open Terminal and navigate to your projects folder:

terminal
cd ~/Desktop

Exercises

  1. Write a one-sentence description of what LinkPreview should do, in your own words — this is the intent you'll hand to Claude in Step 1.
  2. Confirm your environment is ready: open Terminal and run cd ~/Desktop, then verify Claude Code launches with the claude command.
  3. List three URLs you'll test the finished tool against — one popular site with rich Open Graph tags, one plain page, and one you expect to fail.