initialised repo
This commit is contained in:
516
app/(app)/dashboard/page.tsx
Normal file
516
app/(app)/dashboard/page.tsx
Normal file
@@ -0,0 +1,516 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useSearchParams, useRouter } from 'next/navigation'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
Search,
|
||||
Loader2,
|
||||
ExternalLink,
|
||||
RefreshCw,
|
||||
Users,
|
||||
Target,
|
||||
Zap,
|
||||
TrendingUp,
|
||||
Lightbulb,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
BarChart3,
|
||||
Sparkles
|
||||
} from 'lucide-react'
|
||||
import type { EnhancedProductAnalysis, Opportunity } from '@/lib/types'
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const productName = searchParams.get('product')
|
||||
|
||||
const [analysis, setAnalysis] = useState<EnhancedProductAnalysis | null>(null)
|
||||
const [opportunities, setOpportunities] = useState<Opportunity[]>([])
|
||||
const [loadingOpps, setLoadingOpps] = useState(false)
|
||||
const [stats, setStats] = useState<any>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem('productAnalysis')
|
||||
const storedStats = localStorage.getItem('analysisStats')
|
||||
if (stored) {
|
||||
setAnalysis(JSON.parse(stored))
|
||||
}
|
||||
if (storedStats) {
|
||||
setStats(JSON.parse(storedStats))
|
||||
}
|
||||
}, [])
|
||||
|
||||
async function findOpportunities() {
|
||||
if (!analysis) return
|
||||
|
||||
setLoadingOpps(true)
|
||||
try {
|
||||
const response = await fetch('/api/search', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ analysis }),
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Failed to search')
|
||||
|
||||
const data = await response.json()
|
||||
setOpportunities(data.data.opportunities)
|
||||
} catch (error) {
|
||||
console.error('Search error:', error)
|
||||
} finally {
|
||||
setLoadingOpps(false)
|
||||
}
|
||||
}
|
||||
|
||||
function getScoreColor(score: number) {
|
||||
if (score >= 0.8) return 'bg-green-500/20 text-green-400 border-green-500/30'
|
||||
if (score >= 0.6) return 'bg-amber-500/20 text-amber-400 border-amber-500/30'
|
||||
return 'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}
|
||||
|
||||
function getIntentIcon(intent: string) {
|
||||
switch (intent) {
|
||||
case 'frustrated': return <AlertCircle className="h-4 w-4" />
|
||||
case 'alternative': return <RefreshCw className="h-4 w-4" />
|
||||
case 'comparison': return <BarChart3 className="h-4 w-4" />
|
||||
case 'problem-solving': return <Lightbulb className="h-4 w-4" />
|
||||
default: return <Search className="h-4 w-4" />
|
||||
}
|
||||
}
|
||||
|
||||
// Separate keywords by type for prioritization
|
||||
const differentiatorKeywords = analysis?.keywords.filter(k =>
|
||||
k.type === 'differentiator' ||
|
||||
k.term.includes('vs') ||
|
||||
k.term.includes('alternative') ||
|
||||
k.term.includes('better')
|
||||
) || []
|
||||
|
||||
const otherKeywords = analysis?.keywords.filter(k =>
|
||||
!differentiatorKeywords.includes(k)
|
||||
) || []
|
||||
|
||||
// Sort: single words first, then short phrases
|
||||
const sortedKeywords = [...differentiatorKeywords, ...otherKeywords].sort((a, b) => {
|
||||
const aWords = a.term.split(/\s+/).length
|
||||
const bWords = b.term.split(/\s+/).length
|
||||
return aWords - bWords || a.term.length - b.term.length
|
||||
})
|
||||
|
||||
if (!analysis) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||
<p className="text-muted-foreground">No product analyzed yet.</p>
|
||||
<Button onClick={() => router.push('/onboarding')}>
|
||||
<Search className="mr-2 h-4 w-4" />
|
||||
Analyze Product
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
{/* Centered container */}
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{analysis.productName}</h1>
|
||||
<p className="text-lg text-muted-foreground mt-1">{analysis.tagline}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => router.push('/onboarding')}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
New Analysis
|
||||
</Button>
|
||||
<Button onClick={findOpportunities} disabled={loadingOpps}>
|
||||
{loadingOpps && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
<Search className="mr-2 h-4 w-4" />
|
||||
Find Opportunities
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-4">
|
||||
<Card className="p-4 text-center">
|
||||
<Zap className="mx-auto h-5 w-5 text-blue-400 mb-2" />
|
||||
<div className="text-2xl font-bold">{stats.features}</div>
|
||||
<div className="text-xs text-muted-foreground">Features</div>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<Target className="mx-auto h-5 w-5 text-purple-400 mb-2" />
|
||||
<div className="text-2xl font-bold">{stats.keywords}</div>
|
||||
<div className="text-xs text-muted-foreground">Keywords</div>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<Users className="mx-auto h-5 w-5 text-green-400 mb-2" />
|
||||
<div className="text-2xl font-bold">{stats.personas}</div>
|
||||
<div className="text-xs text-muted-foreground">Personas</div>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<Lightbulb className="mx-auto h-5 w-5 text-amber-400 mb-2" />
|
||||
<div className="text-2xl font-bold">{stats.useCases}</div>
|
||||
<div className="text-xs text-muted-foreground">Use Cases</div>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<TrendingUp className="mx-auto h-5 w-5 text-red-400 mb-2" />
|
||||
<div className="text-2xl font-bold">{stats.competitors}</div>
|
||||
<div className="text-xs text-muted-foreground">Competitors</div>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<Search className="mx-auto h-5 w-5 text-cyan-400 mb-2" />
|
||||
<div className="text-2xl font-bold">{stats.dorkQueries}</div>
|
||||
<div className="text-xs text-muted-foreground">Queries</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Tabs */}
|
||||
<Tabs defaultValue="overview" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-5">
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="features">Features</TabsTrigger>
|
||||
<TabsTrigger value="personas">Personas</TabsTrigger>
|
||||
<TabsTrigger value="keywords">Keywords</TabsTrigger>
|
||||
<TabsTrigger value="opportunities">
|
||||
Opportunities {opportunities.length > 0 && `(${opportunities.length})`}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Overview Tab */}
|
||||
<TabsContent value="overview" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Product Description</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground leading-relaxed">{analysis.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{/* Problems Solved */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||
Problems Solved
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{analysis.problemsSolved.slice(0, 5).map((problem, i) => (
|
||||
<div key={i} className="border-l-2 border-red-500/30 pl-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{problem.problem}</span>
|
||||
<Badge variant="outline" className={
|
||||
problem.severity === 'high' ? 'border-red-500/30 text-red-400' :
|
||||
problem.severity === 'medium' ? 'border-amber-500/30 text-amber-400' :
|
||||
'border-green-500/30 text-green-400'
|
||||
}>
|
||||
{problem.severity}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Feeling: {problem.emotionalImpact}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Competitors */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5 text-cyan-400" />
|
||||
Competitive Landscape
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{analysis.competitors.slice(0, 4).map((comp, i) => (
|
||||
<div key={i} className="border-l-2 border-cyan-500/30 pl-4">
|
||||
<div className="font-medium text-lg">{comp.name}</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
<span className="text-green-400">Your edge:</span> {comp.differentiator}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Their strength: {comp.theirStrength}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Features Tab */}
|
||||
<TabsContent value="features" className="space-y-4">
|
||||
{analysis.features.map((feature, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4 text-primary" />
|
||||
{feature.name}
|
||||
</CardTitle>
|
||||
<CardDescription>{feature.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">Benefits</h4>
|
||||
<ul className="space-y-1">
|
||||
{feature.benefits.map((b, j) => (
|
||||
<li key={j} className="text-sm flex items-start gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-400 mt-0.5 shrink-0" />
|
||||
{b}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">Use Cases</h4>
|
||||
<ul className="space-y-1">
|
||||
{feature.useCases.map((u, j) => (
|
||||
<li key={j} className="text-sm text-muted-foreground">
|
||||
• {u}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
|
||||
{/* Personas Tab */}
|
||||
<TabsContent value="personas" className="space-y-4">
|
||||
{analysis.personas.map((persona, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-primary" />
|
||||
{persona.name}
|
||||
</CardTitle>
|
||||
<CardDescription>{persona.role} • {persona.companySize}</CardDescription>
|
||||
</div>
|
||||
<Badge variant="outline">{persona.techSavvy} tech</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">Pain Points</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{persona.painPoints.map((p, j) => (
|
||||
<Badge key={j} variant="secondary" className="bg-red-500/10 text-red-400">
|
||||
{p}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">Goals</h4>
|
||||
<ul className="text-sm space-y-1">
|
||||
{persona.goals.map((g, j) => (
|
||||
<li key={j} className="text-muted-foreground">• {g}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">Search Behavior</h4>
|
||||
<div className="space-y-1">
|
||||
{persona.searchBehavior.map((s, j) => (
|
||||
<div key={j} className="text-sm font-mono bg-muted px-2 py-1 rounded">
|
||||
"{s}"
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
|
||||
{/* Keywords Tab */}
|
||||
<TabsContent value="keywords" className="space-y-6">
|
||||
{/* Differentiation Keywords First */}
|
||||
{differentiatorKeywords.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Target className="h-5 w-5 text-primary" />
|
||||
Differentiation Keywords
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Keywords that highlight your competitive advantage
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{differentiatorKeywords.map((kw, i) => (
|
||||
<Badge
|
||||
key={i}
|
||||
className="bg-primary/20 text-primary border-primary/30 text-sm px-3 py-1"
|
||||
>
|
||||
{kw.term}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* All Keywords */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>All Keywords ({sortedKeywords.length})</CardTitle>
|
||||
<CardDescription>
|
||||
Sorted by word count - single words first
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{sortedKeywords.map((kw, i) => (
|
||||
<Badge
|
||||
key={i}
|
||||
variant={kw.type === 'differentiator' ? 'default' : 'outline'}
|
||||
className={kw.type === 'differentiator' ? 'bg-primary/20 text-primary border-primary/30' : ''}
|
||||
>
|
||||
{kw.term}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Keywords by Type */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{['product', 'problem', 'solution', 'feature', 'competitor'].map(type => {
|
||||
const typeKeywords = analysis.keywords.filter(k => k.type === type)
|
||||
if (typeKeywords.length === 0) return null
|
||||
return (
|
||||
<Card key={type}>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm uppercase tracking-wide">{type}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{typeKeywords.slice(0, 20).map((kw, i) => (
|
||||
<Badge key={i} variant="secondary">
|
||||
{kw.term}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Opportunities Tab */}
|
||||
<TabsContent value="opportunities" className="space-y-4">
|
||||
{opportunities.length > 0 ? (
|
||||
<>
|
||||
{opportunities.map((opp) => (
|
||||
<Card key={opp.url} className="hover:border-muted-foreground/50 transition-colors">
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium line-clamp-2">{opp.title}</h3>
|
||||
</div>
|
||||
<Badge className={getScoreColor(opp.relevanceScore)}>
|
||||
{Math.round(opp.relevanceScore * 100)}%
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline">{opp.source}</Badge>
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
{getIntentIcon(opp.intent)}
|
||||
{opp.intent}
|
||||
</Badge>
|
||||
{opp.matchedPersona && (
|
||||
<Badge className="bg-blue-500/20 text-blue-400">
|
||||
{opp.matchedPersona}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground line-clamp-3">
|
||||
{opp.snippet}
|
||||
</p>
|
||||
|
||||
{opp.matchedKeywords.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{opp.matchedKeywords.map((k, i) => (
|
||||
<Badge key={i} className="bg-purple-500/20 text-purple-400 text-xs">
|
||||
{k}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-muted rounded-lg p-3">
|
||||
<p className="text-xs text-muted-foreground font-medium uppercase tracking-wide mb-1">
|
||||
Suggested Approach
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{opp.suggestedApproach}</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={opp.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center text-sm text-primary hover:underline"
|
||||
>
|
||||
View Post
|
||||
<ExternalLink className="ml-1 h-3 w-3" />
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<Card className="bg-muted/50">
|
||||
<CardContent className="py-12 text-center">
|
||||
<Search className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4" />
|
||||
<h3 className="text-lg font-medium mb-2">No opportunities yet</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Click "Find Opportunities" to search for potential customers
|
||||
</p>
|
||||
<Button onClick={findOpportunities} disabled={loadingOpps}>
|
||||
{loadingOpps && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
<Search className="mr-2 h-4 w-4" />
|
||||
Find Opportunities
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
22
app/(app)/layout.tsx
Normal file
22
app/(app)/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
'use client'
|
||||
|
||||
import { Sidebar } from '@/components/sidebar'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
|
||||
export default function AppLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const searchParams = useSearchParams()
|
||||
const productName = searchParams.get('product') || undefined
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-background">
|
||||
<Sidebar productName={productName} />
|
||||
<main className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
365
app/(app)/onboarding/page.tsx
Normal file
365
app/(app)/onboarding/page.tsx
Normal file
@@ -0,0 +1,365 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { ArrowRight, Globe, Loader2, Sparkles, AlertCircle, ArrowLeft } from 'lucide-react'
|
||||
import type { ProductAnalysis } from '@/lib/types'
|
||||
|
||||
const examples = [
|
||||
{ name: 'Notion', url: 'https://notion.so' },
|
||||
{ name: 'Stripe', url: 'https://stripe.com' },
|
||||
{ name: 'Figma', url: 'https://figma.com' },
|
||||
{ name: 'Linear', url: 'https://linear.app' },
|
||||
]
|
||||
|
||||
export default function OnboardingPage() {
|
||||
const router = useRouter()
|
||||
const [url, setUrl] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [progress, setProgress] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [showManualInput, setShowManualInput] = useState(false)
|
||||
|
||||
// Manual input fields
|
||||
const [manualProductName, setManualProductName] = useState('')
|
||||
const [manualDescription, setManualDescription] = useState('')
|
||||
const [manualFeatures, setManualFeatures] = useState('')
|
||||
|
||||
async function analyzeWebsite() {
|
||||
if (!url) return
|
||||
|
||||
setLoading(true)
|
||||
setError('')
|
||||
setProgress('Scraping website...')
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/analyze', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url }),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
if (data.needsManualInput) {
|
||||
setShowManualInput(true)
|
||||
setManualProductName(url.replace(/^https?:\/\//, '').replace(/\/$/, ''))
|
||||
throw new Error(data.error)
|
||||
}
|
||||
throw new Error(data.error || 'Failed to analyze')
|
||||
}
|
||||
|
||||
setProgress('Analyzing with AI...')
|
||||
|
||||
// Store in localStorage for dashboard
|
||||
localStorage.setItem('productAnalysis', JSON.stringify(data.data))
|
||||
localStorage.setItem('analysisStats', JSON.stringify(data.stats))
|
||||
|
||||
setProgress('Redirecting to dashboard...')
|
||||
|
||||
// Redirect to dashboard with product name in query
|
||||
const params = new URLSearchParams({ product: data.data.productName })
|
||||
router.push(`/dashboard?${params.toString()}`)
|
||||
} catch (err: any) {
|
||||
console.error('Analysis error:', err)
|
||||
setError(err.message || 'Failed to analyze website')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function analyzeManually() {
|
||||
if (!manualProductName || !manualDescription) return
|
||||
|
||||
setLoading(true)
|
||||
setError('')
|
||||
setProgress('Analyzing with AI...')
|
||||
|
||||
try {
|
||||
// Create a mock analysis from manual input
|
||||
const manualAnalysis: ProductAnalysis = {
|
||||
productName: manualProductName,
|
||||
tagline: manualDescription.split('.')[0],
|
||||
description: manualDescription,
|
||||
features: manualFeatures.split('\n').filter(f => f.trim()),
|
||||
problemsSolved: [],
|
||||
targetAudience: [],
|
||||
valuePropositions: [],
|
||||
keywords: manualProductName.toLowerCase().split(' '),
|
||||
scrapedAt: new Date().toISOString()
|
||||
}
|
||||
|
||||
// Send to API to enhance with AI
|
||||
const response = await fetch('/api/analyze-manual', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
productName: manualProductName,
|
||||
description: manualDescription,
|
||||
features: manualFeatures
|
||||
}),
|
||||
})
|
||||
|
||||
let finalAnalysis = manualAnalysis
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
finalAnalysis = data.data
|
||||
}
|
||||
|
||||
// Store in localStorage for dashboard
|
||||
localStorage.setItem('productAnalysis', JSON.stringify(finalAnalysis))
|
||||
localStorage.setItem('analysisStats', JSON.stringify({
|
||||
features: finalAnalysis.features.length,
|
||||
keywords: finalAnalysis.keywords.length,
|
||||
personas: finalAnalysis.personas.length,
|
||||
useCases: finalAnalysis.useCases.length,
|
||||
competitors: finalAnalysis.competitors.length,
|
||||
dorkQueries: finalAnalysis.dorkQueries.length
|
||||
}))
|
||||
|
||||
// Redirect to dashboard
|
||||
const params = new URLSearchParams({ product: finalAnalysis.productName })
|
||||
router.push(`/dashboard?${params.toString()}`)
|
||||
} catch (err: any) {
|
||||
console.error('Manual analysis error:', err)
|
||||
setError(err.message || 'Failed to analyze')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (showManualInput) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-4">
|
||||
<div className="w-full max-w-lg space-y-6">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="flex justify-center">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-500/20 text-amber-400">
|
||||
<AlertCircle className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Couldn't Reach Website</h1>
|
||||
<p className="text-muted-foreground">
|
||||
No problem! Tell us about your product and we'll analyze it manually.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Describe Your Product</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your product details and we'll extract the key information.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="productName">Product Name *</Label>
|
||||
<Input
|
||||
id="productName"
|
||||
placeholder="My Awesome Product"
|
||||
value={manualProductName}
|
||||
onChange={(e) => setManualProductName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="What does your product do? Who is it for? What problem does it solve?"
|
||||
value={manualDescription}
|
||||
onChange={(e) => setManualDescription(e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="features">Key Features (one per line)</Label>
|
||||
<Textarea
|
||||
id="features"
|
||||
placeholder="- Feature 1 - Feature 2 - Feature 3"
|
||||
value={manualFeatures}
|
||||
onChange={(e) => setManualFeatures(e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="space-y-3 py-4">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
{progress}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-4/5" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowManualInput(false)
|
||||
setError('')
|
||||
}}
|
||||
disabled={loading}
|
||||
className="flex-1"
|
||||
>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
onClick={analyzeManually}
|
||||
disabled={!manualProductName || !manualDescription || loading}
|
||||
className="flex-1 gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Analyzing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Analyze
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-4">
|
||||
<div className="w-full max-w-lg space-y-6">
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-2">
|
||||
<div className="flex justify-center">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground">
|
||||
<Sparkles className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Welcome to AutoDork</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Enter your website URL and we'll analyze your product to find opportunities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Input Card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Analyze Your Product</CardTitle>
|
||||
<CardDescription>
|
||||
We'll scrape your site and use AI to extract key information.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="url">Website URL</Label>
|
||||
<div className="relative">
|
||||
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="url"
|
||||
placeholder="https://yourproduct.com"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && !loading && analyzeWebsite()}
|
||||
className="pl-10"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="space-y-3 py-4">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
{progress}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-4/5" />
|
||||
<Skeleton className="h-4 w-3/5" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={analyzeWebsite}
|
||||
disabled={!url || loading}
|
||||
className="w-full gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Analyzing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Analyze Website
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowManualInput(true)}
|
||||
className="w-full text-muted-foreground"
|
||||
>
|
||||
Or enter details manually
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Examples */}
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-muted-foreground mb-3">Or try with an example:</p>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{examples.map((example) => (
|
||||
<Button
|
||||
key={example.url}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setUrl(example.url)}
|
||||
disabled={loading}
|
||||
>
|
||||
{example.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
423
app/(app)/opportunities/page.tsx
Normal file
423
app/(app)/opportunities/page.tsx
Normal file
@@ -0,0 +1,423 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from '@/components/ui/table'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Search,
|
||||
Loader2,
|
||||
ExternalLink,
|
||||
MessageSquare,
|
||||
Twitter,
|
||||
Users,
|
||||
HelpCircle,
|
||||
Filter,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Target,
|
||||
Zap,
|
||||
AlertCircle,
|
||||
BarChart3,
|
||||
CheckCircle2,
|
||||
Eye,
|
||||
Copy
|
||||
} from 'lucide-react'
|
||||
import type {
|
||||
EnhancedProductAnalysis,
|
||||
Opportunity,
|
||||
PlatformConfig,
|
||||
SearchStrategy
|
||||
} from '@/lib/types'
|
||||
|
||||
const STRATEGY_INFO: Record<SearchStrategy, { name: string; description: string }> = {
|
||||
'direct-keywords': { name: 'Direct Keywords', description: 'People looking for your product category' },
|
||||
'problem-pain': { name: 'Problem/Pain', description: 'People experiencing problems you solve' },
|
||||
'competitor-alternative': { name: 'Competitor Alternatives', description: 'People switching from competitors' },
|
||||
'how-to': { name: 'How-To/Tutorials', description: 'People learning about solutions' },
|
||||
'emotional-frustrated': { name: 'Frustration Posts', description: 'Emotional posts about pain points' },
|
||||
'comparison': { name: 'Comparisons', description: '"X vs Y" comparison posts' },
|
||||
'recommendation': { name: 'Recommendations', description: '"What do you use" requests' }
|
||||
}
|
||||
|
||||
export default function OpportunitiesPage() {
|
||||
const router = useRouter()
|
||||
const [analysis, setAnalysis] = useState<EnhancedProductAnalysis | null>(null)
|
||||
const [platforms, setPlatforms] = useState<PlatformConfig[]>([])
|
||||
const [strategies, setStrategies] = useState<SearchStrategy[]>([
|
||||
'direct-keywords',
|
||||
'problem-pain',
|
||||
'competitor-alternative'
|
||||
])
|
||||
const [intensity, setIntensity] = useState<'broad' | 'balanced' | 'targeted'>('balanced')
|
||||
const [isSearching, setIsSearching] = useState(false)
|
||||
const [opportunities, setOpportunities] = useState<Opportunity[]>([])
|
||||
const [generatedQueries, setGeneratedQueries] = useState<any[]>([])
|
||||
const [showQueries, setShowQueries] = useState(false)
|
||||
const [selectedOpportunity, setSelectedOpportunity] = useState<Opportunity | null>(null)
|
||||
const [replyText, setReplyText] = useState('')
|
||||
const [stats, setStats] = useState<any>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem('productAnalysis')
|
||||
if (stored) {
|
||||
setAnalysis(JSON.parse(stored))
|
||||
} else {
|
||||
router.push('/onboarding')
|
||||
}
|
||||
|
||||
fetch('/api/opportunities')
|
||||
.then(r => r.json())
|
||||
.then(data => setPlatforms(data.platforms))
|
||||
}, [router])
|
||||
|
||||
const togglePlatform = (platformId: string) => {
|
||||
setPlatforms(prev => prev.map(p =>
|
||||
p.id === platformId ? { ...p, enabled: !p.enabled } : p
|
||||
))
|
||||
}
|
||||
|
||||
const toggleStrategy = (strategy: SearchStrategy) => {
|
||||
setStrategies(prev =>
|
||||
prev.includes(strategy)
|
||||
? prev.filter(s => s !== strategy)
|
||||
: [...prev, strategy]
|
||||
)
|
||||
}
|
||||
|
||||
const executeSearch = async () => {
|
||||
if (!analysis) return
|
||||
|
||||
setIsSearching(true)
|
||||
setOpportunities([])
|
||||
|
||||
try {
|
||||
const config = {
|
||||
platforms,
|
||||
strategies,
|
||||
intensity,
|
||||
maxResults: intensity === 'broad' ? 80 : intensity === 'balanced' ? 50 : 30
|
||||
}
|
||||
|
||||
const response = await fetch('/api/opportunities', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ analysis, config })
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setOpportunities(data.data.opportunities)
|
||||
setGeneratedQueries(data.data.queries)
|
||||
setStats(data.data.stats)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Search error:', error)
|
||||
} finally {
|
||||
setIsSearching(false)
|
||||
}
|
||||
}
|
||||
|
||||
const generateReply = (opp: Opportunity) => {
|
||||
const template = opp.softPitch
|
||||
? `Hey, I saw your post about ${opp.matchedProblems[0] || 'your challenge'}. We faced something similar and ended up building ${analysis?.productName} specifically for this. Happy to share what worked for us.`
|
||||
: `Hi! I noticed you're looking for solutions to ${opp.matchedProblems[0]}. I work on ${analysis?.productName} that helps teams with this - specifically ${opp.matchedKeywords.slice(0, 2).join(' and ')}. Would love to show you how it works.`
|
||||
setReplyText(template)
|
||||
}
|
||||
|
||||
const getIntentIcon = (intent: string) => {
|
||||
switch (intent) {
|
||||
case 'frustrated': return <AlertCircle className="h-4 w-4 text-red-400" />
|
||||
case 'comparing': return <BarChart3 className="h-4 w-4 text-amber-400" />
|
||||
case 'learning': return <Users className="h-4 w-4 text-blue-400" />
|
||||
default: return <Target className="h-4 w-4 text-muted-foreground" />
|
||||
}
|
||||
}
|
||||
|
||||
if (!analysis) return null
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Sidebar */}
|
||||
<div className="w-80 border-r border-border bg-card flex flex-col">
|
||||
<div className="p-4 border-b border-border">
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
<Target className="h-5 w-5" />
|
||||
Search Configuration
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1 p-4 space-y-6">
|
||||
{/* Platforms */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium uppercase text-muted-foreground">Platforms</Label>
|
||||
<div className="space-y-2">
|
||||
{platforms.map(platform => (
|
||||
<div key={platform.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={platform.id}
|
||||
checked={platform.enabled}
|
||||
onCheckedChange={() => togglePlatform(platform.id)}
|
||||
/>
|
||||
<Label htmlFor={platform.id} className="cursor-pointer flex-1">{platform.name}</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Strategies */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium uppercase text-muted-foreground">Strategies</Label>
|
||||
<div className="space-y-2">
|
||||
{(Object.keys(STRATEGY_INFO) as SearchStrategy[]).map(strategy => (
|
||||
<div key={strategy} className="flex items-start space-x-2">
|
||||
<Checkbox
|
||||
id={strategy}
|
||||
checked={strategies.includes(strategy)}
|
||||
onCheckedChange={() => toggleStrategy(strategy)}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<Label htmlFor={strategy} className="cursor-pointer">
|
||||
{STRATEGY_INFO[strategy].name}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">{STRATEGY_INFO[strategy].description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Intensity */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium uppercase text-muted-foreground">Intensity</Label>
|
||||
<Slider
|
||||
value={[intensity === 'broad' ? 0 : intensity === 'balanced' ? 50 : 100]}
|
||||
onValueChange={([v]) => setIntensity(v < 33 ? 'broad' : v < 66 ? 'balanced' : 'targeted')}
|
||||
max={100}
|
||||
step={50}
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground">
|
||||
<span>Broad</span>
|
||||
<span>Targeted</span>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<div className="p-4 border-t border-border">
|
||||
<Button
|
||||
onClick={executeSearch}
|
||||
disabled={isSearching || platforms.filter(p => p.enabled).length === 0}
|
||||
className="w-full"
|
||||
>
|
||||
{isSearching ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Searching...</> : <><Search className="mr-2 h-4 w-4" /> Find Opportunities</>}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Opportunity Finder</h1>
|
||||
<p className="text-muted-foreground">Discover potential customers for {analysis.productName}</p>
|
||||
</div>
|
||||
{stats && (
|
||||
<div className="flex gap-4 text-sm">
|
||||
<div className="text-center">
|
||||
<div className="font-semibold">{stats.opportunitiesFound}</div>
|
||||
<div className="text-muted-foreground">Found</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-semibold text-green-400">{stats.highRelevance}</div>
|
||||
<div className="text-muted-foreground">High Quality</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Generated Queries */}
|
||||
{generatedQueries.length > 0 && (
|
||||
<Collapsible open={showQueries} onOpenChange={setShowQueries}>
|
||||
<Card>
|
||||
<CollapsibleTrigger asChild>
|
||||
<CardHeader className="cursor-pointer">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm">Generated Queries ({generatedQueries.length})</CardTitle>
|
||||
{showQueries ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<div className="space-y-1 max-h-48 overflow-auto text-xs font-mono">
|
||||
{generatedQueries.slice(0, 20).map((q, i) => (
|
||||
<div key={i} className="bg-muted px-2 py-1 rounded">{q.query}</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
)}
|
||||
|
||||
{/* Results Table */}
|
||||
{opportunities.length > 0 ? (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Platform</TableHead>
|
||||
<TableHead>Intent</TableHead>
|
||||
<TableHead>Score</TableHead>
|
||||
<TableHead className="w-1/2">Post</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{opportunities.slice(0, 50).map((opp) => (
|
||||
<TableRow key={opp.id}>
|
||||
<TableCell><Badge variant="outline">{opp.platform}</Badge></TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
{getIntentIcon(opp.intent)}
|
||||
<span className="capitalize text-sm">{opp.intent}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={opp.relevanceScore >= 0.8 ? 'bg-green-500/20 text-green-400' : opp.relevanceScore >= 0.6 ? 'bg-amber-500/20 text-amber-400' : 'bg-red-500/20 text-red-400'}>
|
||||
{Math.round(opp.relevanceScore * 100)}%
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<p className="font-medium line-clamp-1">{opp.title}</p>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">{opp.snippet}</p>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1">
|
||||
<Button variant="ghost" size="sm" onClick={() => setSelectedOpportunity(opp)}>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => window.open(opp.url, '_blank')}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
) : isSearching ? (
|
||||
<Card className="p-12 text-center">
|
||||
<Loader2 className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4 animate-spin" />
|
||||
<h3 className="text-lg font-medium">Searching...</h3>
|
||||
<p className="text-muted-foreground">Scanning platforms for opportunities</p>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="p-12 text-center">
|
||||
<Search className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4" />
|
||||
<h3 className="text-lg font-medium">Ready to Search</h3>
|
||||
<p className="text-muted-foreground">Select platforms and strategies, then click Find Opportunities</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detail Dialog */}
|
||||
<Dialog open={!!selectedOpportunity} onOpenChange={() => setSelectedOpportunity(null)}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
{selectedOpportunity && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge className={selectedOpportunity.relevanceScore >= 0.8 ? 'bg-green-500/20 text-green-400' : selectedOpportunity.relevanceScore >= 0.6 ? 'bg-amber-500/20 text-amber-400' : 'bg-red-500/20 text-red-400'}>
|
||||
{Math.round(selectedOpportunity.relevanceScore * 100)}% Match
|
||||
</Badge>
|
||||
<Badge variant="outline">{selectedOpportunity.platform}</Badge>
|
||||
<Badge variant="secondary" className="capitalize">{selectedOpportunity.intent}</Badge>
|
||||
</div>
|
||||
<DialogTitle className="text-lg pt-2">{selectedOpportunity.title}</DialogTitle>
|
||||
<DialogDescription>{selectedOpportunity.snippet}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{selectedOpportunity.matchedKeywords.length > 0 && (
|
||||
<div>
|
||||
<Label className="text-sm text-muted-foreground">Matched Keywords</Label>
|
||||
<div className="flex flex-wrap gap-2 mt-1">
|
||||
{selectedOpportunity.matchedKeywords.map((kw, i) => (
|
||||
<Badge key={i} variant="secondary">{kw}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-muted p-4 rounded-lg">
|
||||
<Label className="text-sm text-muted-foreground">Suggested Approach</Label>
|
||||
<p className="text-sm mt-1">{selectedOpportunity.suggestedApproach}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Generated Reply</Label>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => generateReply(selectedOpportunity)}>
|
||||
<Zap className="h-3 w-3 mr-1" /> Generate
|
||||
</Button>
|
||||
{replyText && (
|
||||
<Button variant="ghost" size="sm" onClick={() => navigator.clipboard.writeText(replyText)}>
|
||||
<Copy className="h-3 w-3 mr-1" /> Copy
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Textarea value={replyText} onChange={(e) => setReplyText(e.target.value)} placeholder="Click Generate to create a reply..." rows={4} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => window.open(selectedOpportunity.url, '_blank')}>
|
||||
<ExternalLink className="h-4 w-4 mr-2" /> View Post
|
||||
</Button>
|
||||
<Button onClick={() => setSelectedOpportunity(null)}>
|
||||
<CheckCircle2 className="h-4 w-4 mr-2" /> Mark as Viewed
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
59
app/api/analyze-manual/route.ts
Normal file
59
app/api/analyze-manual/route.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { z } from 'zod'
|
||||
import { analyzeFromText } from '@/lib/scraper'
|
||||
import { performDeepAnalysis } from '@/lib/analysis-pipeline'
|
||||
|
||||
const bodySchema = z.object({
|
||||
productName: z.string().min(1),
|
||||
description: z.string().min(1),
|
||||
features: z.string()
|
||||
})
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json()
|
||||
const { productName, description, features } = bodySchema.parse(body)
|
||||
|
||||
if (!process.env.OPENAI_API_KEY) {
|
||||
return NextResponse.json(
|
||||
{ error: 'OpenAI API key not configured' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
console.log('📝 Creating content from manual input...')
|
||||
const scrapedContent = await analyzeFromText(productName, description, features)
|
||||
|
||||
console.log('🤖 Starting enhanced analysis...')
|
||||
const analysis = await performDeepAnalysis(scrapedContent)
|
||||
console.log(` ✓ Analysis complete: ${analysis.features.length} features, ${analysis.keywords.length} keywords`)
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
data: analysis,
|
||||
stats: {
|
||||
features: analysis.features.length,
|
||||
keywords: analysis.keywords.length,
|
||||
personas: analysis.personas.length,
|
||||
useCases: analysis.useCases.length,
|
||||
competitors: analysis.competitors.length,
|
||||
dorkQueries: analysis.dorkQueries.length
|
||||
}
|
||||
})
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('❌ Manual analysis error:', error)
|
||||
|
||||
if (error.name === 'ZodError') {
|
||||
return NextResponse.json(
|
||||
{ error: 'Please provide product name and description' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json(
|
||||
{ error: error.message || 'Failed to analyze' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
69
app/api/analyze/route.ts
Normal file
69
app/api/analyze/route.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { z } from 'zod'
|
||||
import { scrapeWebsite, ScrapingError } from '@/lib/scraper'
|
||||
import { performDeepAnalysis } from '@/lib/analysis-pipeline'
|
||||
|
||||
const bodySchema = z.object({
|
||||
url: z.string().min(1)
|
||||
})
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json()
|
||||
const { url } = bodySchema.parse(body)
|
||||
|
||||
if (!process.env.OPENAI_API_KEY) {
|
||||
return NextResponse.json(
|
||||
{ error: 'OpenAI API key not configured' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
console.log(`🌐 Scraping: ${url}`)
|
||||
const scrapedContent = await scrapeWebsite(url)
|
||||
console.log(` ✓ Scraped ${scrapedContent.headings.length} headings, ${scrapedContent.paragraphs.length} paragraphs`)
|
||||
|
||||
console.log('🤖 Starting enhanced analysis...')
|
||||
const analysis = await performDeepAnalysis(scrapedContent)
|
||||
console.log(` ✓ Analysis complete: ${analysis.features.length} features, ${analysis.keywords.length} keywords, ${analysis.dorkQueries.length} queries`)
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
data: analysis,
|
||||
stats: {
|
||||
features: analysis.features.length,
|
||||
keywords: analysis.keywords.length,
|
||||
personas: analysis.personas.length,
|
||||
useCases: analysis.useCases.length,
|
||||
competitors: analysis.competitors.length,
|
||||
dorkQueries: analysis.dorkQueries.length
|
||||
}
|
||||
})
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('❌ Analysis error:', error)
|
||||
|
||||
if (error instanceof ScrapingError) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: error.message,
|
||||
code: error.code,
|
||||
needsManualInput: true
|
||||
},
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
if (error.name === 'ZodError') {
|
||||
return NextResponse.json(
|
||||
{ error: 'Invalid URL provided' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json(
|
||||
{ error: error.message || 'Failed to analyze website' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
139
app/api/opportunities/route.ts
Normal file
139
app/api/opportunities/route.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { z } from 'zod'
|
||||
import { generateSearchQueries, getDefaultPlatforms } from '@/lib/query-generator'
|
||||
import { executeSearches, scoreOpportunities } from '@/lib/search-executor'
|
||||
import type { EnhancedProductAnalysis, SearchConfig, PlatformConfig } from '@/lib/types'
|
||||
|
||||
const searchSchema = z.object({
|
||||
analysis: z.object({
|
||||
productName: z.string(),
|
||||
tagline: z.string(),
|
||||
description: z.string(),
|
||||
features: z.array(z.object({
|
||||
name: z.string(),
|
||||
description: z.string(),
|
||||
benefits: z.array(z.string()),
|
||||
useCases: z.array(z.string())
|
||||
})),
|
||||
problemsSolved: z.array(z.object({
|
||||
problem: z.string(),
|
||||
severity: z.enum(['high', 'medium', 'low']),
|
||||
currentWorkarounds: z.array(z.string()),
|
||||
emotionalImpact: z.string(),
|
||||
searchTerms: z.array(z.string())
|
||||
})),
|
||||
keywords: z.array(z.object({
|
||||
term: z.string(),
|
||||
type: z.string(),
|
||||
searchVolume: z.string(),
|
||||
intent: z.string(),
|
||||
funnel: z.string(),
|
||||
emotionalIntensity: z.string()
|
||||
})),
|
||||
competitors: z.array(z.object({
|
||||
name: z.string(),
|
||||
differentiator: z.string(),
|
||||
theirStrength: z.string(),
|
||||
switchTrigger: z.string(),
|
||||
theirWeakness: z.string()
|
||||
}))
|
||||
}),
|
||||
config: z.object({
|
||||
platforms: z.array(z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
icon: z.string(),
|
||||
enabled: z.boolean(),
|
||||
searchTemplate: z.string(),
|
||||
rateLimit: z.number()
|
||||
})),
|
||||
strategies: z.array(z.string()),
|
||||
intensity: z.enum(['broad', 'balanced', 'targeted']),
|
||||
maxResults: z.number().default(50)
|
||||
})
|
||||
})
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json()
|
||||
const { analysis, config } = searchSchema.parse(body)
|
||||
|
||||
console.log('🔍 Starting opportunity search...')
|
||||
console.log(` Product: ${analysis.productName}`)
|
||||
console.log(` Platforms: ${config.platforms.filter(p => p.enabled).map(p => p.name).join(', ')}`)
|
||||
console.log(` Strategies: ${config.strategies.join(', ')}`)
|
||||
|
||||
// Generate queries
|
||||
console.log(' Generating search queries...')
|
||||
const queries = generateSearchQueries(analysis as EnhancedProductAnalysis, config as SearchConfig)
|
||||
console.log(` ✓ Generated ${queries.length} queries`)
|
||||
|
||||
// Execute searches
|
||||
console.log(' Executing searches...')
|
||||
const searchResults = await executeSearches(queries)
|
||||
console.log(` ✓ Found ${searchResults.length} raw results`)
|
||||
|
||||
// Score and rank
|
||||
console.log(' Scoring opportunities...')
|
||||
const opportunities = scoreOpportunities(searchResults, analysis as EnhancedProductAnalysis)
|
||||
console.log(` ✓ Scored ${opportunities.length} opportunities`)
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
data: {
|
||||
opportunities: opportunities.slice(0, 50),
|
||||
stats: {
|
||||
queriesGenerated: queries.length,
|
||||
rawResults: searchResults.length,
|
||||
opportunitiesFound: opportunities.length,
|
||||
highRelevance: opportunities.filter(o => o.relevanceScore >= 0.7).length,
|
||||
averageScore: opportunities.length > 0
|
||||
? opportunities.reduce((a, o) => a + o.relevanceScore, 0) / opportunities.length
|
||||
: 0
|
||||
},
|
||||
queries: queries.map(q => ({
|
||||
query: q.query,
|
||||
platform: q.platform,
|
||||
strategy: q.strategy,
|
||||
priority: q.priority
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('❌ Opportunity search error:', error)
|
||||
|
||||
if (error.name === 'ZodError') {
|
||||
return NextResponse.json(
|
||||
{ error: 'Invalid request format', details: error.errors },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json(
|
||||
{ error: error.message || 'Failed to search for opportunities' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Get default configuration
|
||||
export async function GET() {
|
||||
const defaultPlatforms = getDefaultPlatforms()
|
||||
|
||||
return NextResponse.json({
|
||||
platforms: Object.entries(defaultPlatforms).map(([id, config]) => ({
|
||||
id,
|
||||
...config
|
||||
})),
|
||||
strategies: [
|
||||
{ id: 'direct-keywords', name: 'Direct Keywords', description: 'Search for people looking for your product category' },
|
||||
{ id: 'problem-pain', name: 'Problem/Pain', description: 'Find people experiencing problems you solve' },
|
||||
{ id: 'competitor-alternative', name: 'Competitor Alternatives', description: 'People looking to switch from competitors' },
|
||||
{ id: 'how-to', name: 'How-To/Tutorials', description: 'People learning about solutions' },
|
||||
{ id: 'emotional-frustrated', name: 'Frustration Posts', description: 'Emotional posts about pain points' },
|
||||
{ id: 'comparison', name: 'Comparisons', description: '"X vs Y" comparison posts' },
|
||||
{ id: 'recommendation', name: 'Recommendations', description: '"What do you use" recommendation requests' }
|
||||
]
|
||||
})
|
||||
}
|
||||
245
app/api/search/route.ts
Normal file
245
app/api/search/route.ts
Normal file
@@ -0,0 +1,245 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { z } from 'zod'
|
||||
import type { EnhancedProductAnalysis, Opportunity, DorkQuery } from '@/lib/types'
|
||||
|
||||
// Search result from any source
|
||||
interface SearchResult {
|
||||
title: string
|
||||
url: string
|
||||
snippet: string
|
||||
source: string
|
||||
}
|
||||
|
||||
const bodySchema = z.object({
|
||||
analysis: z.object({
|
||||
productName: z.string(),
|
||||
dorkQueries: z.array(z.object({
|
||||
query: z.string(),
|
||||
platform: z.string(),
|
||||
intent: z.string(),
|
||||
priority: z.string()
|
||||
})),
|
||||
keywords: z.array(z.object({
|
||||
term: z.string()
|
||||
})),
|
||||
personas: z.array(z.object({
|
||||
name: z.string(),
|
||||
searchBehavior: z.array(z.string())
|
||||
})),
|
||||
problemsSolved: z.array(z.object({
|
||||
problem: z.string(),
|
||||
searchTerms: z.array(z.string())
|
||||
}))
|
||||
})
|
||||
})
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json()
|
||||
const { analysis } = bodySchema.parse(body)
|
||||
|
||||
console.log(`🔍 Finding opportunities for: ${analysis.productName}`)
|
||||
|
||||
// Sort queries by priority
|
||||
const sortedQueries = analysis.dorkQueries
|
||||
.sort((a, b) => {
|
||||
const priorityOrder = { high: 0, medium: 1, low: 2 }
|
||||
return priorityOrder[a.priority as keyof typeof priorityOrder] - priorityOrder[b.priority as keyof typeof priorityOrder]
|
||||
})
|
||||
.slice(0, 15) // Limit to top 15 queries
|
||||
|
||||
const allResults: SearchResult[] = []
|
||||
|
||||
// Execute searches
|
||||
for (const query of sortedQueries) {
|
||||
try {
|
||||
console.log(` Searching: ${query.query.substring(0, 60)}...`)
|
||||
const results = await searchGoogle(query.query, 5)
|
||||
allResults.push(...results)
|
||||
|
||||
// Small delay to avoid rate limiting
|
||||
await new Promise(r => setTimeout(r, 500))
|
||||
} catch (e) {
|
||||
console.error(` Search failed for query: ${query.query.substring(0, 40)}`)
|
||||
}
|
||||
}
|
||||
|
||||
console.log(` Found ${allResults.length} raw results`)
|
||||
|
||||
// Analyze and score opportunities
|
||||
const opportunities = await analyzeOpportunities(allResults, analysis as EnhancedProductAnalysis)
|
||||
console.log(` ✓ Analyzed ${opportunities.length} opportunities`)
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
data: {
|
||||
totalFound: opportunities.length,
|
||||
opportunities: opportunities.slice(0, 20),
|
||||
searchStats: {
|
||||
queriesUsed: sortedQueries.length,
|
||||
platformsSearched: [...new Set(sortedQueries.map(q => q.platform))],
|
||||
averageRelevance: opportunities.reduce((a, o) => a + o.relevanceScore, 0) / opportunities.length || 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('❌ Search error:', error)
|
||||
|
||||
return NextResponse.json(
|
||||
{ error: error.message || 'Failed to find opportunities' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
async function searchGoogle(query: string, num: number): Promise<SearchResult[]> {
|
||||
// Try Serper first
|
||||
if (process.env.SERPER_API_KEY) {
|
||||
try {
|
||||
return await searchSerper(query, num)
|
||||
} catch (e) {
|
||||
console.error('Serper failed, falling back to direct')
|
||||
}
|
||||
}
|
||||
return searchDirect(query, num)
|
||||
}
|
||||
|
||||
async function searchSerper(query: string, num: number): Promise<SearchResult[]> {
|
||||
const response = await fetch('https://google.serper.dev/search', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-API-KEY': process.env.SERPER_API_KEY!,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ q: query, num })
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Serper API error')
|
||||
|
||||
const data = await response.json()
|
||||
return (data.organic || []).map((r: any) => ({
|
||||
title: r.title,
|
||||
url: r.link,
|
||||
snippet: r.snippet,
|
||||
source: getSource(r.link)
|
||||
}))
|
||||
}
|
||||
|
||||
async function searchDirect(query: string, num: number): Promise<SearchResult[]> {
|
||||
const encodedQuery = encodeURIComponent(query)
|
||||
const url = `https://www.google.com/search?q=${encodedQuery}&num=${num}`
|
||||
|
||||
const response = await fetch(url, {
|
||||
headers: { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' }
|
||||
})
|
||||
|
||||
const html = await response.text()
|
||||
const results: SearchResult[] = []
|
||||
|
||||
// Simple regex parsing
|
||||
const resultBlocks = html.match(/<div class="g"[^>]*>([\s\S]*?)<\/div>\s*<\/div>/g) || []
|
||||
|
||||
for (const block of resultBlocks.slice(0, num)) {
|
||||
const titleMatch = block.match(/<h3[^>]*>(.*?)<\/h3>/)
|
||||
const linkMatch = block.match(/<a href="([^"]+)"/)
|
||||
const snippetMatch = block.match(/<div class="VwiC3b[^"]*"[^>]*>(.*?)<\/div>/)
|
||||
|
||||
if (titleMatch && linkMatch) {
|
||||
results.push({
|
||||
title: titleMatch[1].replace(/<[^>]+>/g, ''),
|
||||
url: linkMatch[1],
|
||||
snippet: snippetMatch ? snippetMatch[1].replace(/<[^>]+>/g, '') : '',
|
||||
source: getSource(linkMatch[1])
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
|
||||
function getSource(url: string): string {
|
||||
if (url.includes('reddit.com')) return 'Reddit'
|
||||
if (url.includes('news.ycombinator.com')) return 'Hacker News'
|
||||
if (url.includes('indiehackers.com')) return 'Indie Hackers'
|
||||
if (url.includes('quora.com')) return 'Quora'
|
||||
if (url.includes('twitter.com') || url.includes('x.com')) return 'Twitter/X'
|
||||
if (url.includes('stackexchange.com') || url.includes('stackoverflow.com')) return 'Stack Exchange'
|
||||
return 'Other'
|
||||
}
|
||||
|
||||
async function analyzeOpportunities(
|
||||
results: SearchResult[],
|
||||
analysis: EnhancedProductAnalysis
|
||||
): Promise<Opportunity[]> {
|
||||
const opportunities: Opportunity[] = []
|
||||
const seen = new Set<string>()
|
||||
|
||||
for (const result of results) {
|
||||
if (seen.has(result.url)) continue
|
||||
seen.add(result.url)
|
||||
|
||||
// Calculate relevance score
|
||||
const content = (result.title + ' ' + result.snippet).toLowerCase()
|
||||
|
||||
// Match keywords
|
||||
const matchedKeywords = analysis.keywords
|
||||
.filter(k => content.includes(k.term.toLowerCase()))
|
||||
.map(k => k.term)
|
||||
|
||||
// Match problems
|
||||
const matchedProblems = analysis.problemsSolved
|
||||
.filter(p => content.includes(p.problem.toLowerCase()))
|
||||
.map(p => p.problem)
|
||||
|
||||
// Calculate score
|
||||
const keywordScore = Math.min(matchedKeywords.length * 0.15, 0.6)
|
||||
const problemScore = Math.min(matchedProblems.length * 0.2, 0.4)
|
||||
const relevanceScore = Math.min(keywordScore + problemScore, 1)
|
||||
|
||||
// Determine intent
|
||||
let intent: Opportunity['intent'] = 'looking-for'
|
||||
if (content.includes('frustrated') || content.includes('hate') || content.includes('sucks')) {
|
||||
intent = 'frustrated'
|
||||
} else if (content.includes('alternative') || content.includes('switching')) {
|
||||
intent = 'alternative'
|
||||
} else if (content.includes('vs') || content.includes('comparison') || content.includes('better')) {
|
||||
intent = 'comparison'
|
||||
} else if (content.includes('how to') || content.includes('fix') || content.includes('solution')) {
|
||||
intent = 'problem-solving'
|
||||
}
|
||||
|
||||
// Find matching persona
|
||||
const matchedPersona = analysis.personas.find(p =>
|
||||
p.searchBehavior.some(b => content.includes(b.toLowerCase()))
|
||||
)?.name
|
||||
|
||||
if (relevanceScore >= 0.3) {
|
||||
opportunities.push({
|
||||
title: result.title,
|
||||
url: result.url,
|
||||
source: result.source,
|
||||
snippet: result.snippet.slice(0, 300),
|
||||
relevanceScore,
|
||||
painPoints: matchedProblems.slice(0, 3),
|
||||
suggestedApproach: generateApproach(intent, analysis.productName),
|
||||
matchedKeywords: matchedKeywords.slice(0, 5),
|
||||
matchedPersona,
|
||||
intent
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return opportunities.sort((a, b) => b.relevanceScore - a.relevanceScore)
|
||||
}
|
||||
|
||||
function generateApproach(intent: string, productName: string): string {
|
||||
const approaches: Record<string, string> = {
|
||||
'frustrated': `Empathize with their frustration. Share how ${productName} solves this specific pain point without being pushy.`,
|
||||
'alternative': `Highlight key differentiators. Focus on why teams switch to ${productName} from their current solution.`,
|
||||
'comparison': `Provide an honest comparison. Be helpful and mention specific features that address their needs.`,
|
||||
'problem-solving': `Offer a clear solution. Share a specific example of how ${productName} solves this exact problem.`,
|
||||
'looking-for': `Introduce ${productName} as a relevant option. Focus on the specific features they're looking for.`
|
||||
}
|
||||
return approaches[intent] || approaches['looking-for']
|
||||
}
|
||||
36
app/globals.css
Normal file
36
app/globals.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
24
app/layout.tsx
Normal file
24
app/layout.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'AutoDork - Find Product Opportunities',
|
||||
description: 'AI-powered product research and opportunity finding',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
121
app/page.tsx
Normal file
121
app/page.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { ArrowRight, Search, Zap, Target, Sparkles } from 'lucide-react'
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="border-b border-border">
|
||||
<div className="container mx-auto max-w-6xl px-4 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
|
||||
<Search className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-foreground">AutoDork</span>
|
||||
</div>
|
||||
<nav className="flex items-center gap-4">
|
||||
<Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link href="/onboarding">
|
||||
<Button size="sm">Get Started</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero */}
|
||||
<section className="container mx-auto max-w-6xl px-4 py-24 lg:py-32">
|
||||
<div className="flex flex-col items-center text-center space-y-8">
|
||||
<Badge variant="secondary" className="px-4 py-1.5">
|
||||
<Sparkles className="mr-1 h-3 w-3" />
|
||||
AI-Powered Research
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-foreground">
|
||||
Find Your Next Customers
|
||||
<br />
|
||||
<span className="text-muted-foreground">Before They Know They Need You</span>
|
||||
</h1>
|
||||
|
||||
<p className="max-w-2xl text-lg text-muted-foreground">
|
||||
AutoDork analyzes your product and finds people on Reddit, Hacker News, and forums
|
||||
who are actively expressing needs that your solution solves.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/onboarding">
|
||||
<Button size="lg" className="gap-2">
|
||||
Start Finding Opportunities
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="border-t border-border bg-muted/50">
|
||||
<div className="container mx-auto max-w-6xl px-4 py-24">
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Zap className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">AI Analysis</h3>
|
||||
<p className="text-muted-foreground">
|
||||
We scrape your website and use GPT-4 to extract features, pain points, and keywords automatically.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Search className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Smart Dorking</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Our system generates targeted Google dork queries to find high-intent posts across Reddit, HN, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Target className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Scored Leads</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Each opportunity is scored by relevance and comes with suggested engagement approaches.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="container mx-auto max-w-6xl px-4 py-24">
|
||||
<div className="rounded-2xl border border-border bg-muted/50 p-12 text-center">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||||
Ready to find your customers?
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-8 max-w-lg mx-auto">
|
||||
Stop guessing. Start finding people who are already looking for solutions like yours.
|
||||
</p>
|
||||
<Link href="/onboarding">
|
||||
<Button size="lg">Get Started Free</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-border">
|
||||
<div className="container mx-auto max-w-6xl px-4 py-8">
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
AutoDork — Built for indie hackers and founders
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user