How to Build Web scraping API with V0

1CREATE TABLE api_keys (
2  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
3  owner_id uuid NOT NULL,
4  key_hash text UNIQUE NOT NULL,
5  key_prefix text NOT NULL,
6  name text NOT NULL,
7  is_active boolean DEFAULT true,
8  created_at timestamptz DEFAULT now()
9);
10
11CREATE TABLE scrape_jobs (
12  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
13  owner_id uuid NOT NULL,
14  target_url text NOT NULL,
15  selector_config jsonb NOT NULL DEFAULT '{}',
16  schedule_cron text,
17  status text DEFAULT 'pending'
18    CHECK (status IN ('pending','running','completed','failed')),
19  last_run_at timestamptz,
20  created_at timestamptz DEFAULT now()
21);
22
23CREATE TABLE scrape_results (
24  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
25  job_id uuid REFERENCES scrape_jobs(id) ON DELETE CASCADE,
26  data jsonb NOT NULL,
27  html_snapshot text,
28  status_code int,
29  duration_ms int,
30  scraped_at timestamptz DEFAULT now()
31);
32
33CREATE INDEX idx_results_job_id ON scrape_results(job_id);
34CREATE INDEX idx_results_scraped_at ON scrape_results(scraped_at DESC);
35
36-- RLS: users only see their own data
37ALTER TABLE scrape_jobs ENABLE ROW LEVEL SECURITY;
38CREATE POLICY "Users manage own jobs" ON scrape_jobs
39  FOR ALL USING (owner_id = auth.uid());
40
41ALTER TABLE scrape_results ENABLE ROW LEVEL SECURITY;
42CREATE POLICY "Users see own results" ON scrape_results
43  FOR SELECT USING (
44    job_id IN (SELECT id FROM scrape_jobs WHERE owner_id = auth.uid())
45  );

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import * as cheerio from 'cheerio'
4import crypto from 'crypto'
5
6export const maxDuration = 60
7
8const supabase = createClient(
9  process.env.NEXT_PUBLIC_SUPABASE_URL!,
10  process.env.SUPABASE_SERVICE_ROLE_KEY!
11)
12
13export async function POST(req: NextRequest) {
14  const apiKey = req.headers.get('x-api-key')
15  if (!apiKey) {
16    return NextResponse.json({ error: 'Missing API key' }, { status: 401 })
17  }
18
19  const keyHash = crypto.createHash('sha256').update(apiKey).digest('hex')
20  const { data: keyRecord } = await supabase
21    .from('api_keys')
22    .select('owner_id, is_active')
23    .eq('key_hash', keyHash)
24    .single()
25
26  if (!keyRecord?.is_active) {
27    return NextResponse.json({ error: 'Invalid API key' }, { status: 401 })
28  }
29
30  const { url, selectors } = await req.json()
31  const start = Date.now()
32
33  const res = await fetch(url, {
34    headers: { 'User-Agent': 'RapidScraper/1.0' },
35    signal: AbortSignal.timeout(15000),
36  })
37
38  const html = await res.text()
39  const $ = cheerio.load(html)
40  const data: Record<string, string | string[]> = {}
41
42  for (const [key, selector] of Object.entries(selectors as Record<string, string>)) {
43    const [sel, attr] = selector.split('@')
44    const elements = $(sel)
45    if (elements.length > 1) {
46      data[key] = elements.map((_, el) =>
47        attr ? $(el).attr(attr) ?? '' : $(el).text().trim()
48      ).get()
49    } else {
50      data[key] = attr
51        ? elements.attr(attr) ?? ''
52        : elements.text().trim()
53    }
54  }
55
56  await supabase.from('scrape_results').insert({
57    job_id: null,
58    data,
59    status_code: res.status,
60    duration_ms: Date.now() - start,
61  })
62
63  return NextResponse.json({ data, status_code: res.status, duration_ms: Date.now() - start })
64}

1'use server'
2
3import { createClient } from '@/lib/supabase/server'
4import crypto from 'crypto'
5
6export async function generateApiKey(name: string) {
7  const supabase = await createClient()
8  const user = (await supabase.auth.getUser()).data.user
9  if (!user) return { error: 'Unauthorized' }
10
11  const rawKey = `rsk_${crypto.randomBytes(32).toString('hex')}`
12  const keyHash = crypto.createHash('sha256').update(rawKey).digest('hex')
13  const keyPrefix = rawKey.slice(0, 8)
14
15  const { error } = await supabase.from('api_keys').insert({
16    owner_id: user.id,
17    key_hash: keyHash,
18    key_prefix: keyPrefix,
19    name,
20  })
21
22  if (error) return { error: error.message }
23
24  return { key: rawKey, prefix: keyPrefix }
25}
26
27export async function revokeApiKey(keyId: string) {
28  const supabase = await createClient()
29  await supabase
30    .from('api_keys')
31    .update({ is_active: false })
32    .eq('id', keyId)
33}

1// Paste this prompt into V0's AI chat:
2// Build a scraping job dashboard at app/dashboard/page.tsx with:
3// 1. Server Component fetching all scrape_jobs for the current user
4// 2. shadcn/ui Table with columns: Target URL (truncated), Status Badge (pending=outline, running=secondary, completed=default, failed=destructive), Last Run, Results Count, Actions
5// 3. Dialog for creating new jobs: Input for target URL, Textarea for JSON selector config with example placeholder ({"title": "h1", "price": ".price"}), optional Input for cron schedule
6// 4. Per-job detail page at app/dashboard/jobs/[id]/page.tsx showing: result history Table, latest extracted data in a pre/code block, re-run Button
7// 5. API Keys section with Table showing key prefix, name, status Badge, and Revoke Button with AlertDialog
8// 6. Generate API Key Button opening Dialog with Input for key name, showing the generated key once with copy-to-clipboard
9// 7. Summary Cards: total jobs, successful scrapes today, failed scrapes, active API keys

1// Paste this prompt into V0's AI chat:
2// Enhance the scraping API with:
3// 1. Result caching: before scraping, check scrape_results for a result with the same URL scraped within the last hour. If found, return the cached data with a 'cached: true' flag.
4// 2. ScrapingBee fallback: add a 'render_js' boolean parameter to the API. When true, call ScrapingBee's API (api.scrapingbee.com/api/v1?api_key=KEY&url=URL&render_js=true) instead of direct fetch. This handles JavaScript-rendered SPAs.
5// 3. Set SCRAPINGBEE_API_KEY in V0's Vars tab (server-only).
6// 4. Add a 'Test Scrape' Button on the job form that runs a single scrape and shows the result in a preview Card before saving the job.
7// 5. Error handling: catch ETIMEDOUT, ECONNREFUSED, and HTTP 4xx/5xx with descriptive error messages.
8// Update the scraping API route to support both modes.