Alistair Barr/Business Insider
- Coding novices used Bolt AI to create a website for a soap business in about 6 hours.Bolt, a vibe coding tool, simplifies website creation for users without coding skills.Despite some errors, Bolt AI enabled a functional site with payment integration via Stripe.
I write a newsletter for Business Insider called Tech Memo. There's a section called AI Playground where I use a new generative AI tool every week. My latest experiment took me and my daughter deep into the world of AI coding tools.
We got started on a Sunday on the couch in early June. My daughter Tessa was back home from Wake Forest for part of the summer. She has a soap business called Scrub Club and wanted a website to promote and sell her products.
So we logged into Bolt.new and signed up for the company's Hackathon challenge. This gave us 10 million tokens to use for free. Normally, a subscription like this would cost $20 a month. Bolt is designed for novices, like us, who have no software coding experience. It's part of a new breed of AI tools that have spawned the term "vibe coding."
Here's how our vibe sessions went. Spoiler alert: The Scrub Club website is up and running. Let us know what you think: scrubclubsoap.com
Getting started
We started by uploading some photos of Tessa's soaps, along with a rough description of the website she wanted. Bolt created the site within a couple of minutes, added the soap photos to the correct sections of the site, and updated us:
"Your collection now showcases an amazing variety of unique shapes, colors, and scents — from elegant leaf-impressed bars with beautiful gradient effects to whimsical unicorns and vibrant autumn maple leaves. Each product maintains the handcrafted artisan quality that makes Scrub Club special!"
This was an endearing feature of Bolt. No matter how crap our ideas or requests were, the tool retained a positive and supportive attitude. Sometimes, it was overly eager, in fact.
Mistakes and stuff that wasn't true
When we edited some of the product listings, it took the header image of the Scrub Club logo and incorrectly put it as a new product listing. We had to type in another request to remove that. And as the afternoon progressed, the more we tweaked and fiddled, the more odd updates and mistakes the tool made.
The Bolt tool added some things that were not entirely true, to put it mildly:
- It listed bestsellers that were not the top-selling productsIt added customer reviews, saying things like "14 ***** Reviews" when there have been very few reviews online for Tessa's soaps so far.It also kept insisting on saying Scrub Club had "+100 Happy Customers." The real number (so far!) is just over 20.
Bolt was particularly over-eager when it came to describing the soaps Tessa made and listed on the Scrub Club site. For one of her blue soap bars, it mentioned "ocean breeze scent." Tessa has not managed to bottle the smell of the sea yet for her products.
Bolt also highlighted "lavender and vanilla fragrance," "candy and berry scent," and decided that a yellow moth-shaped soap smelled of "spice." None of this is true, although my daughter's soaps do smell nice! There's been some early research on trying to get machines to understand different smells, but that's clearly not embedded in the AI models supporting Bolt's coding tool yet.
Getting prescriptive
So, we asked Bolt to "Keep everything else the same, but remove references to scents and smells from the product listings."
We had to be prescriptive like this because when we asked for other changes earlier, Bolt would make the tweaks but would also change other things and get them wrong, which was frustrating.
This time, though, Bolt removed all mentions of scent and smell without messing up other things on the site.
"The product descriptions now focus on the visual aspects like colors, shapes, and designs instead of any olfactory elements. Everything else remains exactly the same, including pricing, layout, and functionality," Bolt told us in its chirpy tone.
By the evening on Sunday, we had a website with many of Tessa's soaps listed. It had Tessa's Scrub Club logo, pricing details, a contact form, and links to Tessa's Etsy store and her Scrub Club Instagram account.
We wanted to add the ability to accept payments. Things got a little complicated at this point. So we put the project on pause and fired up Netflix with some pizza for the rest of the evening. By then, we had 9.4 million tokens left in our Bolt account.
Integrating Stripe payments
About a week later, we logged back onto Bolt.new and tried to add Stripe to Tessa's Scrub Club website. Stripe is the main way developers add the ability to accept card and online payments for their sites and apps.
We clicked on an "Integrations" button on the top right of the Bolt page and Stripe appeared in a dropdown menu along with Supabase and GitHub. We chose Stripe and Bolt told us this:
"To implement payments in your application, we'll need to use Stripe, which is the industry standard for secure payment processing. Before we can proceed with the integration, you'll need to:
Create a Stripe account if you haven't already
Once logged in, navigate to the Developers section in your Stripe Dashboard
Get your Stripe secret key
Once you have your Stripe secret key, let me know and I'll help you implement a secure payment system in your application."
We were sent over to Stripe's website and created an account there, and tracked down our secret API key pretty easily on the developer page. We copied this long string of characters, then we went back to Bolt and pasted the key into the right place.
Then we went back to Stripe and looked for what to do next. Things got pretty confusing at this point (well, for us anyway!). We ended up on a page that required us to create new products and set pricing, shipping, sales tax rates, and other complex stuff.
Just asking Bolt to do it
So, we gave up and just went back to Bolt and typed in "We added our secret API key from Stripe. What do we do now?"
Bolt replied reassuringly: "Perfect! Now that you have your Stripe secret key set up, I'll integrate Stripe payments into your Scrub Club website. I'll add a complete payment system with a shopping cart, checkout process, and order confirmation."
Then it did all the coding work and added the following features:
A Shopping Cart System
- Cart Context: Global state management for cart itemsAdd to Cart: Buttons on all product cards that add items to cartCart Drawer: Slide-out cart showing items, quantities, and totalCart Badge: Shows item count in the header
A Checkout Process
- Customer Information Form: Collects shipping details and contact infoOrder Summary: Shows all items and total before checkoutOrder Confirmation: Success page after order placement
Key Features
- Quantity Management: Increase/decrease quantities in cartRemove Items: Delete items from cartPrice Calculations: Automatic total calculationsResponsive Design: Works perfectly on mobile and desktopEmail Integration, with customer orders sent directly to Tessa's email address.
Bolt also described the ordering process clearly. When customers place an order:
- They fill out their information and review their cartThe system sends an email to Tessa with all order detailsShe can then contact them directly to arrange payment via Venmo, PayPal, etc.
"This gives you full control over the payment process while providing a professional shopping experience," Bolt said.
"The cart icon in the header shows the number of items, and customers can easily add products, review their cart, and place orders. The system is production-ready and will help streamline your order process!" we were also told.
Deploying via Netlify
We then clicked the blue "Deploy" button at the top right corner of the Bolt page. This connected us to Netlify, a company that hosts websites and apps created with Bolt.
After about one minute, Bolt told us the site was deployed and gave us a URL link to check it out online.
This all seemed too easy, so we double checked: "Does this website work fully now, or do we have to do anything else?" we typed the Bolt query box.
It replied, saying the site was "fully functional!" and summarized everything we'd created, including a shopping cart, a checkout process, and a product catalog.
It also shared a useful reminder about the payment process. The checkout page explains to customers that Tessa will contact them directly for payment, "which is perfect for a small business. No monthly fees or complex payment processing needed."
Claiming our project and picking a domain
One wrinkle at the end: Bolt said that to claim this project for ourselves, we had to go to Netlify's website and do a few more things. It provided a link for us to click.
We followed that and were asked to create a Netlify account, which we did. Then we were taken straight to the page where we could claim the project. Note: If you don't do this, someone else might get hold of your claim link and grab your site for themselves and change it. Not good.
Once the project belonged to us, we tried to buy a custom domain via Netlify. We chose scrubclubsoap.com, which cost $15 for the first year. We were told to wait about 10 minutes, so we hung some laundry out to dry in the garden, then came back.
By then, it was all done, including encryption certificates and other important stuff that we really didn't want to be bothered with.
A review from my editor
I sent the website to my editor Akin Oyedele and asked for feedback. Here's his review:
What he liked:
- The photos were sharp and consistent.The soap shapes themselves were creative.The website overall looked clean and professionally done.My browser didn't warn that the site wasn't secure.Most of the links worked.
What he didn't quite like:
- The logo was underwhelming compared to the visual quality of the photosWhen he tried to add more than one of each soap, he had to press the "add to cart" button multiple times. Usually, a counter with plus and minus signs pops up on that button on other websites.The heart buttons on some of the soaps didn't do anythingHe wished there were descriptions of how the soaps smell.
At this point, I broke the news to Akin about Bolt's over-eager scent descriptions!
A final tweak and thoughts
In response to his feedback, we went back into Bolt and asked the tool to make the Scrub Club logo larger. It did that, but then cut off the top of the rest of the site.
We got a little whiny at this point and sent this to Bolt: "You've cut off the top of the rest of the website now. Can you fix that please?"
Bolt responded by saying, "You're absolutely right!" and went about addressing the problem. That took about two minutes, and then we asked it to deploy the site again to Netlify, which it did in about five minutes.
At the end of all this, we had 8.9 million tokens left in the Bolt account. So we'd used 1.1 million.
All in all, this was a relatively easy lift for two people with no software coding experience. When we were stumped by what to do next, we often just typed questions into Bolt without thinking too much about the prompts. This worked almost always. Sometimes, we had to repeat requests or get more specific and prescriptive, but that wasn't too much extra work.
Total time spent on the project: About six hours. For two people with no coding background, the experience was surprisingly smooth — proof that AI tools like Bolt can empower anyone to build a real website.
Sign up for BI's Tech Memo newsletter here. Reach out to me via email at abarr@busienssinsider.com.
