Tech Memo's AI Playground: Building a Website with My Daughter Using Bolt.new's "Vibe Coding" — Discover how we built a fully functional e-commerce site for my daughter's soap business, Scrub Club (scrubclubsoap.com), in minutes using Bolt.new's AI-powered website builder. This week's AI Playground experiment explores no-code website development, perfect for beginners. Learn about the free Hackathon challenge, "vibe coding," and how this innovative AI tool simplifies website creation, even with limited coding experience
This summer, my daughter and I built her soap business website, ScrubClubSoap.com, using Bolt.new's AI-powered website builder. With zero coding experience, we leveraged Bolt's free Hackathon tokens (normally a $20/month subscription) for a weekend project. This "vibe coding" experience resulted in a fully functional e-commerce site in minutes, showcasing her handcrafted soaps with AI-generated descriptions. Learn how we did it!
Experience the power of "vibe coding" with Bolt.new! My daughter and I, complete coding novices, built her Scrub Club soap website in minutes using Bolt's AI-powered platform. We leveraged a free 10 million token Hackathon offer (a $20/month value) to create a stunning e-commerce site. Bolt's intuitive design makes no-code website development easy and fun, even for beginners. See the results: scrubclubsoap.com
Scrub Club's New Website: Built with AI! See how we used Bolt.new's AI coding tools to create Scrub Club's website in minutes. No coding experience needed! Check it out: scrubclubsoap.com
Using Bolt.new's AI-powered website builder, we quickly created a stunning online store for Scrub Club soaps. Within minutes, we uploaded photos and a basic site description, and Bolt automatically added the images to the correct sections. The result? A beautiful website showcasing Tessa's unique, handcrafted soaps—from elegant leaf-pressed bars to whimsical unicorn designs—now live at scrubclubsoap.com
Discover Scrub Club's handcrafted artisan soaps: a captivating collection boasting unique shapes, colors, and scents. From elegant leaf-pressed soaps with stunning gradient effects to whimsical unicorns and vibrant autumn maple leaves, each bar is a testament to quality and creativity
Bolt's consistently positive and encouraging feedback was a surprisingly endearing feature. Even with our poorly defined requests, the AI coding tool remained supportive, sometimes exhibiting an almost overly enthusiastic attitude. This positive "vibe coding" experience made the process enjoyable, even for novice coders
During our Bolt.new AI website building experiment, editing product listings caused an unexpected issue: the Scrub Club logo was mistakenly added as a new product. Removing this required an additional request. Further edits led to more unusual updates and errors, highlighting the tool's occasional instability despite its user-friendly "vibe coding" approach
Bolt AI: A Vibe Coding Review – Honest Impressions from a No-Code Website Build
My daughter and I used Bolt.new's AI-powered website builder to create her soap business website, Scrub Club (scrubclubsoap.com). While Bolt's ease of use and positive feedback were impressive (it even crafted charming product descriptions!), we encountered some inaccuracies in its generated content. This review shares our experience with "vibe coding" and reveals the tool's strengths and limitations
Bolt's AI-powered website builder enthusiastically described Tessa's Scrub Club soaps, even inventing an "ocean breeze scent" for a blue bar—a detail Tessa hasn't yet achieved. This highlights Bolt's user-friendly nature and positive, albeit sometimes overly eager, approach to "vibe coding," even with inaccurate details
AI Coding Tool Fails the Smell Test: My Daughter's Soap Business and a Bolt.new Adventure. Using Bolt's AI-powered website builder for my daughter's Scrub Club soap business yielded surprisingly positive (if inaccurate) results. While the tool flawlessly generated a website, its descriptions – "lavender and vanilla fragrance," "candy and berry scent," and a "spice"-scented yellow moth soap – were entirely fabricated! This highlights the limitations of current AI in understanding nuanced sensory details like scent, despite the impressive ease of "vibe coding" offered by platforms like Bolt. See the finished Scrub Club website: scrubclubsoap.com
To refine our Scrub Club website built with Bolt, an AI website builder, we instructed the platform to eliminate all scent and smell references from the product listings while preserving all other content
Bolt's AI-powered website builder initially presented challenges. To avoid unintended changes, we needed to provide highly specific instructions. Previous requests for modifications resulted in unexpected and incorrect alterations, highlighting the need for precise guidance during the design process
Bolt's AI website builder flawlessly removed scent descriptions from our Scrub Club website without impacting other content, showcasing its powerful editing capabilities
Bolt's AI website builder now prioritizes visually appealing product descriptions, showcasing colors, shapes, and designs. Pricing, layout, and functionality remain unchanged. Perfect for novice users, Bolt's "vibe coding" approach simplifies website creation, even for complex product catalogs like Scrub Club's handcrafted soaps
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.
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.
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
A Checkout Process
Key Features
Bolt also described the ordering process clearly. When customers place an order:
“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.
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.”
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.
I sent the website to my editor Akin Oyedele and asked for feedback. Here’s his review:
What he liked:
What he didn’t quite like:
At this point, I broke the news to Akin about Bolt’s over-eager scent descriptions!
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.
Source: Original Article