On-Page SEO Analyzer

A comprehensive on-page SEO analysis tool that helps you audit and optimize your website’s SEO performance. Analyze up to 500 pages at once with detailed insights on 74 SEO metrics.

How It Was Built

Watch the journey from n8n workflow to full app on YouTube

Features

• Page Discovery: Automatically discover pages on your website using Firecrawl
• Comprehensive Analysis: Analyze 74 SEO metrics per page using DataForSEO
• Core Web Vitals: Track LCP, FID, and CLS scores
• Real-time Progress: Watch your audit progress with live updates
• Export Results: Download reports as CSV or JSON
• Dark Mode: Full dark mode support

Tech Stack

Frontend:

• React 19 with TypeScript
• Vite for blazing fast builds
• TanStack Router & React Query
• Tailwind CSS with Shadcn/ui components
• Recharts for data visualization

Backend:

• Node.js with Express
• SQLite database (better-sqlite3)
• TypeScript
• Firecrawl API for page discovery
• DataForSEO API for SEO analysis

Prerequisites

• Node.js 18+
• npm or yarn
• Firecrawl API Key
• DataForSEO Account

Quick Start

1. Clone the repository

git clone https://github.com/AgriciDaniel/on-page-seo.git
cd on-page-seo

2. Install dependencies

# Install all dependencies (root, client, and server)
npm run install:all

3. Configure environment

cp .env.example .env

Edit .env with your settings, or configure API keys through the app’s settings page.

4. Start development servers

npm run dev

This starts both the client (http://localhost:3005) and server (http://localhost:3001).

Scripts

Command	Description
npm run dev	Start both client and server in development mode
npm run dev:client	Start only the client
npm run dev:server	Start only the server
npm run build	Build both client and server for production
npm run start	Start the production server
npm run install:all	Install dependencies for root, client, and server

Project Structure

on-page-seo/
├── client/             # React frontend
│   ├── src/
│   │   ├── components/ # Reusable UI components
│   │   ├── features/   # Feature-based modules
│   │   ├── lib/        # API client and utilities
│   │   ├── routes/     # TanStack Router routes
│   │   └── types/      # TypeScript types
│   └── ...
├── server/             # Express backend
│   └── src/
│       ├── routes/     # API routes
│       ├── services/   # Business logic
│       └── db/         # Database layer
├── shared/             # Shared types
│   └── types/
├── data/               # SQLite database
└── ...

API Endpoints

Method	Endpoint	Description
POST	/api/audits	Start a new SEO audit
GET	/api/audits	List all audits
GET	/api/audits/:id	Get audit details with results
GET	/api/audits/:id/progress	SSE stream for real-time progress
GET	/api/audits/:id/export	Export audit as CSV or JSON
DELETE	/api/audits/:id	Delete an audit
GET	/api/settings	Get API configuration status
PUT	/api/settings	Update API credentials

Production Deployment

Build for production

npm run build

Start production server

NODE_ENV=production npm run start

The server will serve the built client files and handle API requests on the same port.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

For a full publishing pipeline from analysis to published content, see Rankenstein.

Author

Built by Agrici Daniel - AI Workflow Architect.

• Blog - Deep dives on AI marketing automation
• AI Marketing Hub - Free community, 2,800+ members
• YouTube - Tutorials and demos
• All open-source tools