Integrate Apify Instagram Profile Scraper to replace mock data

[Copilot]

Replaces mock Instagram profile data with live scraping via Apify's Instagram Profile Scraper Actor. Users can now enter any public Instagram username to analyze real profile metrics, engagement rates, and recent posts.

Implementation

• API Route (app/api/instagram/[username]/route.ts)

  • Server-side endpoint calls Apify Actor with APIFY_TOKEN from environment
  • Returns 404 for private/missing profiles, 403 for private accounts

• Data Transformation (lib/apify-transform.ts)

  • Maps Apify output schema to existing InstagramProfile interface
  • Calculates engagement metrics from post data
  • Extracts hashtags and generates engagement history

• Frontend (app/page.tsx)

  • Replaced fetchInstagramProfile() with fetch to /api/instagram/[username]
  • Added error state display

• Image Config (next.config.ts)

  • Added Instagram CDN patterns: **.fbcdn.net, scontent-*.cdninstagram.com

Setup

# .env.local
APIFY_TOKEN=your_apify_token_here

Get token from https://console.apify.com/account/integrations

Example

Before: Static mock data for "techinfluencer"
After: Live data for any public profile

Tested with NASA (96.9M followers) and Apify (sparse data) - both render correctly.

Original prompt

Integrate Apify's Instagram Profile Scraper to replace the mock data with real instagram profile data inside the webapp UI (demo app inside "social-demo" folder).

When a user enters an Instagram profile URL/username in the search and clicks Analyze Profile, use that query to call the Apify Instagram Profile Scraper (https://apify.com/apify/instagram-profile-scraper).

Scraped dataset should then be parsed and suitably transformed to be displayed instead of the mock data inside the webapp UI.

Start by analyzing the current webapp scaffolding codebase.

Custom agent used: apify-integration-expert
Expert agent for integrating Apify Actors into codebases. Handles Actor selection, workflow design, implementation across JavaScript/TypeScript and Python, testing, and production-ready deployment.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.