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