Building an AI-powered Quora clone with Next.js, Cloudflare, and Strapi V5

[win-ne]

What is your article idea?

This is a tutorial that walks through how to create an AI-powered Quora clone that hosts community-sourced and ranked questions and answers.

What are the objectives of your article?

Building an AI-powered Quora clone with Next.js, Cloudflare, and Strapi V5

1. Introduction

• Describe Quora and its functionality
• Talk about the uses cases for a Quora clone
• Walk through how the project will work and its features

2. Prerequisites

• List prerequisites: Node.js, Next.js, Strapi, Cloudflare
• Describe their uses

3. Setting up your Strapi Backend

• Creating a Strapi app
• Adding content types
  • Users
  • Questions
  • Answers
  • Comments

4. Setting up your frontend

• Create your Next.js app
• Create authentication pages
• Create an AI-powered question input page
• Add an answers page
• Build a question list page

5. Conclusion

• Summarize what was covered in the tutorial
• Talk about Strapi and its features

Objectives

• Learn how to build a community-content-sourced app and manage content with Strapi
• Learn how to incorporate generative AI into an app

Technologies

• Strapi V5: for content management
• Next.js: for the frontend
• Cloudflare: for generative AI
• Tailwind CSS: for styling

User story

As a user of this Quora clone, I want to post questions to the community. I should receive AI-generated answers as well as be able to read answers written by other users. Depending on whether I like the answer or not, I can upvote or downvote a question. Additionally, I need to see other related questions listed.

What is your expertise as a developer or writer?

Intermediate

What type of post is this?

Tutorial

Terms & Conditions

• I have read the Write for the Community program guidelines.

[Theodore-Kelechukwu-Onyejiaku]

Hi @winnie-n ,

This looks interesting. Could you please list out the features we will be creating in this tutorial as related to Quora?

Here is an example of what I mean: #1510 (comment)

[win-ne]

Sure @Theodore-Kelechukwu-Onyejiaku.

These are basic Quora features that I would like to cover:

1. Create, list, update, and delete questions
2. Create, list, update, and delete answers
3. Create, list, update, and delete comments to answers
4. Upvote and downvote answers
5. A bot that will generate an answer to your question the moment you post it (Quora's is called Poe I believe)
6. Search questions, answers, and comments
7. Create, update, and sign into user accounts

[Theodore-Kelechukwu-Onyejiaku]

Thank you @winnie-n .

This looks very interesting. Most importantly, we want a UI and basic functionalities as that of Quora too.

We could make this a series:

Part 1:

• Create, update, and sign into user accounts
• Create, list, update, and delete questions
• Create, list, update, and delete answers

Part 2:

• Create, list, update, and delete comments to answers
• Upvote and downvote answers

Part 3

• A bot that will generate an answer to your question the moment you post it (Quora's is called Poe I believe)
• Search questions, answers, and comments

NOTE: Parts of this series should be complete before we can start review and publishing.

Please let me know if you are willing to proceed.

[win-ne]

Yes. I can proceed. I'll ensure that the UI and functionalities match Quora.

Thank you @Theodore-Kelechukwu-Onyejiaku for reviewing this and for your comments. Really appreciate it.

[Theodore-Kelechukwu-Onyejiaku]

Please proceed. Thank you.

[win-ne]

Hello @Theodore-Kelechukwu-Onyejiaku .

It's my hope that you've been well. I have completed this tutorial. It took a while, it was rather complicated and lengthy.

Here are the links:

1. Part 1 draft
2. Part 2 draft
3. Part 3 draft
4. Project source code

I've had to modify the initial outline. I found that it was harder to read and follow switching between the backend and the frontend while covering so many moving parts. I hope that's okay. If not, I can modify it to better align with the initial outline. Let me know.

Looking forward to your comments and review. Let me know if you'd like me to add more reviewers to the repo.

[win-ne]

Added the HackMD links according to the submission guidelines—sorry for missing it initially! I’ve also shared the repo and HackMD files with you. Looking forward to your review. Here's a demo of the project if you'd like a sneak preview.

[Theodore-Kelechukwu-Onyejiaku]

Thank you @winnie-n,

I will add this to the review backlog. Thanks for your contribution!

[win-ne]

Awesome. Thank you @Theodore-Kelechukwu-Onyejiaku .