How to build a book recommendation site with AI

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!

‍

‍