Building an app from scratch is now easier than ever using AI. This changes everything for coders. We use Bolt, Claude, & Windsurf here to show you how it’s done, while also demonstrating the problems you’re going to run into while making something.
Below are the prompts that were used to make this:
We need to make an app that will track all the recent UFO sightings in my area and plot them on a map.
– The page should use my current location and then show a map that’s 100 mile radius outward
– The map should let me scroll around and update the location in realtime as i scroll
– Under the map should be a table of the signings that are shown on the map
– The table should list relavent data points that would be good to know
– When I click on a pin on the map of a sighting, or I click on the row of a sighting in the table, the map should center on that pin and make the pin larger with a fun animation and then hide the table and show all the details about that sighting under the map. There should be a back button to go back to the full list
– I want you to use local storage for the database of all the data
– I want you to figure out a way to get all the recent sightings from the web when the page loads and scrolls in real time
– Whenever you’re searching or doing background tasks, show a loading spinner.
– The pins on the maps should be little UFO icons.
– If Aliens were also sighted, then add an alien icon to the pin
– Use color schemes of a modern cyberpunk theme
– The webapp should be in react and using modern ui/ux responsive best practices for desktop and mobile
– Details for the individual UFO page (when clicking on one) should be:
– date of the sighting
– details of the sigthing
– any images if any
– A “UFO-Meter” on likelyhood of it being an Alien (0 = def not Alien, 5 = def alien)
– Links to relavent articels
– How many sightings in that area there were
– Make a navigation system some how that will show relavent menu items that make sense
– Build out 2 more pages that would make this app fun and socially viral
Follow these guidelines:
# Building with bolt.new: Project Structure Guide
## Platform Overview
– Browser-based full-stack development platform
– Generates code from natural language
– Best for MVPs and prototypes
– Supports major frameworks (React, Vue, Next.js)
– May struggle with complex UI/server actions
– Uses WebContainers technology
## Creating a 5-Prompt Structure
### First Prompt Format
– State the final vision
– Specify initial foundational step
– Keep it simple and clear
– No error handling yet
### Remaining Prompts Format (2-5)
Each prompt has two parts:
1. **Fix/Verify**: Address issues from previous step
2. **Build**: Add new visible feature/functionality
### Key Principles
– Each step must show visible progress
– Balance frontend and backend development
– Keep instructions flexible
– Build features incrementally
– Steps should be independent but connected
– DO NOT include any specific frameworks or programming languages
### Effective Prompt Writing
1. **Clarity and Specificity**:
– Write clear, specific, and descriptive instructions to reduce ambiguity
– Use structured organization and delimiters for better comprehension
2. **Task Decomposition**:
– Break down complex tasks into smaller, manageable parts
– Focus on one step at a time
3. **Examples and Context**:
– Include examples (multishot prompting) to enhance output quality
– Provide relevant context for better understanding, especially for complex tasks
4. **Role and Reasoning**:
– Assign specific roles to guide tone and content
– Structure prompts to encourage step-by-step reasoning
– Use chain-of-thought prompting for complex tasks
5. **Optimization Techniques**:
– Request multiple solutions for diverse perspectives
– Refine prompts continuously based on outcomes
– Prefill parts of responses where appropriate
– Use techniques to minimize incorrect or nonsensical information
6. **Advanced Methods**:
– Adapt strategies for specific use cases
– Explore prompt chaining for specialized applications
– Practice with interactive exercises
– Experiment with prompt variations
### Avoiding Common Pitfalls
– Don’t combine too many features
– Don’t write rigid instructions
– Don’t skip verification steps
– Don’t assume perfect execution
– Don’t ignore platform limitations
– Don’t choose the programming languages or frameworks, bolt.new will do that itself
## Template“`markdown
Prompt 1:
“[Project vision + concrete first step]”
Prompts 2-5:
“Fix: [Previous step issues]
Build: [New feature with clear outcome]”
“`
Follow us on your favorite platform for full episodes, shorts, and community feedback:
🔊 Spotify
🆇 X
🪩 TikTok