🔗 BacklinkSpy - Competitor Backlink Analysis Tool

A modern, premium web application for analyzing competitor backlink profiles. Built with vanilla HTML, CSS, and JavaScript, featuring a sleek dark theme with glassmorphism effects.

✨ Features

• Domain Analysis - Enter any competitor domain to analyze their backlink profile
• Real-time Statistics - View total backlinks, referring domains, average DA, and dofollow ratio
• Detailed Results Table - See source domains, anchor texts, domain authority scores, and link types
• CSV Export - Export analysis results to CSV for further analysis
• Filtering Options - Filter by dofollow/nofollow links and include/exclude subdomains
• Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• Modern UI - Dark theme with glassmorphism effects and smooth animations

🚀 Quick Start

1. Clone the repository:

   git clone https://github.com/yourusername/competitor-backlink-analysis-tool.git

2. Open Index.html in your browser

3. Enter a competitor domain and click "Analyze Backlinks"

📁 Project Structure

competitor-backlink-analysis-tool/
├── Index.html      # Main HTML structure
├── style.css       # Styling with CSS variables and animations
├── app.js          # Core application logic
└── README.md       # Documentation

🛠️ Technologies Used

• HTML5 - Semantic markup structure
• CSS3 - Custom properties, Flexbox, Grid, animations
• JavaScript (ES6+) - Modern vanilla JS with no dependencies
• Font Awesome - Icon library via CDN
• Google Fonts - Poppins font family

🎨 Design Features

• Dark theme with deep blue/purple gradients
• Glassmorphism card effects with backdrop blur
• Animated statistics counters
• Staggered row animations in results table
• Color-coded domain authority badges
• Toast notifications for user feedback
• Smooth hover transitions throughout

📊 How It Works

1. Input Validation - Validates domain format before processing
2. Data Generation - Simulates backlink data for demonstration (replace with real API)
3. Statistics Calculation - Calculates and displays key metrics
4. Table Rendering - Displays detailed backlink information with sorting
5. Export Functionality - Generates CSV download of results

🔧 Customization

Adding Real API Integration

Replace the generateBacklinkData() function in app.js with actual API calls:

async function fetchBacklinkData(domain) {
    const response = await fetch(`YOUR_API_ENDPOINT?domain=${domain}`);
    return await response.json();
}

Changing Color Scheme

Modify CSS variables in :root selector in style.css:

:root {
    --primary: #your-color;
    --secondary: #your-color;
    /* ... other variables */
}

📝 Logging System

The application includes a structured logging system for debugging and monitoring:

// Log levels: DEBUG (0), INFO (1), WARN (2), ERROR (3)
Logger.debug('Detailed debug info', { data });
Logger.info('General information');
Logger.warn('Warning message');
Logger.error('Error occurred', error);

To enable debug logs, set Logger.currentLevel = 0 in the console.

🛡️ Error Handling

All critical functions include try-catch blocks with:

• Graceful error recovery
• User-friendly error notifications
• Detailed error logging for debugging

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Getting Started

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature
3. Make your changes following the code standards below
4. Commit with descriptive messages: git commit -m "feat: add new feature"
5. Push and create a Pull Request

Code Standards

• JavaScript: Use ES6+ features, strict mode enabled
• JSDoc Comments: Document all functions with @param, @returns, @example
• Error Handling: Wrap critical operations in try-catch blocks
• Naming: Use camelCase for functions/variables, UPPER_SNAKE_CASE for constants
• XSS Prevention: Use escapeHtml() for user-generated content in HTML

Commit Message Format

Use conventional commits:

• feat: New features
• fix: Bug fixes
• docs: Documentation changes
• refactor: Code refactoring
• style: Formatting changes
• test: Adding tests

📜 License

This project is available for educational and personal use.