Frontend

React-based frontend for the Sitemap Crawler application.

Features

  • Clean, responsive UI built with TailwindCSS
  • Real-time feedback during crawling
  • Detailed results display
  • Error handling and validation
  • Mobile-friendly design

Components

App.tsx

Main application component that handles:

  • Form submission for sitemap URL
  • API communication
  • Results display
  • Loading states
  • Error handling

UI Elements

  • Input Form: URL validation and submission
  • Loading State: Spinner and progress indication
  • Success Results: Found URL with link
  • Error Display: Detailed error messages
  • Summary: Crawl statistics and URL list
  • Expandable Details: Collapsible list of all crawled URLs

Styling

Uses TailwindCSS via CDN for:

  • Responsive grid layouts
  • Color-coded result states (green/yellow/red)
  • Hover effects and transitions
  • Mobile-first design