Vibe Code an App For ANY Website

Quick Overview

The creator successfully built and deployed a custom Apify Actor using Vibe Code and Claude Code, which scrapes hiking and cycling route data from Komoot, populates a custom frontend interface, and earned an "Outstanding work" rating, demonstrating a powerful no-code/low-code approach to building complex web scrapers.

Key Points: The creator built a custom Komoot Route Finder Actor using Vibe Code and Claude Code, which successfully scraped route data from Komoot. The Actor development involved several stages: setting up Apify CLI, installing Chrome DevTools MVP, using the Komoot API discovery, and running local tests via Codex/Claude Code. The resulting Apify Actor achieved an "Outstanding work" rating on Apify's platform after passing testing, indicating high quality. The custom web application frontend, built using ui.shadcn principles and a FastAPI backend, successfully retrieved and displayed 12 cycling routes near Larnaca, Cyprus, using the scraped data. The creator demonstrated the ability to monetize the Actor on Apify via 'Pay per event' pricing, setting up costs for 'Actor Start' and 'Result' events. The entire process, from initial scraping investigation to final deployment, was accelerated by using AI coding assistants like Claude Code for generating boilerplate and testing scripts.

Context: The video details a technical tutorial demonstrating how to use Vibe Code and Claude Code—AI-assisted coding tools—to quickly build a functional web scraping 'Actor' for the Komoot route planning platform. The goal was to bypass Komoot's lack of a public API by creating a custom scraper that browses the site, extracts detailed route information (like distance, elevation, difficulty, and photos), and presents it in a custom-built frontend application powered by FastAPI and Shadcn UI principles.

Detailed Analysis

The video serves as a comprehensive tutorial on building a custom web scraping Actor for Komoot using AI coding assistance (Vibe Code/Claude Code) and the Apify platform. The process began by confirming that Komoot lacks a public API, necessitating a web scraping solution. The creator used Apify CLI to log in and installed the Chrome DevTools MVP extension to monitor network requests, identifying key endpoints for route data, including discovery and detail endpoints. After running initial tests using curl and Python scripts, the creator scaffolded the Apify Actor project structure using Claude Code. Key steps included defining the input schema to allow users to specify location, activity type, distance, and difficulty, and then successfully executing the crawl to retrieve route data, including 12 cycling routes near Larnaca, Cyprus. The resulting data was verified for completeness (including GPS geometry, photos, and popularity scores). Finally, the Actor was configured for monetization ('Pay per event') on Apify, achieving an 'Outstanding work' rating. The video concludes by showcasing the custom frontend application, powered by FastAPI and Shadcn principles, successfully querying the newly deployed Actor and displaying the route results.