Why Build Your Own SEO Dashboard?
Enterprise SEO tools are expensive. For many agencies and SaaS companies, a lightweight internal dashboard pulling data from an SEO API is more cost-effective and customizable.
What We Will Build
A simple internal dashboard that:
- Accepts a list of domains
- Fetches domain rating and URL rating from the API
- Displays results in a clean table
- Highlights domains above a quality threshold
The Core Fetch Function
typescript
interface SeoMetrics {
domain_rating: number;
ahrefs_rank: number;
url_rating: number;
}
async function fetchSeoMetrics(domain: string): Promise<SeoMetrics> {
const response = await fetch(
`https://seo.basantasapkota.com/api/seo?url=${encodeURIComponent(domain)}`,
{ headers: { Authorization: `Bearer ${process.env.SEO_API_KEY}` } }
);
if (!response.ok) throw new Error(`API error: ${response.status}`);
return response.json();
}Displaying the Data in React
tsx
export function DomainTable({ domains }: { domains: string[] }) {
const [results, setResults] = useState<Record<string, SeoMetrics>>({});
useEffect(() => {
domains.forEach(async (domain) => {
const data = await fetchSeoMetrics(domain);
setResults(prev => ({ ...prev, [domain]: data }));
});
}, [domains]);
return (
<table>
<thead>
<tr>
<th>Domain</th>
<th>DR</th>
<th>UR</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
{domains.map(domain => (
<tr key={domain}>
<td>{domain}</td>
<td>{results[domain]?.domain_rating ?? '...'}</td>
<td>{results[domain]?.url_rating ?? '...'}</td>
<td>{results[domain]?.ahrefs_rank?.toLocaleString() ?? '...'}</td>
</tr>
))}
</tbody>
</table>
);
}Next Steps
Add caching, authentication, and export to CSV for a production-ready internal tool.