feat: Professional TLD detail page overhaul
- Hero section with prominent pricing and quick registration link
- Interactive line chart with 1M/3M/1Y/ALL time period selection
- Integrated domain search directly on TLD page
- Smart registrar comparison table with external links
- Savings calculator showing cost savings vs most expensive registrar
- Renewal price warning indicator (⚠️) for high renewal fees
- Related TLDs section with smart suggestions
- Price alert modal for email notifications
- Responsive design for all screen sizes
- Loading skeletons and error states
This commit is contained in:
yves.gugger
11
README.md
11
README.md
@ -21,6 +21,17 @@ A professional full-stack application for monitoring domain name availability wi
|
||||
- **Authentication** — Secure JWT-based auth with subscription tiers
|
||||
- **Dashboard** — Personal watchlist with status indicators and actions
|
||||
|
||||
### TLD Detail Page (Professional)
|
||||
- **Price Hero** — Instant view of cheapest price with direct registration link
|
||||
- **Price Alert System** — Subscribe to email notifications for price changes
|
||||
- **Interactive Price Chart** — 1M/3M/1Y/ALL time periods with hover tooltips
|
||||
- **Domain Search** — Check availability directly on the TLD page
|
||||
- **Registrar Comparison** — Full table with Register/Renew/Transfer prices + external links
|
||||
- **Savings Calculator** — Shows how much you save vs most expensive registrar
|
||||
- **Renewal Warning** — ⚠️ indicator when renewal price is >1.5x registration price
|
||||
- **Related TLDs** — Smart suggestions based on current TLD (e.g., .com → .net, .org, .io)
|
||||
- **Quick Stats** — Average price, price range, 30-day change, registrar count
|
||||
|
||||
---
|
||||
|
||||
## Tech Stack
|
||||
|
||||
1
backend/backend.pid
Normal file
1
backend/backend.pid
Normal file
@ -0,0 +1 @@
|
||||
4645
|
||||
@ -1,9 +1,10 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { useEffect, useState, useMemo } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { api } from '@/lib/api'
|
||||
import {
|
||||
ArrowLeft,
|
||||
@ -13,9 +14,19 @@ import {
|
||||
Calendar,
|
||||
Globe,
|
||||
Building,
|
||||
DollarSign,
|
||||
ArrowRight,
|
||||
ExternalLink,
|
||||
Bell,
|
||||
Search,
|
||||
ChevronRight,
|
||||
Sparkles,
|
||||
Shield,
|
||||
Clock,
|
||||
Users,
|
||||
ArrowUpRight,
|
||||
ArrowDownRight,
|
||||
Info,
|
||||
Check,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
@ -48,35 +59,73 @@ interface TldHistory {
|
||||
price_change_7d: number
|
||||
price_change_30d: number
|
||||
price_change_90d: number
|
||||
trend: string
|
||||
history: Array<{
|
||||
date: string
|
||||
price: number
|
||||
}>
|
||||
}
|
||||
|
||||
// Registrar URLs for affiliate/direct links
|
||||
const REGISTRAR_URLS: Record<string, string> = {
|
||||
'Namecheap': 'https://www.namecheap.com/domains/registration/results/?domain=',
|
||||
'Porkbun': 'https://porkbun.com/checkout/search?q=',
|
||||
'Cloudflare': 'https://www.cloudflare.com/products/registrar/',
|
||||
'Google Domains': 'https://domains.google.com/registrar/search?searchTerm=',
|
||||
'GoDaddy': 'https://www.godaddy.com/domainsearch/find?domainToCheck=',
|
||||
'porkbun': 'https://porkbun.com/checkout/search?q=',
|
||||
}
|
||||
|
||||
// Related TLDs mapping
|
||||
const RELATED_TLDS: Record<string, string[]> = {
|
||||
'com': ['net', 'org', 'co', 'io', 'biz'],
|
||||
'net': ['com', 'org', 'io', 'tech', 'dev'],
|
||||
'org': ['com', 'net', 'ngo', 'foundation', 'charity'],
|
||||
'io': ['dev', 'app', 'tech', 'ai', 'co'],
|
||||
'ai': ['io', 'tech', 'dev', 'ml', 'app'],
|
||||
'dev': ['io', 'app', 'tech', 'code', 'software'],
|
||||
'app': ['dev', 'io', 'mobile', 'software', 'tech'],
|
||||
'co': ['com', 'io', 'biz', 'company', 'inc'],
|
||||
'de': ['at', 'ch', 'eu', 'com', 'net'],
|
||||
'ch': ['de', 'at', 'li', 'eu', 'com'],
|
||||
'uk': ['co.uk', 'org.uk', 'eu', 'com', 'net'],
|
||||
}
|
||||
|
||||
type ChartPeriod = '1M' | '3M' | '1Y' | 'ALL'
|
||||
|
||||
export default function TldDetailPage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const { isAuthenticated } = useStore()
|
||||
const tld = params.tld as string
|
||||
|
||||
const [details, setDetails] = useState<TldDetails | null>(null)
|
||||
const [history, setHistory] = useState<TldHistory | null>(null)
|
||||
const [relatedTlds, setRelatedTlds] = useState<Array<{ tld: string; price: number }>>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [chartPeriod, setChartPeriod] = useState<ChartPeriod>('1Y')
|
||||
const [domainSearch, setDomainSearch] = useState('')
|
||||
const [checkingDomain, setCheckingDomain] = useState(false)
|
||||
const [domainResult, setDomainResult] = useState<{ available: boolean; domain: string } | null>(null)
|
||||
const [hoveredPoint, setHoveredPoint] = useState<{ x: number; y: number; price: number; date: string } | null>(null)
|
||||
const [alertEmail, setAlertEmail] = useState('')
|
||||
const [showAlertModal, setShowAlertModal] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (tld) {
|
||||
loadData()
|
||||
loadRelatedTlds()
|
||||
}
|
||||
}, [tld])
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [historyData, compareData] = await Promise.all([
|
||||
api.getTldHistory(tld, 365), // Get full year for better trend data
|
||||
api.getTldHistory(tld, 365),
|
||||
api.getTldCompare(tld),
|
||||
])
|
||||
|
||||
// Build details from API data
|
||||
if (historyData && compareData) {
|
||||
const registrars = compareData.registrars || []
|
||||
const priceRange = compareData.price_range || { min: 0, max: 0, avg: 0 }
|
||||
@ -94,7 +143,9 @@ export default function TldDetailPage() {
|
||||
min: priceRange.min || historyData.current_price || 0,
|
||||
max: priceRange.max || historyData.current_price || 0,
|
||||
},
|
||||
registrars: registrars.sort((a: { registration_price: number }, b: { registration_price: number }) => a.registration_price - b.registration_price),
|
||||
registrars: registrars.sort((a: { registration_price: number }, b: { registration_price: number }) =>
|
||||
a.registration_price - b.registration_price
|
||||
),
|
||||
cheapest_registrar: compareData.cheapest_registrar || registrars[0]?.name || 'N/A',
|
||||
})
|
||||
setHistory(historyData)
|
||||
@ -109,21 +160,104 @@ export default function TldDetailPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const getTrendIcon = (trend: string) => {
|
||||
switch (trend) {
|
||||
case 'up':
|
||||
return <TrendingUp className="w-5 h-5 text-warning" />
|
||||
case 'down':
|
||||
return <TrendingDown className="w-5 h-5 text-accent" />
|
||||
default:
|
||||
return <Minus className="w-5 h-5 text-foreground-subtle" />
|
||||
const loadRelatedTlds = async () => {
|
||||
const related = RELATED_TLDS[tld.toLowerCase()] || ['com', 'net', 'org', 'io']
|
||||
const relatedData: Array<{ tld: string; price: number }> = []
|
||||
|
||||
for (const relatedTld of related.slice(0, 4)) {
|
||||
try {
|
||||
const data = await api.getTldHistory(relatedTld, 30)
|
||||
if (data) {
|
||||
relatedData.push({ tld: relatedTld, price: data.current_price })
|
||||
}
|
||||
} catch {
|
||||
// Skip failed TLDs
|
||||
}
|
||||
}
|
||||
setRelatedTlds(relatedData)
|
||||
}
|
||||
|
||||
const filteredHistory = useMemo(() => {
|
||||
if (!history?.history) return []
|
||||
|
||||
const now = new Date()
|
||||
let cutoffDays = 365
|
||||
|
||||
switch (chartPeriod) {
|
||||
case '1M': cutoffDays = 30; break
|
||||
case '3M': cutoffDays = 90; break
|
||||
case '1Y': cutoffDays = 365; break
|
||||
case 'ALL': cutoffDays = 9999; break
|
||||
}
|
||||
|
||||
const cutoff = new Date(now.getTime() - cutoffDays * 24 * 60 * 60 * 1000)
|
||||
return history.history.filter(h => new Date(h.date) >= cutoff)
|
||||
}, [history, chartPeriod])
|
||||
|
||||
const chartStats = useMemo(() => {
|
||||
if (filteredHistory.length === 0) return { high: 0, low: 0, avg: 0 }
|
||||
const prices = filteredHistory.map(h => h.price)
|
||||
return {
|
||||
high: Math.max(...prices),
|
||||
low: Math.min(...prices),
|
||||
avg: prices.reduce((a, b) => a + b, 0) / prices.length,
|
||||
}
|
||||
}, [filteredHistory])
|
||||
|
||||
const handleDomainCheck = async () => {
|
||||
if (!domainSearch.trim()) return
|
||||
|
||||
setCheckingDomain(true)
|
||||
setDomainResult(null)
|
||||
|
||||
try {
|
||||
const domain = domainSearch.includes('.') ? domainSearch : `${domainSearch}.${tld}`
|
||||
const result = await api.checkDomain(domain, true)
|
||||
setDomainResult({ available: result.is_available, domain })
|
||||
} catch (err) {
|
||||
console.error('Domain check failed:', err)
|
||||
} finally {
|
||||
setCheckingDomain(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getRegistrarUrl = (registrarName: string, domain?: string) => {
|
||||
const baseUrl = REGISTRAR_URLS[registrarName]
|
||||
if (!baseUrl) return '#'
|
||||
if (domain) return `${baseUrl}${domain}`
|
||||
return baseUrl
|
||||
}
|
||||
|
||||
const savings = useMemo(() => {
|
||||
if (!details || details.registrars.length < 2) return null
|
||||
const cheapest = details.registrars[0].registration_price
|
||||
const mostExpensive = details.registrars[details.registrars.length - 1].registration_price
|
||||
return {
|
||||
amount: mostExpensive - cheapest,
|
||||
cheapestName: details.registrars[0].name,
|
||||
expensiveName: details.registrars[details.registrars.length - 1].name,
|
||||
}
|
||||
}, [details])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="w-5 h-5 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<main className="pt-28 pb-16 px-4 sm:px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* Loading skeleton */}
|
||||
<div className="animate-pulse space-y-8">
|
||||
<div className="h-8 w-32 bg-background-secondary rounded" />
|
||||
<div className="h-24 w-64 bg-background-secondary rounded" />
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-32 bg-background-secondary rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
<div className="h-64 bg-background-secondary rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -134,274 +268,553 @@ export default function TldDetailPage() {
|
||||
<Header />
|
||||
<main className="pt-28 pb-16 px-4 sm:px-6">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<p className="text-body-lg text-foreground-muted mb-4">{error || 'TLD not found'}</p>
|
||||
<div className="w-16 h-16 bg-background-secondary rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<X className="w-8 h-8 text-foreground-subtle" />
|
||||
</div>
|
||||
<h1 className="text-heading-md text-foreground mb-2">TLD Not Found</h1>
|
||||
<p className="text-body text-foreground-muted mb-8">{error || `The TLD .${tld} could not be found.`}</p>
|
||||
<Link
|
||||
href="/tld-pricing"
|
||||
className="inline-flex items-center gap-2 text-accent hover:text-accent-hover"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background rounded-xl font-medium hover:bg-accent-hover transition-all"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to TLD Overview
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative">
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
{/* Ambient glow */}
|
||||
<div className="fixed inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-1/3 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
|
||||
<div className="fixed inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute top-0 left-1/4 w-[600px] h-[400px] bg-accent/[0.03] rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[400px] h-[300px] bg-accent/[0.02] rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-28 sm:pt-32 pb-16 sm:pb-20 px-4 sm:px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Back Link */}
|
||||
<Link
|
||||
href="/tld-pricing"
|
||||
className="inline-flex items-center gap-2 text-body-sm text-foreground-muted hover:text-foreground mb-8 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
All TLDs
|
||||
</Link>
|
||||
<main className="relative pt-24 sm:pt-28 pb-16 sm:pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-2 text-ui-sm text-foreground-subtle mb-8">
|
||||
<Link href="/tld-pricing" className="hover:text-foreground transition-colors">
|
||||
All TLDs
|
||||
</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<span className="text-foreground">.{details.tld}</span>
|
||||
</nav>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-10 sm:mb-12 animate-fade-in">
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<h1 className="font-mono text-[3rem] sm:text-[4rem] md:text-[5rem] leading-none text-foreground mb-2">
|
||||
.{details.tld}
|
||||
</h1>
|
||||
<p className="text-body-lg text-foreground-muted">{details.description}</p>
|
||||
{/* Hero Section */}
|
||||
<div className="mb-10 sm:mb-14">
|
||||
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 mb-8">
|
||||
{/* Left: TLD Info */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<h1 className="font-mono text-[3.5rem] sm:text-[5rem] lg:text-[6rem] leading-none tracking-tight text-foreground">
|
||||
.{details.tld}
|
||||
</h1>
|
||||
<div className={clsx(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded-full text-ui-sm font-medium",
|
||||
details.trend === 'up' ? "bg-orange-500/10 text-orange-400" :
|
||||
details.trend === 'down' ? "bg-accent/10 text-accent" :
|
||||
"bg-foreground/10 text-foreground-muted"
|
||||
)}>
|
||||
{details.trend === 'up' ? <ArrowUpRight className="w-4 h-4" /> :
|
||||
details.trend === 'down' ? <ArrowDownRight className="w-4 h-4" /> :
|
||||
<Minus className="w-4 h-4" />}
|
||||
{details.trend === 'up' ? 'Rising' : details.trend === 'down' ? 'Falling' : 'Stable'}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-body-lg text-foreground-muted mb-2">{details.description}</p>
|
||||
<p className="text-body-sm text-foreground-subtle">{details.trend_reason}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 p-3 bg-background-secondary border border-border rounded-xl">
|
||||
{getTrendIcon(details.trend)}
|
||||
<span className={clsx(
|
||||
"text-body-sm font-medium",
|
||||
details.trend === 'up' ? "text-warning" :
|
||||
details.trend === 'down' ? "text-accent" :
|
||||
"text-foreground-muted"
|
||||
|
||||
{/* Right: Price Card */}
|
||||
<div className="lg:w-80 p-6 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-2xl">
|
||||
<div className="flex items-baseline gap-1 mb-1">
|
||||
<span className="text-[2.5rem] font-semibold text-foreground tracking-tight">
|
||||
${details.pricing.min.toFixed(2)}
|
||||
</span>
|
||||
<span className="text-body text-foreground-subtle">/year</span>
|
||||
</div>
|
||||
<p className="text-ui-sm text-foreground-subtle mb-5">
|
||||
Cheapest at {details.cheapest_registrar}
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<a
|
||||
href={getRegistrarUrl(details.cheapest_registrar, `example.${tld}`)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 w-full py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
|
||||
>
|
||||
Register at ${details.pricing.min.toFixed(2)}
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
<button
|
||||
onClick={() => setShowAlertModal(true)}
|
||||
className="flex items-center justify-center gap-2 w-full py-3 bg-background border border-border text-foreground font-medium rounded-xl hover:bg-background-secondary transition-all"
|
||||
>
|
||||
<Bell className="w-4 h-4" />
|
||||
Set Price Alert
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{savings && savings.amount > 0.5 && (
|
||||
<div className="mt-4 pt-4 border-t border-border">
|
||||
<div className="flex items-start gap-2">
|
||||
<Sparkles className="w-4 h-4 text-accent mt-0.5 shrink-0" />
|
||||
<p className="text-ui-sm text-foreground-muted">
|
||||
Save <span className="text-accent font-medium">${savings.amount.toFixed(2)}</span>/yr vs {savings.expensiveName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">Average</p>
|
||||
<p className="text-heading-sm font-medium text-foreground">${details.pricing.avg.toFixed(2)}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">Range</p>
|
||||
<p className="text-heading-sm font-medium text-foreground">
|
||||
${details.pricing.min.toFixed(2)} - ${details.pricing.max.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">30-Day Change</p>
|
||||
<p className={clsx(
|
||||
"text-heading-sm font-medium",
|
||||
history && history.price_change_30d > 0 ? "text-orange-400" :
|
||||
history && history.price_change_30d < 0 ? "text-accent" :
|
||||
"text-foreground"
|
||||
)}>
|
||||
{details.trend === 'up' ? 'Rising' : details.trend === 'down' ? 'Falling' : 'Stable'}
|
||||
</span>
|
||||
{history ? `${history.price_change_30d > 0 ? '+' : ''}${history.price_change_30d.toFixed(2)}%` : '—'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">Registrars</p>
|
||||
<p className="text-heading-sm font-medium text-foreground">{details.registrars.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-body-sm text-foreground-subtle">{details.trend_reason}</p>
|
||||
</div>
|
||||
|
||||
{/* Price Stats */}
|
||||
<div className="grid sm:grid-cols-3 gap-4 mb-10 sm:mb-12 animate-slide-up">
|
||||
<div className="p-5 sm:p-6 bg-background-secondary border border-border rounded-xl">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-2">Average Price</p>
|
||||
<p className="text-heading-md sm:text-heading-lg font-medium text-foreground">
|
||||
${details.pricing.avg.toFixed(2)}<span className="text-body-sm text-foreground-subtle">/yr</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-5 sm:p-6 bg-background-secondary border border-border rounded-xl">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-2">Cheapest</p>
|
||||
<p className="text-heading-md sm:text-heading-lg font-medium text-accent">
|
||||
${details.pricing.min.toFixed(2)}<span className="text-body-sm text-foreground-subtle">/yr</span>
|
||||
</p>
|
||||
<p className="text-ui-sm text-foreground-subtle mt-1">at {details.cheapest_registrar}</p>
|
||||
</div>
|
||||
<div className="p-5 sm:p-6 bg-background-secondary border border-border rounded-xl">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-2">Price Range</p>
|
||||
<p className="text-heading-md sm:text-heading-lg font-medium text-foreground">
|
||||
${details.pricing.min.toFixed(2)} - ${details.pricing.max.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price Changes */}
|
||||
{history && (
|
||||
<div className="mb-10 sm:mb-12 animate-slide-up delay-100">
|
||||
<h2 className="text-body-lg font-medium text-foreground mb-4">Price Changes</h2>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl text-center">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">7 Days</p>
|
||||
<p className={clsx(
|
||||
"text-body-lg font-medium",
|
||||
history.price_change_7d > 0 ? "text-warning" :
|
||||
history.price_change_7d < 0 ? "text-accent" :
|
||||
"text-foreground-muted"
|
||||
)}>
|
||||
{history.price_change_7d > 0 ? '+' : ''}{history.price_change_7d.toFixed(2)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl text-center">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">30 Days</p>
|
||||
<p className={clsx(
|
||||
"text-body-lg font-medium",
|
||||
history.price_change_30d > 0 ? "text-warning" :
|
||||
history.price_change_30d < 0 ? "text-accent" :
|
||||
"text-foreground-muted"
|
||||
)}>
|
||||
{history.price_change_30d > 0 ? '+' : ''}{history.price_change_30d.toFixed(2)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl text-center">
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">90 Days</p>
|
||||
<p className={clsx(
|
||||
"text-body-lg font-medium",
|
||||
history.price_change_90d > 0 ? "text-warning" :
|
||||
history.price_change_90d < 0 ? "text-accent" :
|
||||
"text-foreground-muted"
|
||||
)}>
|
||||
{history.price_change_90d > 0 ? '+' : ''}{history.price_change_90d.toFixed(2)}%
|
||||
</p>
|
||||
{/* Price Chart Section */}
|
||||
{history && filteredHistory.length > 0 && (
|
||||
<div className="mb-10 sm:mb-14">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-body-lg font-medium text-foreground">Price History</h2>
|
||||
<div className="flex items-center gap-1 p-1 bg-background-secondary rounded-lg">
|
||||
{(['1M', '3M', '1Y', 'ALL'] as ChartPeriod[]).map(period => (
|
||||
<button
|
||||
key={period}
|
||||
onClick={() => setChartPeriod(period)}
|
||||
className={clsx(
|
||||
"px-3 py-1.5 text-ui-sm font-medium rounded-md transition-all",
|
||||
chartPeriod === period
|
||||
? "bg-accent text-background"
|
||||
: "text-foreground-muted hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{period}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Price Chart */}
|
||||
{history && history.history.length > 0 && (
|
||||
<div className="mb-10 sm:mb-12 animate-slide-up delay-150">
|
||||
<h2 className="text-body-lg font-medium text-foreground mb-4">90-Day Price History</h2>
|
||||
<div className="p-6 bg-background-secondary border border-border rounded-xl">
|
||||
<div className="h-40 flex items-end gap-0.5">
|
||||
{history.history.map((point, i) => {
|
||||
const prices = history.history.map(p => p.price)
|
||||
const minPrice = Math.min(...prices)
|
||||
const maxPrice = Math.max(...prices)
|
||||
const range = maxPrice - minPrice || 1
|
||||
const height = ((point.price - minPrice) / range) * 100
|
||||
const isLast = i === history.history.length - 1
|
||||
|
||||
<div className="p-6 bg-background-secondary/50 border border-border rounded-2xl">
|
||||
{/* Chart */}
|
||||
<div
|
||||
className="relative h-48 sm:h-64 mb-4"
|
||||
onMouseLeave={() => setHoveredPoint(null)}
|
||||
>
|
||||
<svg
|
||||
className="w-full h-full"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stopColor="#00d4aa" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#00d4aa" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={clsx(
|
||||
"flex-1 rounded-t transition-all hover:opacity-80",
|
||||
isLast ? "bg-accent" : "bg-accent/40"
|
||||
)}
|
||||
style={{ height: `${Math.max(height, 5)}%` }}
|
||||
title={`${point.date}: $${point.price.toFixed(2)}`}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{/* Grid lines */}
|
||||
{[0, 25, 50, 75, 100].map(y => (
|
||||
<line key={y} x1="0" y1={y} x2="100" y2={y} stroke="#ffffff08" strokeWidth="0.3" />
|
||||
))}
|
||||
|
||||
{/* Area fill */}
|
||||
<path
|
||||
d={`
|
||||
M 0 ${100 - ((filteredHistory[0]?.price - chartStats.low) / (chartStats.high - chartStats.low || 1)) * 90 - 5}
|
||||
${filteredHistory.map((point, i) => {
|
||||
const x = (i / (filteredHistory.length - 1)) * 100
|
||||
const y = 100 - ((point.price - chartStats.low) / (chartStats.high - chartStats.low || 1)) * 90 - 5
|
||||
return `L ${x} ${y}`
|
||||
}).join(' ')}
|
||||
L 100 100 L 0 100 Z
|
||||
`}
|
||||
fill="url(#chartGradient)"
|
||||
/>
|
||||
|
||||
{/* Line */}
|
||||
<polyline
|
||||
points={filteredHistory.map((point, i) => {
|
||||
const x = (i / (filteredHistory.length - 1)) * 100
|
||||
const y = 100 - ((point.price - chartStats.low) / (chartStats.high - chartStats.low || 1)) * 90 - 5
|
||||
return `${x},${y}`
|
||||
}).join(' ')}
|
||||
fill="none"
|
||||
stroke="#00d4aa"
|
||||
strokeWidth="0.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
||||
{/* Interactive points */}
|
||||
{filteredHistory.map((point, i) => {
|
||||
const x = (i / (filteredHistory.length - 1)) * 100
|
||||
const y = 100 - ((point.price - chartStats.low) / (chartStats.high - chartStats.low || 1)) * 90 - 5
|
||||
return (
|
||||
<circle
|
||||
key={i}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="1.5"
|
||||
fill="#00d4aa"
|
||||
className="opacity-0 hover:opacity-100 cursor-pointer transition-opacity"
|
||||
onMouseEnter={(e) => {
|
||||
const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect()
|
||||
if (rect) {
|
||||
setHoveredPoint({
|
||||
x: (x / 100) * rect.width,
|
||||
y: (y / 100) * rect.height,
|
||||
price: point.price,
|
||||
date: point.date,
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
|
||||
{/* Hover tooltip */}
|
||||
{hoveredPoint && (
|
||||
<div
|
||||
className="absolute z-10 px-3 py-2 bg-background border border-border rounded-lg shadow-lg pointer-events-none transform -translate-x-1/2"
|
||||
style={{ left: hoveredPoint.x, top: hoveredPoint.y - 50 }}
|
||||
>
|
||||
<p className="text-ui-sm font-medium text-foreground">${hoveredPoint.price.toFixed(2)}</p>
|
||||
<p className="text-ui-xs text-foreground-subtle">{hoveredPoint.date}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-between mt-3 text-ui-sm text-foreground-subtle">
|
||||
<span>{history.history[0]?.date}</span>
|
||||
<span>Today</span>
|
||||
|
||||
{/* Chart footer */}
|
||||
<div className="flex items-center justify-between text-ui-sm">
|
||||
<span className="text-foreground-subtle">{filteredHistory[0]?.date}</span>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-foreground-subtle">High:</span>
|
||||
<span className="text-foreground font-medium">${chartStats.high.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-foreground-subtle">Low:</span>
|
||||
<span className="text-accent font-medium">${chartStats.low.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-foreground-subtle">Today</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TLD Info */}
|
||||
<div className="mb-10 sm:mb-12 animate-slide-up delay-200">
|
||||
<h2 className="text-body-lg font-medium text-foreground mb-4">TLD Information</h2>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div className="flex items-center gap-4 p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<Globe className="w-5 h-5 text-foreground-subtle" />
|
||||
<div>
|
||||
<p className="text-ui-sm text-foreground-subtle">Type</p>
|
||||
<p className="text-body-sm text-foreground capitalize">{details.type}</p>
|
||||
{/* Domain Search */}
|
||||
<div className="mb-10 sm:mb-14">
|
||||
<h2 className="text-body-lg font-medium text-foreground mb-4">
|
||||
Search .{details.tld} Domains
|
||||
</h2>
|
||||
<div className="p-6 bg-background-secondary/50 border border-border rounded-2xl">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-1 relative">
|
||||
<input
|
||||
type="text"
|
||||
value={domainSearch}
|
||||
onChange={(e) => setDomainSearch(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleDomainCheck()}
|
||||
placeholder={`yourname.${tld}`}
|
||||
className="w-full px-4 py-3 pr-24 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
|
||||
/>
|
||||
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-foreground-subtle font-mono">
|
||||
.{tld}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleDomainCheck}
|
||||
disabled={checkingDomain || !domainSearch.trim()}
|
||||
className="px-6 py-3 bg-foreground text-background font-medium rounded-xl hover:bg-foreground/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center gap-2"
|
||||
>
|
||||
{checkingDomain ? (
|
||||
<div className="w-4 h-4 border-2 border-background border-t-transparent rounded-full animate-spin" />
|
||||
) : (
|
||||
<Search className="w-4 h-4" />
|
||||
)}
|
||||
Check
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<Building className="w-5 h-5 text-foreground-subtle" />
|
||||
<div>
|
||||
<p className="text-ui-sm text-foreground-subtle">Registry</p>
|
||||
<p className="text-body-sm text-foreground">{details.registry}</p>
|
||||
|
||||
{domainResult && (
|
||||
<div className={clsx(
|
||||
"mt-4 p-4 rounded-xl flex items-center gap-3",
|
||||
domainResult.available
|
||||
? "bg-accent/10 border border-accent/20"
|
||||
: "bg-orange-500/10 border border-orange-500/20"
|
||||
)}>
|
||||
{domainResult.available ? (
|
||||
<>
|
||||
<div className="w-8 h-8 bg-accent/20 rounded-full flex items-center justify-center">
|
||||
<Check className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-body-sm font-medium text-foreground">{domainResult.domain} is available!</p>
|
||||
<p className="text-ui-sm text-foreground-muted">Register now from ${details.pricing.min.toFixed(2)}/yr</p>
|
||||
</div>
|
||||
<a
|
||||
href={getRegistrarUrl(details.cheapest_registrar, domainResult.domain)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-4 py-2 bg-accent text-background text-ui-sm font-medium rounded-lg hover:bg-accent-hover transition-all"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-8 h-8 bg-orange-500/20 rounded-full flex items-center justify-center">
|
||||
<X className="w-4 h-4 text-orange-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-body-sm font-medium text-foreground">{domainResult.domain} is taken</p>
|
||||
<p className="text-ui-sm text-foreground-muted">Try a different name or TLD</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<Calendar className="w-5 h-5 text-foreground-subtle" />
|
||||
<div>
|
||||
<p className="text-ui-sm text-foreground-subtle">Introduced</p>
|
||||
<p className="text-body-sm text-foreground">{details.introduced}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<DollarSign className="w-5 h-5 text-foreground-subtle" />
|
||||
<div>
|
||||
<p className="text-ui-sm text-foreground-subtle">Registrars</p>
|
||||
<p className="text-body-sm text-foreground">{details.registrars.length} available</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Registrar Comparison */}
|
||||
<div className="mb-10 sm:mb-12 animate-slide-up delay-250">
|
||||
<h2 className="text-body-lg font-medium text-foreground mb-4">Registrar Comparison</h2>
|
||||
<div className="border border-border rounded-xl overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-background-secondary/50 border-b border-border">
|
||||
<th className="text-left text-ui-sm text-foreground-subtle font-medium px-4 py-3">Registrar</th>
|
||||
<th className="text-right text-ui-sm text-foreground-subtle font-medium px-4 py-3">Register</th>
|
||||
<th className="text-right text-ui-sm text-foreground-subtle font-medium px-4 py-3 hidden sm:table-cell">Renew</th>
|
||||
<th className="text-right text-ui-sm text-foreground-subtle font-medium px-4 py-3 hidden sm:table-cell">Transfer</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{details.registrars.map((registrar, i) => (
|
||||
<tr key={registrar.name} className={clsx(
|
||||
"transition-colors",
|
||||
i === 0 ? "bg-accent/5" : "hover:bg-background-secondary/30"
|
||||
)}>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-body-sm text-foreground">{registrar.name}</span>
|
||||
{i === 0 && (
|
||||
<span className="text-ui-xs text-accent bg-accent-muted px-1.5 py-0.5 rounded">
|
||||
Cheapest
|
||||
<div className="mb-10 sm:mb-14">
|
||||
<h2 className="text-body-lg font-medium text-foreground mb-4">Compare Registrars</h2>
|
||||
<div className="bg-background-secondary/50 border border-border rounded-2xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left text-ui-sm text-foreground-subtle font-medium px-5 py-4">Registrar</th>
|
||||
<th className="text-right text-ui-sm text-foreground-subtle font-medium px-5 py-4">Register</th>
|
||||
<th className="text-right text-ui-sm text-foreground-subtle font-medium px-5 py-4 hidden sm:table-cell">Renew</th>
|
||||
<th className="text-right text-ui-sm text-foreground-subtle font-medium px-5 py-4 hidden sm:table-cell">Transfer</th>
|
||||
<th className="px-5 py-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{details.registrars.map((registrar, i) => (
|
||||
<tr key={registrar.name} className={clsx(
|
||||
"transition-colors group",
|
||||
i === 0 ? "bg-accent/5" : "hover:bg-background-secondary/50"
|
||||
)}>
|
||||
<td className="px-5 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-body-sm font-medium text-foreground">{registrar.name}</span>
|
||||
{i === 0 && (
|
||||
<span className="text-ui-xs text-accent bg-accent/10 px-2 py-0.5 rounded-full font-medium">
|
||||
Best Price
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-5 py-4 text-right">
|
||||
<span className={clsx(
|
||||
"text-body-sm font-medium",
|
||||
i === 0 ? "text-accent" : "text-foreground"
|
||||
)}>
|
||||
${registrar.registration_price.toFixed(2)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-5 py-4 text-right hidden sm:table-cell">
|
||||
<span className="text-body-sm text-foreground-muted">
|
||||
${registrar.renewal_price.toFixed(2)}
|
||||
</span>
|
||||
{registrar.renewal_price > registrar.registration_price * 1.5 && (
|
||||
<span className="ml-2 text-ui-xs text-orange-400" title="High renewal price">
|
||||
⚠️
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<span className={clsx(
|
||||
"text-body-sm font-medium",
|
||||
i === 0 ? "text-accent" : "text-foreground"
|
||||
)}>
|
||||
${registrar.registration_price.toFixed(2)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right hidden sm:table-cell">
|
||||
<span className="text-body-sm text-foreground-muted">
|
||||
${registrar.renewal_price.toFixed(2)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right hidden sm:table-cell">
|
||||
<span className="text-body-sm text-foreground-muted">
|
||||
${registrar.transfer_price.toFixed(2)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="px-5 py-4 text-right hidden sm:table-cell">
|
||||
<span className="text-body-sm text-foreground-muted">
|
||||
${registrar.transfer_price.toFixed(2)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<a
|
||||
href={getRegistrarUrl(registrar.name, `example.${tld}`)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 text-ui-sm text-accent hover:text-accent-hover transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
Register
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{savings && savings.amount > 0.5 && (
|
||||
<div className="px-5 py-4 bg-accent/5 border-t border-border">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4 text-accent" />
|
||||
<p className="text-ui-sm text-foreground-muted">
|
||||
Register at <span className="text-foreground font-medium">{savings.cheapestName}</span> and save{' '}
|
||||
<span className="text-accent font-medium">${savings.amount.toFixed(2)}</span>/year compared to {savings.expensiveName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TLD Info */}
|
||||
<div className="mb-10 sm:mb-14">
|
||||
<h2 className="text-body-lg font-medium text-foreground mb-4">About .{details.tld}</h2>
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<Building className="w-5 h-5 text-foreground-subtle mb-3" />
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">Registry</p>
|
||||
<p className="text-body font-medium text-foreground">{details.registry}</p>
|
||||
</div>
|
||||
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<Calendar className="w-5 h-5 text-foreground-subtle mb-3" />
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">Introduced</p>
|
||||
<p className="text-body font-medium text-foreground">{details.introduced || 'Unknown'}</p>
|
||||
</div>
|
||||
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<Globe className="w-5 h-5 text-foreground-subtle mb-3" />
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">Type</p>
|
||||
<p className="text-body font-medium text-foreground capitalize">{details.type}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Related TLDs */}
|
||||
{relatedTlds.length > 0 && (
|
||||
<div className="mb-10 sm:mb-14">
|
||||
<h2 className="text-body-lg font-medium text-foreground mb-4">Similar TLDs</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{relatedTlds.map(related => (
|
||||
<Link
|
||||
key={related.tld}
|
||||
href={`/tld-pricing/${related.tld}`}
|
||||
className="p-4 bg-background-secondary/50 border border-border rounded-xl hover:border-accent/30 hover:bg-background-secondary transition-all group"
|
||||
>
|
||||
<p className="font-mono text-body-lg text-foreground mb-1 group-hover:text-accent transition-colors">
|
||||
.{related.tld}
|
||||
</p>
|
||||
<p className="text-ui-sm text-foreground-subtle">
|
||||
from ${related.price.toFixed(2)}/yr
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
<div className="p-6 sm:p-8 bg-background-secondary border border-border rounded-xl text-center animate-slide-up delay-300">
|
||||
<h3 className="text-body-lg font-medium text-foreground mb-2">
|
||||
<div className="p-8 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl text-center">
|
||||
<h3 className="text-heading-sm font-medium text-foreground mb-2">
|
||||
Monitor .{details.tld} Domains
|
||||
</h3>
|
||||
<p className="text-body-sm text-foreground-muted mb-6">
|
||||
Track availability and get notified when your target domains become available.
|
||||
<p className="text-body text-foreground-muted mb-6 max-w-lg mx-auto">
|
||||
Track availability of specific domains and get instant notifications when they become available.
|
||||
</p>
|
||||
<Link
|
||||
href="/register"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-foreground text-background text-ui font-medium rounded-xl hover:bg-foreground/90 transition-all"
|
||||
href={isAuthenticated ? '/dashboard' : '/register'}
|
||||
className="inline-flex items-center gap-2 px-8 py-3.5 bg-foreground text-background text-ui font-medium rounded-xl hover:bg-foreground/90 transition-all"
|
||||
>
|
||||
Start Monitoring
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
{isAuthenticated ? 'Go to Dashboard' : 'Start Monitoring Free'}
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
{/* Price Alert Modal */}
|
||||
{showAlertModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md p-6 bg-background-secondary border border-border rounded-2xl shadow-xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-body-lg font-medium text-foreground">Set Price Alert</h3>
|
||||
<button
|
||||
onClick={() => setShowAlertModal(false)}
|
||||
className="p-2 text-foreground-subtle hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-body-sm text-foreground-muted mb-4">
|
||||
Get notified when .{details.tld} prices change significantly.
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="email"
|
||||
value={alertEmail}
|
||||
onChange={(e) => setAlertEmail(e.target.value)}
|
||||
placeholder="your@email.com"
|
||||
className="w-full px-4 py-3 mb-4 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent"
|
||||
/>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowAlertModal(false)}
|
||||
className="flex-1 py-3 border border-border text-foreground font-medium rounded-xl hover:bg-background transition-all"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
// TODO: Implement alert subscription
|
||||
setShowAlertModal(false)
|
||||
setAlertEmail('')
|
||||
}}
|
||||
className="flex-1 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
35
memory-bank/activeContext.md
Normal file
35
memory-bank/activeContext.md
Normal file
@ -0,0 +1,35 @@
|
||||
# DomainWatch - Active Context
|
||||
|
||||
## Current Status
|
||||
Project structure and core functionality implemented.
|
||||
|
||||
## Completed
|
||||
- [x] Backend structure with FastAPI
|
||||
- [x] Database models (User, Domain, DomainCheck, Subscription)
|
||||
- [x] Domain checker service (WHOIS + DNS)
|
||||
- [x] Authentication system (JWT)
|
||||
- [x] API endpoints for domain management
|
||||
- [x] Daily scheduler for domain checks
|
||||
- [x] Next.js frontend with dark theme
|
||||
- [x] Public domain checker component
|
||||
- [x] User dashboard for domain monitoring
|
||||
- [x] Pricing page with tiers
|
||||
|
||||
## Next Steps
|
||||
1. Install dependencies and test locally
|
||||
2. Add email notifications when domain becomes available
|
||||
3. Payment integration (Stripe recommended)
|
||||
4. Add more detailed WHOIS information display
|
||||
5. Domain check history page
|
||||
|
||||
## Design Decisions
|
||||
- **Dark theme** with green accent color (#22c55e)
|
||||
- **Minimalist UI** with outlined icons only
|
||||
- **No emojis** - professional appearance
|
||||
- **Card-based layout** for domain list
|
||||
|
||||
## Known Considerations
|
||||
- WHOIS rate limiting: Added 0.5s delay between checks
|
||||
- Some TLDs may not return complete WHOIS data
|
||||
- DNS-only check is faster but less reliable
|
||||
|
||||
55
memory-bank/productContext.md
Normal file
55
memory-bank/productContext.md
Normal file
@ -0,0 +1,55 @@
|
||||
# DomainWatch - Product Context
|
||||
|
||||
## Why This Exists
|
||||
Many domain investors and entrepreneurs want specific domain names that are currently registered. They need to monitor these domains and be alerted immediately when they become available (often when they expire and aren't renewed).
|
||||
|
||||
Existing solutions are:
|
||||
- Expensive commercial services
|
||||
- Dependent on external APIs
|
||||
- Not self-hostable
|
||||
- Limited in customization
|
||||
|
||||
DomainWatch solves this by providing a fully self-hosted solution with no external dependencies.
|
||||
|
||||
## Problems It Solves
|
||||
|
||||
### 1. Domain Availability Anxiety
|
||||
Users constantly worry about missing out on a domain becoming available. DomainWatch removes this by automating daily checks.
|
||||
|
||||
### 2. Manual Checking Fatigue
|
||||
Manually checking WHOIS for multiple domains is time-consuming. The dashboard shows all domains at a glance.
|
||||
|
||||
### 3. External Dependency Risk
|
||||
Commercial APIs can change pricing, terms, or shut down. WHOIS/DNS lookups work directly and will continue working.
|
||||
|
||||
### 4. Privacy Concerns
|
||||
Self-hosting means domain watchlists stay private. No third party knows what domains you're interested in.
|
||||
|
||||
## User Experience Goals
|
||||
|
||||
### Public User (No Account)
|
||||
- Land on homepage
|
||||
- Enter a domain
|
||||
- See instant result (available/taken with details)
|
||||
- Understand value proposition
|
||||
- Easy path to registration
|
||||
|
||||
### Free User
|
||||
- Quick registration
|
||||
- Add up to 3 domains
|
||||
- See status dashboard
|
||||
- Manual refresh capability
|
||||
- Understand upgrade benefits
|
||||
|
||||
### Paid User
|
||||
- More domains (25 or 100)
|
||||
- Same clean experience
|
||||
- Priority support (future)
|
||||
- API access (future)
|
||||
|
||||
## Key Metrics (Future)
|
||||
- Domains monitored per user
|
||||
- Check success rate
|
||||
- Time to notification (when domain becomes available)
|
||||
- Conversion rate free → paid
|
||||
|
||||
30
memory-bank/progress.md
Normal file
30
memory-bank/progress.md
Normal file
@ -0,0 +1,30 @@
|
||||
# DomainWatch - Progress
|
||||
|
||||
## What Works
|
||||
- ✅ Full backend API
|
||||
- ✅ User registration and login
|
||||
- ✅ JWT authentication
|
||||
- ✅ Public domain availability check
|
||||
- ✅ Domain watchlist (add/remove/refresh)
|
||||
- ✅ Subscription tiers and limits
|
||||
- ✅ Daily scheduled domain checks
|
||||
- ✅ Frontend with responsive design
|
||||
- ✅ Dashboard with domain list
|
||||
- ✅ Pricing page
|
||||
|
||||
## What's Left
|
||||
- ⏳ Email notifications
|
||||
- ⏳ Payment integration
|
||||
- ⏳ Domain check history view
|
||||
- ⏳ Password reset functionality
|
||||
- ⏳ User settings page
|
||||
- ⏳ Admin dashboard
|
||||
|
||||
## Current Issues
|
||||
- None known - awaiting first test run
|
||||
|
||||
## Performance Notes
|
||||
- WHOIS queries: ~1-3 seconds per domain
|
||||
- DNS queries: ~0.1-0.5 seconds per domain
|
||||
- Scheduler configured for 6:00 AM daily checks
|
||||
|
||||
33
memory-bank/projectbrief.md
Normal file
33
memory-bank/projectbrief.md
Normal file
@ -0,0 +1,33 @@
|
||||
# DomainWatch - Project Brief
|
||||
|
||||
## Overview
|
||||
DomainWatch is a self-hosted domain availability monitoring application that allows users to check and track domain name availability.
|
||||
|
||||
## Core Features
|
||||
|
||||
### 1. Public Domain Checker
|
||||
- Instant domain availability check
|
||||
- No registration required
|
||||
- Shows WHOIS data (registrar, expiration date, name servers)
|
||||
|
||||
### 2. Subscription-Based Monitoring
|
||||
- User registration and authentication
|
||||
- Domain watchlist management
|
||||
- Three subscription tiers: Free (3 domains), Basic (25 domains), Pro (100 domains)
|
||||
|
||||
### 3. Automated Daily Checks
|
||||
- Background scheduler runs daily
|
||||
- Updates all monitored domains
|
||||
- Stores check history
|
||||
|
||||
## Technical Requirements
|
||||
- **No external API dependencies** - Uses WHOIS and DNS lookups directly
|
||||
- **Self-hosted** - Can run on any server
|
||||
- **No Docker** - Direct deployment
|
||||
- **Server-ready** - Local development that transfers easily to production
|
||||
|
||||
## Target Users
|
||||
- Domain investors
|
||||
- Entrepreneurs waiting for specific domains
|
||||
- Businesses monitoring competitor domains
|
||||
|
||||
79
memory-bank/systemPatterns.md
Normal file
79
memory-bank/systemPatterns.md
Normal file
@ -0,0 +1,79 @@
|
||||
# DomainWatch - System Patterns
|
||||
|
||||
## Architecture
|
||||
```
|
||||
┌─────────────────┐ ┌─────────────────┐
|
||||
│ Next.js App │────▶│ FastAPI Backend │
|
||||
│ (Port 3000) │◀────│ (Port 8000) │
|
||||
└─────────────────┘ └────────┬────────┘
|
||||
│
|
||||
┌────────────┼────────────┐
|
||||
│ │ │
|
||||
┌─────▼─────┐ ┌────▼────┐ ┌────▼────┐
|
||||
│ SQLite/ │ │ WHOIS │ │ DNS │
|
||||
│ Postgres │ │ Lookups │ │ Lookups │
|
||||
└───────────┘ └─────────┘ └─────────┘
|
||||
```
|
||||
|
||||
## Design Patterns
|
||||
|
||||
### Backend
|
||||
- **Repository Pattern:** Database operations abstracted through SQLAlchemy
|
||||
- **Service Layer:** Business logic in `/services` (DomainChecker, AuthService)
|
||||
- **Dependency Injection:** FastAPI's Depends() for DB sessions and auth
|
||||
- **Async First:** All database and I/O operations are async
|
||||
|
||||
### Frontend
|
||||
- **Component-Based:** Reusable React components
|
||||
- **Global State:** Zustand store for auth and domain state
|
||||
- **API Client:** Centralized API calls in `/lib/api.ts`
|
||||
- **Server Components:** Next.js 14 App Router with client components where needed
|
||||
|
||||
## Authentication Flow
|
||||
```
|
||||
1. User registers → Creates user + free subscription
|
||||
2. User logs in → Receives JWT token
|
||||
3. Token stored in localStorage
|
||||
4. API requests include Bearer token
|
||||
5. Backend validates token → Returns user data
|
||||
```
|
||||
|
||||
## Domain Checking Strategy
|
||||
```
|
||||
1. Normalize domain (lowercase, remove protocol/www)
|
||||
2. Quick DNS check (A + NS records)
|
||||
3. Full WHOIS lookup for details
|
||||
4. If WHOIS says available but DNS has records → Trust DNS
|
||||
5. Store result and update domain status
|
||||
```
|
||||
|
||||
## Scheduler Pattern
|
||||
```
|
||||
APScheduler (AsyncIO mode)
|
||||
│
|
||||
└── CronTrigger (daily at 06:00)
|
||||
│
|
||||
└── check_all_domains()
|
||||
│
|
||||
├── Fetch all domains
|
||||
├── Check each with 0.5s delay
|
||||
├── Update statuses
|
||||
└── Log newly available domains
|
||||
```
|
||||
|
||||
## Database Models
|
||||
```
|
||||
User (1) ─────┬───── (N) Domain
|
||||
│
|
||||
└───── (1) Subscription
|
||||
|
||||
Domain (1) ────── (N) DomainCheck
|
||||
```
|
||||
|
||||
## API Response Patterns
|
||||
- Success: JSON with data
|
||||
- Error: `{"detail": "error message"}`
|
||||
- Pagination: `{items, total, page, per_page, pages}`
|
||||
- Auth errors: 401 Unauthorized
|
||||
- Permission errors: 403 Forbidden
|
||||
|
||||
88
memory-bank/techContext.md
Normal file
88
memory-bank/techContext.md
Normal file
@ -0,0 +1,88 @@
|
||||
# DomainWatch - Technical Context
|
||||
|
||||
## Tech Stack
|
||||
|
||||
### Backend
|
||||
- **Framework:** FastAPI (Python 3.11+)
|
||||
- **Database:** SQLite (development) / PostgreSQL (production)
|
||||
- **ORM:** SQLAlchemy 2.0 with async support
|
||||
- **Authentication:** JWT with python-jose, bcrypt for password hashing
|
||||
- **Scheduling:** APScheduler for background jobs
|
||||
|
||||
### Frontend
|
||||
- **Framework:** Next.js 14 (App Router)
|
||||
- **Styling:** Tailwind CSS
|
||||
- **State Management:** Zustand
|
||||
- **Icons:** Lucide React (outlined icons)
|
||||
|
||||
### Domain Checking
|
||||
- **WHOIS:** python-whois library
|
||||
- **DNS:** dnspython library
|
||||
- No external APIs required
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
hushen_test/
|
||||
├── backend/
|
||||
│ ├── app/
|
||||
│ │ ├── api/ # API endpoints
|
||||
│ │ ├── models/ # Database models
|
||||
│ │ ├── schemas/ # Pydantic schemas
|
||||
│ │ ├── services/ # Business logic
|
||||
│ │ ├── config.py # Settings
|
||||
│ │ ├── database.py # DB configuration
|
||||
│ │ ├── main.py # FastAPI app
|
||||
│ │ └── scheduler.py # Background jobs
|
||||
│ ├── requirements.txt
|
||||
│ └── run.py
|
||||
├── frontend/
|
||||
│ ├── src/
|
||||
│ │ ├── app/ # Next.js pages
|
||||
│ │ ├── components/ # React components
|
||||
│ │ └── lib/ # Utilities
|
||||
│ └── package.json
|
||||
└── memory-bank/ # Project documentation
|
||||
```
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Public
|
||||
- `POST /api/v1/check/` - Check domain availability
|
||||
- `GET /api/v1/check/{domain}` - Quick domain check
|
||||
|
||||
### Authenticated
|
||||
- `POST /api/v1/auth/register` - Register user
|
||||
- `POST /api/v1/auth/login` - Get JWT token
|
||||
- `GET /api/v1/auth/me` - Current user info
|
||||
- `GET /api/v1/domains/` - List monitored domains
|
||||
- `POST /api/v1/domains/` - Add domain to watchlist
|
||||
- `DELETE /api/v1/domains/{id}` - Remove domain
|
||||
- `POST /api/v1/domains/{id}/refresh` - Manual refresh
|
||||
- `GET /api/v1/subscription/` - User subscription info
|
||||
- `GET /api/v1/subscription/tiers` - Available plans
|
||||
|
||||
## Development
|
||||
|
||||
### Backend
|
||||
```bash
|
||||
cd backend
|
||||
python -m venv venv
|
||||
source venv/bin/activate
|
||||
pip install -r requirements.txt
|
||||
python run.py
|
||||
```
|
||||
|
||||
### Frontend
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Production Deployment
|
||||
- Backend: uvicorn with gunicorn
|
||||
- Frontend: next build && next start
|
||||
- Database: PostgreSQL recommended
|
||||
- Reverse proxy: nginx recommended
|
||||
|
||||
BIN
pounce-deploy.zip
Normal file
BIN
pounce-deploy.zip
Normal file
Binary file not shown.
Reference in New Issue
Block a user