About the Course#

Hello everyone, my name is Chirag Kalra and welcome to the course. In this course, we are going to build an e-learning application, like Udemy, using React and ASP Dotnet.

Now let's start by taking a look at the project. The project is called Learnify which is an e-learning application. 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 which shows 8 courses in a page. If we click on page 2, we will see 8 more courses. At the top left, we can sort courses on the basis of price. We can also filter the courses by category. We can also go to the specific category pages by selecting a category from the top. We also have a search bar where we can search for a course using a keyword.

If we click on any course's 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, requirement, category, level and some description. Right now, I have just used the placeholder stuff. But you can add any information you like. You can also add the course to cart from the description page.

If we go back, you would notice that we have an Add to Cart button next to the course as well. If I click here, we see that the cart icon gets updated to 1. You'll also notice that Add to cart has changed to Go to cart. If we click here, we will be redirected to the basket page. Here, we see the details about the course, the total amount and the checkout button. Now let's go back and add another course to the basket. We would see that it automatically creates the total for us. Let's keep only one course for now; Fullstack Python with Django.

If we click on checkout, we will be redirected to the login page. Because we need to log in to proceed further, I'll just log in with one of the users. After logging in, we will be redirected to the Profile page. Right now, we don't see any course because we haven't purchased any, but we see our basket with two courses. Let's click on the cart and go to the basket page. Now we can click on Checkout and we will be taken to the checkout page. We need to fill in our card details here. Of course, we will use test credentials, not the real ones. We are going to use Stripe as our payment service. Now we can click on Make Payment.

We see that our payment is successful. Also, we will be redirected to the Profile page with the purchased course. Let's click on Go to Course. Now we see our course.

We also have an option to become an instructor. If we go to the profile page, we will see a button with the name, Become an instructor. You can click on that button. Now if we open the menu, we will see an additional dropdown, Instructor. Let's click on Instructor. We immediately see an option to create a new course. We will then see some fields related to the course; let's fill in the Course title, Subtitle, Description, Price, Category, Level and Language. If we click on Submit, we will see our unpublished courses. We have one which we have just created.

If we click on the course, we will go to another page where we can write sections and lectures. I will simply write section 1, lecture1, and url1. Ideally, we should write the link to the video. But I'm writing this for simplicity. We can publish the section and finally, click on Publish course. We will no longer see it inside unpublished courses because it's already published. We can now simply go to the homepage and we would see our course there.

Well, this is the application we are going to build. 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.

Prerequisites#

You will get the most out of this course if:

  • You have a basic understanding of how React works.

  • You have little experience with Javascript.

  • You have at least 3 months experience with an object oriented language such as C#, Java or C++.

What we won't cover#

  • This course assumes you have a basic understanding of OOPS concepts. We won't be discussing how classes or interfaces work.

  • We won't be covering basic HTML, CSS, or JavaScript. So you should know how CSS styles work.

  • You should be aware of basic React concepts such as components, state, props etc.

Start a new discussion. All notification go to the author.