Introduction

In this lesson, we'll go through all the technologies we're using in this course

Technologies Used in this Course

In this lesson, we'll download all the technologies we're using in this course

Setting up the Environment

In this lesson, we'll set up the extensions we need for our course

Setting up VS Code

In this lesson, we'll go through the API Controllers and make a request through Postman

Module Introduction

In this lesson, we'll create our DOT NET web Api project using the DOTNET CLI.

Creating WebAPI Project using DOTNET CLI

In this lesson, we'll go through the entire project that comes with Web API project and Class library Project

Reviewing the Project Files

In this lesson, we'll go through and review the API Controllers

Reviewing the API Controllers

In this lesson, we'll explore Postman tool and make a HTTP request

Exploring Postman

In this lesson, we'll add a course model to our project

Adding Course Model to our Project

In this lesson, I'll be introducing you to the Entity Framework

What is Entity Framework?

In this lesson, we'll be adding Entity Framework to our project

Adding Entity Framework

In this lesson, we'll be making our first migration

Adding our First Migration

In this lesson, we'll creating our database based on the migration

Creating a Database

In this lesson, we'll add initial data to our database

Seeding Data in our Database

In this lesson, we'll add our first controller which will get us data from our database

Adding our First Controller

In this lesson, we'll summarize what we did in module 1.

Module 1 Summary

Preparing Our Server

In this lesson, we're going to create our client-side application using React

Setting up the React Project

In this lesson, we're going to look at our React project and understand the role of each file

Reviewing our React Project

In this lesson, we're going to understand the important react concepts

React Concepts

In this lesson, we're going to look at the typescript concepts

Why TypeScript?

In this lesson, we're going to look at how to use API request in React

Fetching Data

In this lesson, we're going to install sass in our project

Installing SASS to our Project

In this lesson, we're going to install React Router

Installing React Router

In this lesson, we're going to add routes to our application

Adding Routes and Refactoring

In this lesson, we're going to introduce and install ant design

Installing Ant Design

In this lesson, we're going to create our base file

Adding Base Styles

In this lesson, we're going to create a navbar using antd

Creating Navbar

In this lesson, we're going to add side drawer to our navbar

Adding Side-drawer to our Navbar

In this lesson, we're going to set up axios in our project

Setting up Axios

In this lesson, we're assign types to Axios response

Giving Types to Axios

In this lesson, we're going to make our course component

Making Course Component

Setting up our client

In this lesson, we're going to introduce Repository pattern

Introducing Repository Pattern

In this lesson, we're going to add Repository and Interface to our Project

Adding Repository and Interface

In this lesson, we're going to write the methods in our Repository

Writing Repository Methods

In this lesson, we're going to add more properties to our course model

Adding More Properties to our Course Model

In this lesson, we're going to add configuration to our migration

Adding Configuration to our Migration

In this lesson, we're going to seed data for Category, Learnings and Requirements table

Seeding New Data

In this lesson, we're going to add code to get data from Categories table

Adding Code to Get Data from Category Table

In this lesson, we're going to add code for eager loading

Adding Eager Loading

In this lesson, we're going to shape our returning data with the help of DTO.

Shaping the Data

In this lesson, we're going to add AutoMapper to our project

Setting AutoMapper to our Project

Using Repository pattern

In this lesson, we're going to implement generic repository to our application

Implementing Generic Repository

In this lesson, we're going to implement generic repository methods

Implementing Generic Repository Methods

In this lesson, we're going to implement Specification Pattern

Introducing Specification Pattern

In this lesson, we're going to write our Specification evaluator

Creating Specification Evaluator

In this lesson, we're going to implement the Specification methods

Implementing Specification Methods

In this lesson, we're going to implement our Specification methods inside Controllers

Using Specification Methods in Controllers

In this lesson, we're going to walk through the entire process of Specification pattern

Specification Pattern Walkthrough

Generic Repository pattern

In this lesson, we're going to create Errors Controller

Creating Errors Controller

In this lesson, we're going to manage our Error Responses

Handling Errors

In this lesson, we're going to create a not found endpoint

Creating a Not found Endpoint

In this lesson, we're going to create exception middleware to handle internal server error

Creating Exception Middleware

In this lesson, we're going to format our validation error response

Working on Validation Error Response

Error Handling

In this lesson, we're going to add sorting feature to our API

Adding Sorting Feature to the API

In this lesson, we're going to add filter feature to our API

Adding Filter Feature to the API

In this lesson, we're going to add pagination to our API

Adding Pagination to the API

In this lesson, we're going to finish pagination

Finishing pagination to the API

In this lesson, we're going to add search functionality

Adding Search Functionality

In this lesson, we're going to fix some warnings

Fixing Some Warnings

Sorting, Filtering, Pagination

In this lesson, we're going to refactor our frontend

Refactoring the Frontend

In this lesson, we're going to add Categories bar

Adding Categories Bar

In this lesson, we're going to create a new component to show courses

Adding Show Courses Component

In this lesson, we're going to create categories page

Creating Categories Page

In this lesson, we're going to create a description page

Creating Description Page

In this lesson, we're going to design the description page

Designing Description Page

Creating Pages in the frontend

In this lesson, we're going to create basket entity

Creating Basket Entity

In this lesson, we're going to make migration to our database

Making Migration to the Database

In this lesson, we're going to create basket controller

Creating Basket Controller

In this lesson, we're going to create removeItem method

Creating Remove Item Method

In this lesson, we're going to set up axios for our basket

Setting up Axios for the Basket

In this lesson, we're going to add Basket page

Creating Basket Page

In this lesson, we're going to design Basket page

Designing Basket Page

In this lesson, we're going to implement React context to centralize state

Using React Context

In this lesson, we're going to fetch the basket on app start

Fetching the Basket on App Start

In this lesson, we're going to refactor the basket page and display the basket items count in the header

Refactoring and Adding Basket Items Count

In this lesson, we're going to add basket summary

Adding Basket Summary

In this lesson, we're going to include "Add to cart" button in the description page

Adding "Add to Cart" Button in the Description Page

Adding Basket Feature

In this lesson, we're going to install redux

Installing Redux

In this lesson, we're going create actions

Creating Action in Redux

In this lesson, we're going to introduce Redux toolkit

Introducing Redux Toolkit

In this lesson, we're going to create a basket slice

Creating Basket Slice

In this lesson, we're going to make our application use redux toolkit

Refactoring App to Use Redux Toolkit

In this lesson, we'd be using asynchronous calls in redux

Using Asynchronous Calls in Redux

Using Asynchrnous Calls in Redux Part 2

In this lesson, we're going to use Redux toolkit Entity Adapters

Using Entity Adapters

In this lesson, we're going to install and use Redux Devtools

Redux Devtools

In this lesson, we're going to use selectors provided by Entity Adapters

Using Selectors in Entity Adapters

In this lesson, we're going to fetch single product

Fetching Single Product

In this lesson, we're going to create a category slice

Creating Category Slice

In this lesson, we're going to add search filters

Adding Search Filters

In this lesson, we're going to add Course params to Redux

Adding Course Params to Redux

In this lesson, we're going to add pagination to the frontend

Adding Frontend Pagination

State management with Redux

In this lesson, we're going to set up ASP identity

Setting up identity

In this lesson, we're going to configure and migrate

Configuring Identity and Migration

In this lesson, we're going to create Users controller

Creating Users Controller

In this lesson, we're going to learn about Json Web Tokens

Json Web Tokens

Identity

Welcome to Learnify! Learnify is an e-learning application like Udemy where you will find all commonly used features of an e-learning application. I have seen a lot of tutorials on how to create an e-commerce application or blogging application, but I did not find anyone teaching how to build an e-learning application. In this course, you will learn how to create, sell and play courses.

We will be using dotnet framework to build our server. Dotnet framework is an open-source developer platform on which you can create a broad range of applications, especially Enterprise level applications. Our frontend is built on the most popular frontend framework, React. For type safety, we will also be using Typescript. In a big application like this, we need state management for which we will be using Redux toolkit.

In this course, we will focus on almost every aspect of an e-learning application. We will start by discussing and designing properties of a course and setting up an API to fetch them from the database.

We will then take the response and display our courses on the homepage. We will also work on a navigation bar where we will have an option to log in, search for a course, and look at our cart items count. We will also work on filtering, sorting, and pagination features. The homepage will look like this.

![Showing the homepage](./images/homepage.png)

After we have all the information about the course, we will create our description page which will have some more information about the course such as learnings, requirements, description, number of students, level, language etc. This is how our description page will look like.

![Showing the description page](./images/description-page.png)

We are going to use Redux toolkit quite extensively in our course. We will be storing course details, and user's details including the courses in their cart. When a user clicks on the cart icon, they'll be redirected to the basket page which will look something like this.

![Showing the basket page](./images/basket-page.png)

For user registration and login, we will use Identity framework which will take care of all the requirements, such as verifying the email or storing user credentials in the database. We will then work on our frontend to take user's credentials. This is how our login page will look like.

![Showing the login page](./images/login-page.png)

Since we are building a real-world application, we need to take care of payments as well. We will use Stripe to accept payments. We just need to provide Card details and click on Make Payment. Once the payment is successful, user will be able to see purchased courses on their profile.

![Showing the payment flow](./images/flow.mp4)

Once a user has purchased a course, we want them to be able to see it as well. We will start by seeding some sample course data which will be displayed to the users. Later on, we will design our backend to accept course sections and lectures from our client. For video player, we are going to use YouTube's embedded player. This is how the video player will look like.

![Showing the course view page](./images/video-player.png)

Finally, we will see how a user can become an instructor and create a course of their own. We will create one page for basic course details and another one for creating sections and lectures. We will give an option to publish course as well. After the course is published, it will be available to all the customers to purchase.

![Showing the Course Page for details](./images/course-page-1.png)
![Showing the Course Page for Sections and Lectures](./images/course-page-2.png)

I would highly recommend this course for developers who want to become fullstack developers. You will learn how to create a fullstack application from scratch and how to break down and manage frontend and backend work.

In this course, you will learn how to build an e-learning application like Udemy using React and Asp .Net.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript