← All blog posts

How to build a book recommendation site with AI

I will show you how I used ChatGPT by OpenAI to create a book recommendation site in Webflow. I will take you behind the scenes and show you what tools I used, what processes I followed and what my thoughts are on using AI to generate these types of sites.

December 10, 2022

I have been experimenting with ChatGPT by Open Ai and wanted to see how I could use AI and No-code to build projects. After experimenting with Postman and the OpenAI api, I decided to build out a book recommendation site like Blinkest. I set myself a limit of 3 hours for the project, and booknotes.ai is the finished result.

What tools did I use to build this project?

  • Webflow and Relume to build the front-end and the CMS
  • Airtable as my database that also allowed me to use the Airtable Web clipper to get book info from Amazon to Airtable
  • Whalesync to sync Webflow and Airtable
  • make.com to run my workflows
  • ChatGPT API to generate the summary, audience and learnings outline

My process for building the site

  1. I started by practicing prompts in the ChatGPT
  2. After settling on my use case, I started running my prompts via Postman
  3. After refining my prompts, I started to work on what the MVP would like, which included: a home page, a book template page and a genre template page
  4. After setting up all fields in the Webflow CMS and Airtable, I started building the site in Webflow by importing the Relume Styleguide
  5. I used HappyHues.co to get inspiration for a color palette and started adjusting my style guide. Once I was happy with the style guide, I started importing Relume components.
  6. I started setting up my make.com workflows for generating OpenAI api calls

How to use the OpenAI api and make.com

The site is powered by two workflows: the first workflow is responsible for generating the summary, audience overview and lessons outline for each book. The second workflow is responsible for generating the paragraphs for each lesson the reader will learn in the book. The reason I made this a separate workflow was so that I could first review the takeaways and if need be, regenerate them by re-making the api call.

After making some adjustments to my prompts and to some formatting issues I was having, I was good to go. Next, I had to set up a workflow for syncing Webflow and Airtable. Because I didn’t want to spend too much time on the setup, I decided to use Whalesync. The process for setting up Whalesync happened super fast and what is displayed in Webflow is now controlled by a view in my Airtable books table.

Small improvements to my workflows

At this stage, I had a rough MVP that allowed me to sync data between Webflow and Airtable. Two workflows in make.com that allowed me to make api calls to ChatGPT.

Next, I added a webclipper extension to Airtable to make it easier to populate my database with info I found on Amazon.com. While I was at it, I decided to sign up to the Amazon affiliate program, which allowed me to store my affiliate links in each book record. Last but not least, I also made some minor UX improvements, but that is where we are now.

As I continue to explore the world of no-code and AI, I have many exciting plans for the future. For example, I will be using this project as an opportunity to experiment with new tools like Wized and Memberstack 2.0, and you can expect to see more tutorials on how to use these tools with booknotes.ai.

Additionally, I am just beginning to uncover the vast potential of AI in the world of no-code, and I plan to continue creating more videos like this one to showcase the many different ways that AI can be used to enhance and improve no-code projects.

If you're interested in staying up-to-date with my latest tutorials and projects, be sure to subscribe to my newsletter. This way, you'll never miss out on the latest and greatest no-code and AI innovations. I can't wait to see where this journey takes us next!

Use the code


Dive Deeper with the MVMP Marketplace Course

Learn how to build the essential features for your online marketplace. Start creating the most essential features for your no-code marketplace and start scaling your site

Learn more →
Subscribe to the newsletter!

Get notified when I publish my next video or blog

😘 Got it!
Oops! Something went wrong while submitting the form.
🚀 Webflow Apps - Reviewing Webflow's Biggest Update This Year!

🚀 Webflow Apps - Reviewing Webflow's Biggest Update This Year!

Explore Webflow's revolutionary app updates and API changes that enhance design capabilities and user experience, featuring standout apps like Unsplash, Jasper AI, Finsweet Table, and Memberstack.

5 Essential AI Workflows for Your Business Without Coding

5 Essential AI Workflows for Your Business Without Coding

Glide has launched some awesome features that allow us to implement AI features into our Glide features. We explore 5 use cases that you can start implementing today even if you can't code.

🤯 Relume's AI Site Builder is UNBELIEVABLE!

🤯 Relume's AI Site Builder is UNBELIEVABLE!

Relume has once again taken things to the next level AGAIN. This time with their AI Site Builder tool that will allow you to turn a simple prompt into a sitemap and wireframes with AI generated copy in seconds.

Setting Up Client Portals in Glide for Your Two-Sided Marketplace | Course Preview

Setting Up Client Portals in Glide for Your Two-Sided Marketplace | Course Preview

Welcome to my brand new course on how to build customer portals for two-sided marketplaces in Glide! Glide is an incredible tool that can revolutionize your business, as I've experienced firsthand while working on the Unicorn Factory.

🚀 6 Tips for Building Webflow Sites More Efficiently

🚀 6 Tips for Building Webflow Sites More Efficiently

Discover the secrets to enhancing your Webflow design process with these 6 essential tips! In this video, we'll walk you through time-saving techniques, productivity-boosting hacks, and valuable strategies to help you build Webflow sites more efficiently. From style guides to on-page optimization, these expertly-crafted tips will empower you to work smarter, create beautiful and responsive websites faster, and take your Webflow skills to new heights. Don't miss out on unlocking your full Webflow potential – tune in now to elevate your website-building experience!

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Join us for the final installment of our series as we explore the creation of custom open graph images for each landing page. In Part 3, we'll use Placid to automatically generate visually appealing open graph images with custom screenshots and text. Enhance your website's social media presence and elevate your landing pages with these custom images. Complete your automation journey and unlock your website's full potential with this innovative workflow.