Introduction

[00:00 - 00:09] Hello everyone, my name is Jirak Kaldra and welcome to the course. In this course, we are going to build an e-learning application like Udemy using React and ASP.NET.

[00:10 - 00:16] Now, let's start by taking a look at the project. The project is called LearningFi, which is an e-learning application.

[00:17 - 00:29] If we take a look at the homepage, we will see a list of courses as expected from an e-learning application. As you would notice, we have pagination going on here, which shows eight courses in a page.

[00:30 - 00:40] If we click on page two, we will see eight more courses. On the top left, we can sort courses on the basis of price.

[00:41 - 00:55] By default, they are sorted alphabetically. We can also filter the courses by category, such as IT software, languages, or music.

[00:56 - 01:10] We also have a search bar where we can search for a course using a keyword. So if I search AWS, I will find a course which has a keyword AWS in it. Let's clear it.

[01:11 - 01:29] If we click on any courses title, we will be taken to the description page of the course. This page has some detailed information about the course, like the instructor of the course, language of the course, learnings, requirements, category, level, and some description.

[01:30 - 01:39] Right now, I have just used the placeholder stuff, but you can add any information as you like. You can also add the course to cart from description page.

[01:40 - 01:53] Now, if you go back, if I click here, we will see that the cart icon gets updated to one. You'll also notice that add to cart has been changed to go to cart.

[01:54 - 02:02] If we click here, we will be redirected to the basket page. Here, we see some details about the course, the total amount, and the checkout button.

[02:03 - 02:11] Now, let's go back and add another course to the basket. Let's add this one, and let's go back to the cart.

[02:12 - 02:17] We would see that it automatically creates the total for us. Let's keep only one course for now.

[02:18 - 02:28] Let's keep full-stack Python with Django, and I will delete this one. Now, if you click on checkout, we will be redirected to the login page, because we need to login to proceed further.

[02:29 - 02:35] I'll just login with one of the users. After logging in, we will be redirected to the profile page.

[02:36 - 02:43] Right now, we don't see any course because we haven't purchased any. But if we see our basket, we have a course already.

[02:44 - 02:53] Let's click on the cart and go to the basket page. And now we can click on checkout, and we will be taken to the checkout page.

[02:54 - 02:58] We need to fill in our cart details here. Of course, we will use test credentials, not the real ones.

[02:59 - 03:04] And we are going to use Stripe as our payment service. And now I can click on make payment.

[03:05 - 03:14] As you can see, we see your payment is successful. Also, on our profile, we see the course we just purchased.

[03:15 - 03:23] Let's click on go to course, and now we can see our course. Now I can choose any video, and that video will be running.

[03:24 - 03:36] If we go back to our profile, you will see that we have an option to become an instructor. You can click on that button, and now if I open the menu, we will see an instructor drop down.

[03:37 - 03:46] Let's click on instructor, we immediately see an option to create a new course. Now if I click on it, we will see some fields related to the course.

[03:47 - 03:54] Let's fill some details. For simplicity, I will write test course, and I will use it everywhere.

[03:55 - 04:00] Let's keep the price to be 1199. Category can be languages.

[04:01 - 04:06] Level can be beginner, and a language can be English. Let me click on submit.

[04:07 - 04:29] Now on our instructor page, we can see our unpublished course, because we just have created some information, but we haven't published it yet. Now if I click on this course, we will go to another page where we can write the sections and lectures. I will simply write section one, and add a lecture to it.

[04:30 - 04:41] Let's call it lecture one, and URL one. Ideally, we should write the link to the video, but I am writing this for simplicity.

[04:42 - 04:57] We can publish this section, and finally click on publish course. Now if I open the instructor page, we will not see it inside unpublished courses, because it's already published.

[04:58 - 05:05] Now we can go to the homepage and go to languages. We will see a new course, which we just created.

[05:06 - 05:13] We can see it here, because this has a category languages. Well, this is the application we are going to build.

[05:14 - 05:35] This course is designed for people who have little knowledge of React, and some knowledge of an object-oriented language, such as C#, Java, or C++. If you find this project interesting, and you aspire to build a real world project like this, I promise you you will learn a lot from this course. See you inside.