SEO Frontend - Competitive Vocabulary Intelligence Agent

A modern React + Vite application for SEO keyword analysis and content optimization.

Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm (comes with Node.js)

Installation

1. Navigate to the frontend directory:

cd seo-frontend

2. Install dependencies:

npm install

Running the Application

Development Mode

npm run dev

This will start the development server at http://localhost:5173 by default.

Run on Specific Port (e.g., port 3000)

npm run dev -- --port 3000

Run on Specific Port with Network Access

npm run dev -- --port 3000 --host

The --host flag allows access from other devices on your network.

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

Configuration

Backend API URL

The frontend connects to the backend API. Update the API URL in your code if needed:

const API_URL = 'http://127.0.0.1:8000';

Project Structure

seo-frontend/
├── src/
│   ├── App.jsx          # Main application component
│   ├── main.jsx         # Application entry point
│   └── index.css        # Global styles
├── public/              # Static assets
├── index.html           # HTML template
├── package.json         # Dependencies and scripts
└── vite.config.js       # Vite configuration

Features

• Product Selection: Choose from Adobe products (Express, Photoshop, Illustrator, etc.)
• URL Analysis: Analyze article URLs for SEO keywords
• Keyword Extraction: Get article, competitor, and suggested keywords
• Content Rewriting: SEO-optimized content rewriting with target keywords
• Modern UI: Built with Adobe Spectrum design system

Accessing the Application

Once running, open your browser and navigate to:

• Local: http://localhost:3000 (or your specified port)
• Network: http://[your-ip]:3000 (when using --host flag)

Backend Integration

This frontend requires the SEO Backend API to be running:

# Backend should be running at:
http://127.0.0.1:8000

# Check backend health:
http://127.0.0.1:8000/health

# View API docs:
http://127.0.0.1:8000/docs

Troubleshooting

Port Already in Use

If port 3000 is already in use, specify a different port:

npm run dev -- --port 3001

Cannot Connect to Backend

1. Verify the backend is running at http://127.0.0.1:8000
2. Check CORS settings in backend if getting cross-origin errors
3. Ensure firewall/antivirus is not blocking the connection

Module Not Found Errors

Clear cache and reinstall dependencies:

rm -rf node_modules package-lock.json
npm install

Environment

• Framework: React 18
• Build Tool: Vite
• UI Library: Adobe Spectrum
• HTTP Client: Fetch API

Production Build

Build the application for production:

npm run build

The build output will be in the dist/ directory.

Preview the production build:

npm run preview

License

Internal Adobe Tool

Support

For issues or questions, contact the development team.