logo
I vibe coded a website with my daughter using AI. We're complete novices. Here's what happened.

I vibe coded a website with my daughter using AI. We're complete novices. Here's what happened.

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 products
It 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
A Checkout Process
Customer Information Form: Collects shipping details and contact info
Order Summary: Shows all items and total before checkout
Order Confirmation: Success page after order placement
Key Features
Quantity Management: Increase/decrease quantities in cart
Remove Items: Delete items from cart
Price Calculations: Automatic total calculations
Email 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 cart
The system sends an email to Tessa with all order details
She 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 photos
When 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 anything
He 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.

Orange background

Try Our AI Features

Explore what Daily8 AI can do for you:

Comments

No comments yet...

Related Articles

A surprising number of tech leaders think AI will mean more hiring for their teams
A surprising number of tech leaders think AI will mean more hiring for their teams

Business Insider

time35 minutes ago

  • Business Insider

A surprising number of tech leaders think AI will mean more hiring for their teams

Tech workers, take heart — artificial intelligence might actually be good for your job prospects. In a recent survey, nearly seven in 10 tech leaders said they planned to increase the number of people on their teams because of the expansion of generative AI. The possibility of increased demand for tech talent is welcome news after years of industry layoffs and following recent comments from high-profile tech CEOs, including Amazon's Andy Jassy, who warn that AI is coming for some jobs. The newly released findings from Deloitte are based on a March survey of some 600 chief information officers, CTOs, and other tech leaders. In it, 69% of tech leaders said they planned to boost their team's size because of GenAI. Such plans are a sign that many leaders are going to step back and think about the expertise they'll need as AI makes rapid advances in its capabilities, Anjali Shaikh, a managing director at Deloitte, told Business Insider. She said that will mean, among other things, asking what types of skills will be needed as AI takes on more work. Other questions will include how roles might evolve to incorporate AI. For example, people working in cybersecurity could see their day-to-day activities change as AI absorbs more duties related to fortifying digital infrastructure. Beyond that, Shaikh said, many new roles are likely to combine technical chops with so-called soft skills. Workers, build your skills The prospect of a workplace crowded with tech like GenAI and AI agents — autonomous software programs — has, at times, raised uncomfortable questions about how many human employees will still be needed. That's particularly true with desk jobs that are likely easier to automate than the work of a plumber or an electrician. More CEOs are talking about the possible fallout. OpenAI chief Sam Altman said this month that AI was already producing work similar to that of junior employees. Salesforce CEO Marc Benioff has said he tells fellow chief executives that future generations of leaders will oversee both people and agents. Getting or keeping a job in tech as AI takes on a bigger role within organizations isn't guaranteed, of course. In many cases, people will need to build their skills in order to remain competitive. That's a point that Amazon's Jassy and other leaders have been making as they've implored workers to level up their AI abilities to avoid risking obsolescence. Jassy said that while AI will take over some jobs, the technology will likely lead to the addition of other roles — an idea echoed in the results of the Deloitte survey. For many, experimentation is key Shaikh said the takeaway for most workers is to learn AI and what it can and can't do. She said technical skills might be needed in some cases, though Shaikh doesn't think most workers need to get hung up on that. "The experimentation, the understanding of what the technology can and cannot do, is probably most fundamental," she said. Shaikh said that as AI becomes more self-sustaining within organizations, there will be a greater need for human skills to propel adoption further and maximize the technology. She said that means workers will often need to deploy their most human abilities: empathy, emotional intelligence, and curiosity. They'll also need to rely on critical thinking, problem solving, logical reasoning, and written and verbal communication, Shaikh said. "You're going to need people who understand how to use it," she said. "That's going to require some of those human skills."

Axel Springer Aims to Boost Value With AI, Calls Time on Clicks-and-Ads Model
Axel Springer Aims to Boost Value With AI, Calls Time on Clicks-and-Ads Model

Wall Street Journal

time3 hours ago

  • Wall Street Journal

Axel Springer Aims to Boost Value With AI, Calls Time on Clicks-and-Ads Model

Axel Springer said it plans to double its value within five years supported by artificial intelligence, calling time on the business model of maximizing clicks and advertising. The German media group behind Politico and Business Insider outlined the goal of doubling its value on Monday, as part of a strategic update following a split of its publishing and classified-advertising businesses.

New Cameras Predict if Somebody Is About to Shoplift, Company Says
New Cameras Predict if Somebody Is About to Shoplift, Company Says

Newsweek

time5 hours ago

  • Newsweek

New Cameras Predict if Somebody Is About to Shoplift, Company Says

Based on facts, either observed and verified firsthand by the reporter, or reported and verified from knowledgeable sources. Newsweek AI is in beta. Translations may contain inaccuracies—please refer to the original content. A new form of security camera software that uses artificial intelligence to predict if someone may be about to shoplift is being used in certain stores in the U.S. The camera software, produced by AI surveillance company Veesion, reads body language and hand movement to detect suspicious behavior, allowing shops to prevent robberies before they happen, per the company. Newsweek contacted Veesion for more information on the technology via email. Why It Matters In 2024, there was a rise in shoplifting reports, with the Council on Criminal Justice reporting that the crime increased by 24 percent in the first half of the year compared to the same time period the previous year. Retailers have sought to prevent theft without compromising the customer experience as traditional approaches such as locking up products can frustrate shoppers and have been found to lower sales. What To Know Veesion's system plugs into a store's existing camera network. The software analyzes video feeds and flags sequences it considers suspicious. These alerts appear on staff tablets, phones or even checkout terminals. The technology is currently on trial at around 5,000 stores in the U.S, Canada and Europe. Veesion, which was founded in France in 2018, says its software avoids identifying individuals or collecting biometric data. "Our technology does not allow for the recognition of physical or physiological characteristics, the deduction of emotions or intentions of people," Veesion states on its website. Examples of an AI-powered shoplifting detection software produced by Veesion. Examples of an AI-powered shoplifting detection software produced by Veesion. Veesion Its creators also say that the technology can avoid the biases of other AI-based products, as it doesn't read anything else about the person it is observing, just their body language. "The algorithm doesn't care about what people look like. It just cares about how your body parts move over time," Veesion cofounder Benoît Koenig told Business Insider. In stores, the software works by comparing live footage to millions of examples of shoplifting gestures that the algorithm has been trained on. Over time, the system improves via machine learning, with the stated goal of reaching 99 percent detection rates. Koenig told Business Insider more than 85 percent of alerts have been considered relevant for store operators that use the Veesion system. He said one client in the U.S. was able to halve losses in one section of the store in the first three months of implementation. Retailers also benefit, in theory, from a deterrence created by the strength of the technology. "They know there is an AI in the cameras, so they're going to be careful with what they do," said Koenig. What People Are Saying Veesion cofounder Benoît Koenig told Business Insider: "It's not glamorous, but the ROI is quite direct. You're going to arrest shoplifters, recover inventory, and save money." Alex Beene, a financial literacy instructor at the University of Tennessee at Martin, told Newsweek: "Shoplifting as such a widespread crime during a time of high inflation is actually quite common when you look at similar times from other countries in the past. "The one-two punch that consumers face is not just higher prices, but also a drawback of additional financial resources they would normally qualify for because of their current employment and income outlook." What's Next Veesion, which recently raised $43 million in funding, is expanding its U.S. operations.

DOWNLOAD THE APP

Get Started Now: Download the App

Ready to dive into a world of global content with local flavor? Download Daily8 app today from your preferred app store and start exploring.
app-storeplay-store