The $100K One-Page App
I discovered a one-page productivity app that has been downloaded by over 10 million people and generates $100k every month. The insane part? It's just a simple countdown app.
While everyone is trying to build complex apps and learning to code, I'm going to teach you how to replicate this one-page app using AI - and how you can start making money from day 1.
By the end, you'll have a fully working mobile app on your phone that turns your focus sessions into a personal universe of stars and constellations.
The Plan
- Use a free tool to turn your app idea into perfect prompts for AI
- Set up Claude Code to build the entire app step by step
Just a year ago, building a productivity app like this would've cost you $30,000 and taken 3 months with a team of developers. Now, you can do it yourself in just a few hours with zero coding experience.
Step 1: Planning the App
Use Braindumper to Create Your App Blueprint
Head over to Braindumper.ai. It's a completely free tool that turns any app idea into perfect prompts that work with any AI app builder. This first step will save you hours of back-and-forth with the AI later.
Since we're building a mobile app, select that option.
Brain dump your idea: Don't hold anything back. The more details you give, the better your final prompt will be. This is one of the most important principles in AI app building: detailed context equals better results.
After you've brain dumped your entire app idea, click "Generate." The AI agent will simplify your idea down to an MVP (Minimum Viable Product) - the simplest version of your app that still solves the core problem for users.
This step is crucial because it helps you actually ship the app instead of spending weeks building something nobody wants.
Step 2: Building the Frontend
Setting Up Windsurf
Download and launch Windsurf. You'll get 250 free credits when you sign up with this link. Windsurf costs $15 a month for 500 prompt credits - way more transparent pricing than alternatives.
Pro tip: Use code "BWAI20" at checkout for 20% off - just $12/month instead of $15.
- Click "Open folder" and create a new folder for your app (I called mine "Stellar")
- Head back to Braindumper and download the context file
- Drag this file into your Windsurf folder
This context file is your app's blueprint - a detailed instruction manual that the AI will use to understand exactly what you want to build.
Installing Claude Code
- Head to the extensions tab in the left sidebar
- Search for "claude code for vs code"
- Install it and click the icon to go back to the main tab
Running Claude Code
- Press
Ctrl + Shift + Pand type "run claude code" - hit enter - Choose your theme (I'll go with dark mode)
- Authenticate with your Claude account or API
API Authentication is usually the smarter choice if you're just starting out - you only pay for what you actually use.
- Hit enter to start, choose "Yes, use recommended settings"
- Trust all files in the folder
Head to console.anthropic.com, log in, and top up around $20 to your developer account.
Building with Claude Code
Type /help to see available commands.
Select the model: Type /model and choose "Opus Plan mode" since we're building the entire app. Planning first means fewer errors later.
Initialize the project: Type /init and tag your context file by typing @ - the file will pop up.
Claude Code will create a CLAUDE.md file using the context from Braindumper to plan out the entire app build.
When prompted to make edits, choose "Yes, allow all edits during this session."
Start the build: Prompt Claude:
Hey Claude, check the context files and build the app as per the instructions given. Think hard and use todos to build the app step by step.
The AI will plan everything in a to-do list:
- Set up project structure
- Configure Supabase
- Implement user authentication
- Create core screens
- And more
When Claude wants to run commands like npx create-expo-app@latest . --template blank-typescript, hit enter for yes. If something fails, the AI adapts and finds another way - you don't need to panic.
What Claude Builds
Watch as Claude creates:
- Project structure with screens and components
- Supabase integration for the backend
- User authentication flow
- Home screen with the timer
- Stars/constellation screen for the reward system
- Navigation between screens
- Notification system for focus sessions
- Detailed animations for a professional feel
When done, run the app with: npx expo start
Step 3: Building the Backend
Before using the app, we need to connect Supabase for user authentication and data storage.
Setting Up Supabase
- Find the
.env.examplefile - these are the 2 Supabase API keys needed - Go to supabase.com and create an account (it's free)
- Create a new organization and project
- On the project page, find the "Project API" section
Adding API Keys
In Windsurf, update your .env file:
- Copy your Project URL from Supabase and paste it for
EXPO_PUBLIC_SUPABASE_URL - Copy your API key and paste it for
EXPO_PUBLIC_SUPABASE_ANON_KEY
Setting Up the Database
- Open the
database-schema.sqlfile (auto-generated by Claude) - Copy all the content
- In Supabase, go to the SQL Editor tab
- Paste the content and click "Run"
Got an error? Copy it, paste it in Claude Code with the context:
This is the error I got while running the @database-schema.sql file
Claude will fix the schema. Re-run the updated script in Supabase.
Once successful, check the Table Editor to see your new tables - this is where all app data gets saved.
Step 4: Testing the App on Your Phone
This is the moment of truth.
- Download Expo Go from the App Store or Play Store
- In Windsurf, navigate to your app folder:
cd your-app-folder - Run:
npx expo start - Scan the QR code with Expo Go
Exploring the App
- Sign up to create a user in Supabase
- Constellations tab - empty until you create some
- Profile tab - customize timer durations
- Create a constellation - start working and watch stars light up!
The notifications work too - you'll get notified when focus sessions complete.
Step 5: Deploy to the App Store
To deploy, you need two accounts:
- Expo Dev account (free) - expo.dev
- Apple Developer account ($99/year) - developer.apple.com/account
Build for TestFlight
Run:
Bashnpx testflight
- Log into your EAS (Expo) account
- Configure the EAS project when prompted
- Accept the default iOS bundle identifier
- Log into your Apple account
- Complete 2FA if enabled
- Enable push notifications when asked
The build starts and uploads to Expo's pipeline.
Monitor Your Build
- Check your Expo dashboard to see the build in queue
- In your Apple Developer dashboard, go to Apps → TestFlight
- Once the build lands, you'll receive a TestFlight invite
Install the app on your iPhone like any other TestFlight app!
Key Takeaways
- Detailed context = better results - Don't skip the Braindumper step
- Plan mode prevents errors - Let AI think through the entire build first
- AI adapts to failures - When commands fail, the AI finds another way
- Start simple - MVP first, features later
- Test early and often - Run on your phone throughout development
What's Next?
If you're serious about building with AI, join our free community where thousands of builders share projects, get feedback, and help each other solve problems.
Happy building!