← 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

Copy

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 SEO Hack: Convert Your CMS Images to WebP

Webflow SEO Hack: Convert Your CMS Images to WebP

In August, Webflow added an internal compression tool that allows you to convert images to the webP filetype for improved web performance. While this feature is available for static images, it is not yet available for CMS images. Luckily, a solution to this problem is converting your CMS images to WebP.

How to Fix Common Webflow Performance Issues with Lighthouse

How to Fix Common Webflow Performance Issues with Lighthouse

Are you experiencing performance issues on your Webflow site? Lighthouse can help you identify and fix common problems such as slow loading times, poor server response, and lack of caching. Learn how to use Lighthouse to improve your Webflow site's performance and enhance the user experience.

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

I'll show you how I used the power of GPT-3 by OpenAI, @Wized and Webflow to create an app that generates custom cover letters for job listings. If you are looking for GPT-3 business ideas, feel free to use the same process to set up your own site.

Optimizing Webflow Designs Using Line Clamping

Optimizing Webflow Designs Using Line Clamping

Using line clamps in Webflow allows for the creation of visually appealing layouts by limiting the number of lines of text displayed within an element.

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

In this post, we'll be walking through the process of using Finsweet Sort and Filter to implement search and basic filtering functionality for our book collection. We'll also be using Data Fetcher to import Google Analytics page views and incorporate them into our Webflow site, allowing us to sort our books by popularity.

ChatGPT 🤝 No-Code - How to create and schedule social posts with AI

ChatGPT 🤝 No-Code - How to create and schedule social posts with AI

As part of the booknotes.ai series, I will show you how to build a workflow for creating and scheduling social media marketing posts. For this example, I will be using Instagram, but you can set up this workflow for whatever other social media platform you want to use, like Twitter, LinkedIn, etc. In the first part of this series, I showed you how I created booknotes.ai, a book recommendation service created with AI.