TL;DR: This guide shows you how to use Bolt.new to build a mobile app. We'll rebuild PuffCount, an app that cost over $20,000 to build and took months to develop originally but now makes over $40,000/month and sold for more than $1 million.
FREE App-Validation Checklist
PREVIEW →
1. Identify a Viral App Idea
Before building anything, it's crucial to understand why an app idea will succeed. The app we're focused on is called PuffCount. It's a simple app where you tap a button every time you vape, track your daily usage, and get help to quit.
The genius of PuffCount lies in its ability to solve a deep, emotional problem. It's not just another habit tracker; it helps people stop something they hate doing and feel proud in the process. This emotional pull is key to its success and makes it easy to market. You can pitch the whole idea in just three words: "Quit Vaping App".
The 3-Part Test for Viral App Ideas:
- Does it solve a painful or emotional problem? If the problem doesn't hurt, people won't care or pay to use it; there's no real need.
- Can you explain it in 3 words or less? Simple ideas go viral. Your app needs to be understood within 2 seconds, especially for social media marketing.
- Would users want to share it without being asked? If the app makes users feel good, look smart, or win, they'll tell everyone about it and market it for you.
2. Turn the Idea Into a Buildable Plan (Braindumper.ai)
Now that you have your idea, it's time for a shortcut. Instead of spending hours mapping out app details, you can use Braindumper.ai, a completely FREE tool that turns your app ideas into buildable project plans, optimized for tools like Bolt.new.
Here's how to use it:
- Go to Braindumper.ai
- Choose Bolt.new
- Brain dump your app idea with its core features and how it works
- Submit and wait 30-60 seconds
- Copy the generated context
3. Build the App (Bolt.new)
With your plan ready, paste the entire context into Bolt.new. Before hitting generate, review the plan carefully and remove unnecessary features that don't belong in your MVP.
For the PuffCount app, we removed advanced features like "usage pattern detection" and "predictive tracking" as they were too complex for a first version. The goal is a simple but functional app to ship fast.
Once everything looks good, click generate! Bolt will build the entire app using React Native and Expo, which allows you to build for iOS, Android, and web from the same codebase.
After generation, our app had four main screens:
- Home: The main screen with a "Log Puff" button and a 24-hour timeline
- Timeline: A detailed view of habits, including peak usage and average hits per hour
- Statistics: Lifetime stats like total puffs, money saved, and longest streak
- Settings: A simple page for personal details and device info
4. Add Backend and Authentication (Supabase)
Next, add a real backend so users can create accounts, stay logged in, and save their data. We'll use Supabase for this.
Here's how to integrate Supabase:
- In Bolt, go to the top-right corner, click on Integrations, and select Supabase
- Click "Create new project," name it, and choose a database password
- You'll be redirected to Supabase; create an organization if it's your first time
- Hit "Authorize Bolt" to connect Supabase to your project
- Back in Bolt, prompt: "I've created a project and connected Supabase"
- Accept "Apply Supabase Migration" when prompted
To test your authentication, sign up with any email, verify your account in the Supabase Dashboard, and test data saving by clicking the "Log Puff" button multiple times. Just like that, you have a working app with actual user accounts and data storage!
5. Bonus: AI Feature (DeepSeek API)
Now let's add an AI feature that the original PuffCount doesn't even have:
- Go to platform.deepseek.com and sign up
- In the left sidebar, click on API Keys, then "Create new API key"
- Name it "PuffCount v2" and copy the key
- Back in Bolt, prompt: "Now let's build out the AI feature of the app. It should be a simple way to chat with the database by using Deepseek's API."
- After Bolt processes, add your API key to the .env file and update app.json
- Refresh your app and test the new AI Chat feature
6. Test the App on Your Phone (Expo Go)
It's time to see your app on a real device:
- Click the "Device Preview" button in Bolt to display a QR code
- Download Expo Go on your phone
- Open your camera app and scan the QR code
- Open the link to launch your app in Expo Go
Create a new account to test the full experience. You can tap the "Log Puff" button, browse all pages, and see everything working just as it does on your computer. This app is actually ready to submit to the App Store!
7. Upgrade the UI (Mobbin)
The app works, but to be taken seriously, it needs to look premium. Let's upgrade the UI:
- Visit Mobbin.com, a design library with screenshots from major apps
- Filter by Most Popular and Platform: iOS
- Browse designs from successful apps like Duolingo, Coinbase, and Airbnb
- Save your favorite designs to a collection (e.g., "PuffCount v2")
- Copy the screenshots and paste them into Bolt (up to 5 at a time)
- Prompt Bolt: "Use these images of Duolingo's app screens as inspiration for our UI design."
Once Bolt generates the new UI, preview it again on your device. You'll notice the onboarding flow is cleaner and the entire app looks more professional and premium.