Javamate Coffee Roasters e-commerce site

I built a fully functional responsive e-commerce website using Astro integrated with Crystallize, Stripe, Supabase, MailerSend. Deployed on Netlify and source controlled in GitHub. All with bolt.new!

Comment

Inspiration

I am a web developer, I love coffee, and I love hackathons. I recently started a home coffee roasting business and I had been working on a building an e-commerce site, but as a father of five and grandfather of three I struggled to find the time. When I read about The World's Largest Hackathon powered by bolt.new, I knew this was the opportunity to make it happen.

What it does

It is a fully functional e-commerce web site presenting various fresh roasted coffee offerings for sale. It integrates with Crystallize for product content management, displaying demo data as a fallback if a connection cannot be made. It utilizes Supabase for user management, Stripe for payment processing, MailerSend for contact form and newsletter sign up, and Netlify for deployment. It uses Bolt's Stripe, GitHub, and Supabase integrations. Orders are created in Crystallize when successful payment is made via Stripe. Edge functions are deployed in Supabase and fully secured.

How we built it

This is built exclusively with bolt.new. I started with a basic prompt indicating that I wanted to build an e-commerce site for a home coffee roaster using Astro with content managed in Contentful or Crystallize. I provided some basic details and watched in amazement as it cranked out the code and then showed me a working home page. Then I iterated one feature at a time with specific prompts for things like "Implement the product page", "Implement the 404 page. Offer some featured coffees and include a polite invitation to contact us to let us know if they encountered a problem on our site.", "* Implement the checkout using Stripe embedded components for payment processing." and so on. I previewed the site after every change and made incremental improvements with prompts. I leveraged target files from time to time, but mostly had all files in scope.

Challenges we ran into

At one point the AI got confused about an error and thought it needed to add type="module" to the script tags on the Astro pages, which it did, but that caused it not to be able to access the Supabase library, so it attempted to resolve that and reverted some key functionality I'd previously asked it to implement. I asked it to revert the changes and even gave it the Git commit SHA, but it did not correctly revert the files, though it said it did. In retrospect, I may have had only some of the files targeted at the time, which could explain why it didn't do what I expect. I ended up reverting those commits myself, which is the only thing I did outside of bolt.new in this project, and that is very impressive. The first problematic commit was this one and this is the one where it got worse. Once I reverted the commits in git myself, Bolt's GitHub integration refreshed the code and I was back in business. The Crystallize integration is not quite right. The query is incorrect, but the demo data is shows as a fallback masked the issue from me for a long time. I noticed it at the end but didn't have time to resolve it, so that's something I plan to do after the hackathon (with bolt.new!).

One other big challenge I hit is that I asked it to extend the content model to include product variants and update the checkout implementation to use the actual price_id if it exists, otherwise create a new price_id for the product and store it in Contentful. It told me it needed more detail and provided exactly the information it needed and included some reasons. This lead me to the discovery that Contentful's terms do not allow commercial use on the free plan, so I told the AI it asked great questions that make me realize we have to pivot. I asked it to use Crystallize instead of Contentful for content management, which it did in a jiffy! After a few iterations, it was in good shape.

Accomplishments that we're proud of

This project uses a bunch of modern tools to get the job done and it provides users with a pretty great coffee buying experience for a project that literally came together in a weekend. I originally started on the first day of the hackathon mostly as a test to see what bolt.new could do. I quickly realized it had real potential, but I wasn't able to get back to it until the end of the month. The free tokens gave me the push I needed to get back to it and I'm very happy I did. Using a series of specific prompts, I was able to implement feature after feature and build all the integrations that I had hoped for. It turned out far better than I imagined. Stripe and Crystallize are integrated, and Stripe sends email notifications when new orders are placed.

What we learned

The AI doesn't always get it right. For example, it used the wrong Crystallize API for placing orders and I had to tell it to use the @crystallize/js-api-client instead. In other cases, it implemented shortcuts, but fortunately when it did so it added comments indicating as much. As I reviewed the code I found those things and then asked the AI to implement those functions or integrations. One example is a function to updateVariantStripePriceId.

The AI does make a pretty powerful companion, however. After it does the work you tell it to do it provides a very nice detailed summary of what it did. In most cases I found this to be accurate but it had some occasional hallucinations about what it did (it didn't mention that it introduced some bugs, and it didn't always make it clear that some of the implementation was hard-coded or stubbed). It was accurate more often than not by far, and I even learned some things from the summaries about good practices. Sometimes when you're under the gun you are tempted to cut corners, but that can be dangerous, so when your AI companion follows good practices, it helps.

What's next for Javamate Coffee Roasters e-commerce site

The site is nearly ready to launch. I have to update some content that is not accurate for the business and fix the Crystallize integration so it can pull real data instead of the demo data, but after what I've experienced in the past two days I know that won't be a problem. I'm very excited to soon be able to launch the site and share my passion for fresh roasted coffee. I can't wait for my first online order.

One of my goals is to offer fully customized roasts, so customers can choose their preferred bean, their preferred roast level, their preferred quantity, and can even name their own roast. I also want to offer subscriptions. These are a few of the enhancements I hope to make in the near future.

Built With

Share this project:

Updates