# How To Build a $100K “1 PAGE” App With Claude Code Source: https://www.youtube.com/watch?v=7hW5VNjMou0 Recap page: https://rapidrecap.app/video/7hW5VNjMou0 Generated: 2025-11-30T18:02:51.768+00:00 --- ## Quick Overview The video demonstrates how to build a fully functional mobile productivity app called Stellar in about 15 minutes by leveraging the AI code generation tool Claude Code, using Windsurf as the AI IDE and Supabase for the backend, culminating in the app successfully running on a phone with all core features implemented. **Key Points:** - The entire mobile app, Stellar (a Pomodoro timer with constellation rewards), was built using AI code generation tools, specifically Claude Code within the Windsurf IDE, integrated with Supabase for the backend. - The process involved five main steps: turning the app idea into a detailed prompt using BuildwithAI's 'Braindumper', setting up Claude Code, building the frontend/backend via AI commands, and finally testing on a physical device. - The AI successfully generated the entire codebase, including complex features like Supabase integration, user authentication, timer functionality, and star/constellation visualization, which would traditionally take months and cost around $30,000. - The demonstration shows the AI handling errors, such as dependency conflicts during npm install, by automatically correcting the commands (e.g., adding '--legacy-peer-deps' flag). - The resulting app features core components like a customizable Pomodoro timer, phone usage detection, star-based rewards, and push notifications, all functional upon completion of the AI build process. - The final step involves running the app on a mobile phone using Expo Go, demonstrating that the AI-generated application is fully operational after setting up development accounts (Expo Dev Account and Apple Developer Account). ![Screenshot at 02:09: The development plan screen in Braindumper showing the two main steps: using a free tool to create the prompt, and setting up Claude Code to build the entire app step-by-step.](https://ss.rapidrecap.app/screens/7hW5VNjMou0/00-02-09.png) **Context:** This tutorial showcases an advanced application of AI in software development, specifically demonstrating how large language models (LLMs) like Claude, accessed via specialized tools like Claude Code (an extension for Windsurf IDE) and Braindumper (for prompt generation), can rapidly prototype and build a complete, functional mobile application. The app being built, 'Stellar,' is a productivity tool based on the Pomodoro technique where focus sessions earn users stars to form constellations, requiring a complex stack including React Native/Expo for the frontend and Supabase for the backend. ## Detailed Analysis The video details a rapid development process for a mobile productivity app called Stellar, which uses a Pomodoro timer structure where completed focus sessions earn users stars to build constellations. The creator accomplishes this in five steps using AI tools. Step 1 involves using 'Braindumper' to translate the detailed app idea (which includes React Native/Expo, Supabase backend, and constellation visualization) into a refined prompt. Step 2 focuses on setting up 'Claude Code' within the Windsurf IDE by installing the extension, logging into the Anthropic Console, and initializing the project using the generated context file. The AI then proceeds to build the app structure, configure Supabase (including setting up tables like 'profiles', 'constellations', and 'sessions' via SQL execution), implement authentication, and create the required screens (Home, Constellation View, Profile). The AI successfully handles several errors, such as dependency conflicts during package installation by proposing and executing corrected commands. Step 4 covers running the app locally via 'npx expo start' and linking it to Expo's build services (EAS) by logging in with Expo and Apple Developer accounts, allowing remote iOS builds. Finally, Step 5 confirms the app runs on a mobile device, showing the timer, star rewards, and notifications functioning correctly, demonstrating the entire development lifecycle completed rapidly via AI assistance. ### Step 1 - Turning App Idea into Perfect Prompt: Using Braindumper tool - Inputting detailed project description - Outputting the final prompt for AI ### Step 2 - Setting-Up Claude Code: Installing Claude Code for VS Code extension in Windsurf - Authenticating with Anthropic Console account (API usage billing) - Selecting Opus Plan Mode for complex builds ### Step 3 - Building the Backend: AI generates Supabase connection keys and database schema SQL - SQL script creates 'profiles', 'constellations', and 'sessions' tables with RLS policies - AI implements Supabase Auth flow ### Step 4 - Running App On Phone: Initializing Expo React Native project using 'npx create-expo-app' - Installing required dependencies (Supabase, React Navigation, etc.) - Logging into Expo EAS using email/password and 2FA to prepare for mobile build - Generating necessary Apple credentials (Developer Portal ID, Provisioning Profile) ### Step 5 - Testing the App: App is tested by running 'npx testflight' command to initiate the build pipeline - Successful build results in an iOS App Store submission build via EAS - Final confirmation shows all features, including timer and notifications, are functional on the phone ![Screenshot at 00:01: The initial screen displaying the 'Forest: Stay Focused' productivity app concept and download links.](https://ss.rapidrecap.app/screens/7hW5VNjMou0/00-00-01.png) ![Screenshot at 00:04: Visual representation of the productivity app's success: 10M+ downloads and $100K generated every month.](https://ss.rapidrecap.app/screens/7hW5VNjMou0/00-00-04.png) ![Screenshot at 01:13: The Braindumper interface prompting the user to select a platform, with 'Mobile App' being chosen for the Stellar project.](https://ss.rapidrecap.app/screens/7hW5VNjMou0/00-01-13.png) ![Screenshot at 03:04: The detailed context file \(context.md\) generated by Braindumper, containing comprehensive specs for the AI.](https://ss.rapidrecap.app/screens/7hW5VNjMou0/00-03-04.png) ![Screenshot at 08:55: The summary slide listing the five major steps completed to build the app, showing the backend connection as the next item.](https://ss.rapidrecap.app/screens/7hW5VNjMou0/00-08-55.png)