Introduction: The Million Dollar App Challenge
Windsurf Rules I used in the video:
- You are an expert in TypeScript, React Native, Expo, and Mobile UI development
Can you really steal a million-dollar app idea using AI?
Today, we're going to find out.
We'll be rebuilding an app that generates $24 million yearly by letting users track calories with food photos. The surprising part?
It wasn't built by a massive team, but by teenagers still in school.
The Game Plan
- Create Project context using Braindumper
- Build the app with AI using Windsurf and MCP
- Deploy to the App Store
Step 1: Project Setup with BrainDumper
First, head to braindumper.ai and choose Windsurf. This tool helps create the project context, making it easier to build the app.
What You Need to Do
- Use BrainDumper to generate your project plan (5 free generations/month)
- Download Node.js for NPM and NPX commands
- Use Mobbin to copy professional UI designs
Step 2: Building the App with Windsurf
With our project context ready, it's time to build. Here's the process:
- Create a new project:
- Install required packages (camera, image picker, notifications)
- Set up the app structure (onboarding, auth, home, components)
- Add Supabase for backend and authentication
- Implement Google Cloud Vision API for food recognition
Step 3: Using Mobbin for UI Design
Mobbin is our secret weapon for stealing professional UI. It's a massive library of successful mobile apps, screen by screen.
We took inspiration from:
- Lifesum
- MyFitnessPal
- MacroFactor
And copied entire flows into Figma for a polished UI.
Step 4: Setting Up Figma Integration
To integrate Figma projects in Windsurf, follow these steps:
-
Go to Windsurf → Advanced Settings → Cascade → MCP → Click "Add server"
-
In Figma:
- Click logo top left → Help & Account → Account Settings
- Go to Security and generate a Personal Access Token
- Paste this token in Windsurf
-
Copy the Figma project URL from your browser and paste it in Cascade
-
Prompt: "Use these screenshots as UI inspiration"
💡 Windsurf now has access to ALL the screenshots in your Figma file.
Step 5: Deploying to App Store
Deployment is surprisingly straightforward:
Option 1: Full Command Flow
Option 2: One-Liner
Once approved, share your TestFlight with friends.
Final Thoughts: The Power of MVP
We built a calorie counter app in under an hour that looks as polished as many apps on the App Store.
But here's the real insight: Cal AI's success wasn't just tech—it was marketing.
They started as a simple ChatGPT wrapper and scaled into a multimillion-dollar business.
With today's AI tools, you can launch an MVP faster than ever. The question is: what will you build?