# Vibe Code an App For ANY Website Source: https://www.youtube.com/watch?v=c0Z2eao4rJU Recap page: https://rapidrecap.app/video/c0Z2eao4rJU Generated: 2025-11-12T16:04:35.214+00:00 --- ## 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. ![Screenshot at 00:11: The Apify interface showing the Komoot API Actor setup, with the Cyprus map in the background, illustrating the initial state before running the test to prove data extraction capabilities.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-00-11.png) **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. ### Initial Setup & Investigation - Installing Apify CLI and Chrome DevTools MVP - Identifying Komoot API endpoints via network inspection - Initial testing using curl and Python scripts to confirm data access. ### Actor Development via AI Coding - Using Claude Code to scaffold the Actor project structure - Defining input schema parameters (Location name, radius, activity type, difficulty) - Running initial tests locally via Codex/Claude Code. ### Apify Deployment & Testing - Successfully logging into Apify via CLI - Running local tests against the Frankfurt query to confirm stability - Successfully pushing the Actor to the Apify account, achieving an 'Outstanding work' rating. ### Frontend Integration & Final Result - Setting up monetization ('Pay per event' for start/result) - Building a custom frontend using FastAPI/Shadcn principles - Testing the live application by searching for cycling routes near Larnaca, Cyprus, which returned 12 routes instantly. ![Screenshot at 00:01: The presenter introducing the topic in a podcast/studio setting, setting the stage for a technical demonstration.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-00-01.png) ![Screenshot at 00:11: The Komoot website displaying hiking routes in Cyprus, used as the target for the scraping Actor.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-00-11.png) ![Screenshot at 00:42: Searching for 'Komoot' on Google, leading to the official site and documentation links.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-00-42.png) ![Screenshot at 00:53: Viewing the Komoot API documentation on Apify, confirming the lack of a publicly accessible API, which justifies building a custom Actor.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-00-53.png) ![Screenshot at 01:21: The Apify $1M Challenge landing page, which serves as the inspiration/context for building a powerful, monetizable Actor.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-01-21.png) ![Screenshot at 02:09: The VS Code terminal environment showing the 'GETTING-STARTED.md' file and instructions for setting up the environment \(installing Apify CLI and Chrome DevTools MVP\).](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-02-09.png) ![Screenshot at 03:23: Executing the apify index -u \[URL\] command in the terminal, pointing the Actor generation tool towards the Komoot discovery page.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-03-23.png) ![Screenshot at 05:51: The custom 'Best Routes Finder' frontend interface loading, showing the location input field ready for testing.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-05-51.png) ![Screenshot at 08:04: The Apify build history showing several failed builds followed by the latest successful build \(0:12\) that lasted 48 seconds.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-08-04.png) ![Screenshot at 09:53: The final 'Publication' tab on Apify showing the Actor strength as 'Outstanding work' and the link to the live Actor store page.](https://ss.rapidrecap.app/screens/c0Z2eao4rJU/00-09-53.png)