strapi / community-content

Contribute and collaborate on educational content for the Strapi Community
https://strapi.io/write-for-the-community
572 stars 400 forks source link

Build a Udemy Clone with Strapi and Next.js #1510

Open ZehaIrawan opened 2 months ago

ZehaIrawan commented 2 months ago

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

Theodore-Kelechukwu-Onyejiaku commented 2 months ago

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

Here are some other suggested features.

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 commented 2 months ago

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 commented 2 months ago

Hi @ZehaIrawan ,

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

ZehaIrawan commented 2 months ago

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

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

Part 3: Cart & payment with Stripe

POC

https://github.com/user-attachments/assets/c1d51582-efa5-4c97-838b-0541a8f08540

ZehaIrawan commented 2 months ago

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

ZehaIrawan commented 2 months ago

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

Theodore-Kelechukwu-Onyejiaku commented 2 months ago

Hi @ZehaIrawan,

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

ZehaIrawan commented 2 months ago

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 commented 2 months ago

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

ZehaIrawan commented 2 months ago

Got it, here's the new outline

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

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

1. Authentication

2. Manage courses page

3. User Progress

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

Theodore-Kelechukwu-Onyejiaku commented 2 months ago

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 commented 1 month ago

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 commented 2 days ago

Thank you @ZehaIrawan ,

I will add this to the review backlog!