Build an affiliate comparison page with Cursor

What you'll make

A responsive comparison page that puts 3–5 products side by side with a feature table, pros and cons for each, and your affiliate links. The kind of page that ranks well in search and helps people who are already deciding between options.

What you need

• Cursor installed
• Node.js installed (version 18 or later)
• 3–5 products in the same category that you're an affiliate for
• Real feature data for each product (don't invent specs)
• 45 minutes

Steps

1. Open Cursor, create a new project, and describe the page:

Build a single-page product comparison site using React and Vite with Tailwind CSS. The page compares [number] products in the [category] space.

Structure:
1. Hero — H1 title "[Category] comparison", one sentence about what this page helps with
2. Comparison table — rows are features, columns are products. First column is the feature name. Each cell shows the value for that product. Make the table horizontally scrollable on mobile.
3. Product cards below the table — one card per product with: product name, 3 pros, 2 cons, a "Visit site" button, and a one-line verdict
4. FAQ section — 4–5 common questions about choosing in this category, with short answers
5. Footer — affiliate disclosure text: "Some links on this page are affiliate links. If you sign up through them I may earn a commission at no extra cost to you."

Design: clean, minimal, lots of white space. Use a neutral palette — dark text on white, one accent colour for buttons. The table should have alternating row colours for readability. No animations.

Make it fully responsive: table scrolls horizontally on mobile, cards stack in one column.

2. Create a data file with your real product info:

Create a file called products.ts that exports an array of product objects. Each object has:
- name: string
- url: string (the affiliate link)
- features: Record<string, string> (feature name → value)
- pros: string[]
- cons: string[]
- verdict: string

I'll fill in my real data. For now, use 3 placeholder products with sample data so the layout works.

3. Replace the placeholder data with your real product info. Fill in every feature cell with accurate information — if you don't know a value, write "Unknown" rather than guessing. Inaccurate comparison tables get flagged by readers and erode trust.

4. Add a "recommended" badge to one product — the one you genuinely think is best for most people. Ask Cursor:

Add a "Recommended" badge to the product card where the name equals "[product name]". Style it as a small pill badge in the accent colour, positioned at the top-right of that card. Only one product should have this badge.

5. Build and deploy:

npm run build

Deploy the dist folder to Netlify (drag and drop) or Vercel. Share the URL in your content, social posts, and email newsletters.

Check your result

• The table displays all products and features correctly with no missing cells
• Every feature value is accurate — you verified it against the product's own website
• Each product card has real pros and cons (not generic ones that could apply to any product)
• The affiliate disclosure is visible before any links
• The page works on mobile (table scrolls, cards stack)
• Only one product has the "Recommended" badge

If you can't fill in a feature for a product, don't leave the cell blank — write "Not listed" or "Unknown". A blank cell looks like a mistake; an honest "Unknown" looks like you checked and couldn't find the info. Readers respect that more than a gap.