Build a Udemy Clone with Strapi and Next.js

[ZehaIrawan]

What is your article idea?

This blog series will be a guide on building a Udemy clone with Next.js and Strapi. It will focus on the student's side functionality instead of the admin/lecturer side of Udemy, such as the ability to enroll on a course & track their progress.

Part 1: Setting up Strapi & Next.js for public all courses & course overview page

1. Setting up Strapi

• Overview of the blog series
• Creating a new Strapi project
• Creating Strapi Course, Section & Lecture collection and the relationship between them
• Setting up fields for each of the collection
• Creating a sample entries for a lecture that has 3 sections and has 3 lectures for each section
• Testing the API endpoints
• Creating a complex query with filtering & populating nested relation Strapi REST API with the help of https://docs.strapi.io/dev-docs/api/rest/interactive-query-builder

2. Setting up Next.js

• Creating a new Next.js project
• Creating dynamic routes for the course overview page
• Integrating with Strapi
• Fetching data from Strapi API and displaying course title, description, course content outline

Part 2: Setting up user authentication & ability to track user progress

1. Setting up authentication

• Configuring user roles & permissions
• Creating a register & login page, and then implementing authentication with Next.js

2. Creating UserProgress collection to keep track of user progress

• Setting up the fields & relation
• Configuring the course content page
• Creating UI for video & text lecture
• Creating a UI sidebar for the course navigation
• Redirect to the course overview page if not authenticated
• Checkbox to mark a lecture as done
• Summary

What are the objectives of your article?

To provide a comprehensive guide on how to build a real-world application with Strapi and Next.js

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]

This looks interesting. But I am not sure the features you have listed could make a Udemy Clone.

Here are some other suggested features.

• Add/remove course to basket/cart
• Course categories
• Course details
• Rate a course
• Search and filtering
• Create/update/delete course
• User management (login/signup/profile update, etc)

Could we have the title too as "Build a Udemy Clone with Strapi, Next.js and Shadcn UI? We could also make this a tutorial series.

Please note that we now want projects to be built with Strapi 5.

[ZehaIrawan]

Sure, we can use "Build a Udemy Clone with Strapi, Next.js and Shadcn UI" as the title & use Strapi 5.

I can try to implement the suggested features. Should I update the outline first or start writing the draft, and we can reorganize & split the part later?

[Theodore-Kelechukwu-Onyejiaku]

Hi @ZehaIrawan ,

Sure, you can come up with a suitable outline so we both take good look at it.

[ZehaIrawan]

Part 1: Setting up Strapi & Next.js for public all courses & course overview page

• Setting up Strapi
• Overview of the blog series
• Creating a new Strapi project
• Creating Strapi Course, Section & Lecture collection and the relationship between them
• Setting up fields for each of the collection
• Creating a sample entries for a lecture that has 3 sections and has 3 lectures for each section
• Testing the API endpoints
• Creating a complex query with filtering & populating nested relation Strapi REST API with the help - of https://docs.strapi.io/dev-docs/api/rest/interactive-query-builder
• Setting up Next.js
• Creating a new Next.js project
• Creating dynamic routes for the course overview page
• Integrating with Strapi
  Fetching data from Strapi API and displaying course title, description, course content outline

Part 2: Implementing user authentication & ability to track user progress

• Setting up authentication
• Configuring user roles & permissions
• Creating a register & login page, and then implementing authentication with Next.js
• Creating UserProgress collection to keep track of user progress
• Setting up the fields & relation
• Configuring the course content page
• Creating UI for video & text lecture
• Creating a UI sidebar for the course navigation
• Redirect to the course overview page if not authenticated
• Checkbox to mark a lecture as done
• Bonus: Course search by title & category

Part 3: Cart & payment with Stripe

• Configuring cart collection
• Building Cart & checkout page
• Building payment success & cancellation page
• Summary

POC

POC.mp4

[ZehaIrawan]

Also @Theodore-Kelechukwu-Onyejiaku I think I found some bugs in V5, for example, strapi/strapi#20655. Should I include the workaround in the article?

[ZehaIrawan]

Can we use "Build a Udemy Clone with Strapi V5, Next.js, Stripe and Tailwind CSS" as title?

[Theodore-Kelechukwu-Onyejiaku]

Hi @ZehaIrawan,

Thanks for your outline. However, it didn't include the features I listed.

[ZehaIrawan]

I think I have all except the rating, can you please explain the CRUD for courses? Is it only on Strapi CMS or with React custom UI.

[Theodore-Kelechukwu-Onyejiaku]

CRUD for courses means that a user should be able to Create/read/update/delete a course.

[ZehaIrawan]

Got it, here's the new outline

Part 1: Setting up Strapi & Next.js for public all courses & course overview page

• Overview of the blog series
• Creating a new Strapi project
• Creating Strapi Course, Section & - Lecture collection and the - relationship between them
• Setting up fields for each of the collection
• Creating a sample entries for a lecture that has 3 sections and has 3 lectures for each section
• Testing the API endpoints
• Creating a complex query with filtering & populating nested relation Strapi REST API with the help - of https://docs.strapi.io/dev-docs/api/rest/interactive-query-builder
• Setting up Next.js
• Integrating with Strapi
• Fetching data from Strapi API and displaying course title, description, course content outline

Part 2: Implementing user authentication, manage courses page & user progress

1. Authentication

• Setting up authentication
• Configuring user roles & permissions
• Creating a register & login page, and then implementing authentication with Next.js

2. Manage courses page

• Configuring CRUD permission for courses
• Building UI for CRUD
• Wire up UI to API for CRUD

3. User Progress

• Creating UserProgress collection to keep track of user progress

• Setting up the fields & relation

• Configuring the course content page

• Creating UI for video & text lecture

• Creating a UI sidebar for the course navigation

• Redirect to the course overview page if not authenticated

• Checkbox to mark a lecture as done

• Implementing course search by title & category

Part 3: Implementing Rating system, Cart & payment with Stripe

• Configuring rating collection
• Building rating component
• Configuring cart collection
• Building Cart & checkout page
• Building payment success & cancellation page
• Summary

[Theodore-Kelechukwu-Onyejiaku]

Hi @ZehaIrawan ,

Thank you for the outline. You can proceed. I can't wait to see your contributions!

Meanwhile, note the that you will have to finish up all the parts in order for us to start review.

[ZehaIrawan]

Hi @Theodore-Kelechukwu-Onyejiaku

The drafts are ready for review : Part 1, Part 2, and Part 3.

Please let me know if you have any feedback! Thanks

[Theodore-Kelechukwu-Onyejiaku]

Thank you @ZehaIrawan ,

I will add this to the review backlog!

[Theodore-Kelechukwu-Onyejiaku]

Hi @ZehaIrawan ,

Trust you are doing great! Could you please ping me the following on Discord?

• Full Name
• Email address
• Bio
• Photo
• Job Title
• Twitter Handle

Thank you for your contribution! 💪

[Theodore-Kelechukwu-Onyejiaku]

Hi @ZehaIrawan ,

I have updated your article to the best of my ability and time. Could you please continue? Your article is lacking some very vital essentials like the following:

• You didn't follow proper Technical writing guidelines.
• Proper explanation of implementation. You didn't give readers clarity into what they are supposed to implement, rather you only mention about the code to implement.
• You didn't add headings to an action or implementation.
• Your content is not well structured.

Please fix the following issues above.

Meanwhile, I have merged part 1 and part 2 as a single part.

Thank you for your contribution. Please let me know if you need anything. Thank you.