Make an ECommerce Website with Blazor WebAssembly in NET 6

Make an ECommerce Website with Blazor WebAssembly in NET 6

What you’ll learn

Build a full stack Blazor WebAssembly application by the example of an E-Commerce Website
Create a Walking Skeleton with .NET, Blazor WebAssembly, a Web API, Entity Framework Core & SQL Server right at the beginning
Implement Best Practices with Generics, Data-Transfer-Objects (DTOs) and the Repository Pattern
Build several features of an E-Commerce App, like Search, Pagination, Featured Products, a Cart (local & database), Orders and many more
Implement Authentication with JSON Web Tokens (JWT)
Use Role-Based Authorization for Administrators & Customers
Use Code-First Migration with Entity Framework Core & SQL Server
Implement Payment with Stripe Checkout providing Credit Card, Apple Pay & Google Pay
Create a Custom Layout for your Blazor WebAssembly Application
Implement Administration Features with all CRUD operations to Create, Read, Update & Delete your Products

Requirements

Experience with C#, HTML & CSS is preferable
Experience with Blazor WebAssembly is not a must, but helps
All frameworks and tools used in this course are available for free and we’ll install everything together along the way

Description

Welcome to the Blazor WebAssembly E-Commerce Course!In this online course, we’re going to build an e-commerce web application with .NET 6 & Blazor WebAssembly.We’ll cover the complete stack, meaning Blazor for the client, a Web API for the back end web service, and Entity Framework Core with SQL Server Express for the database.The course starts with a walking skeleton. This means, right at the beginning of this course, and in just a few hours you learn how to build a running full-stack web application with all the mentioned frameworks and technologies.So, after this section, you won’t use any mock data, for instance. You will already make calls to the web service, grab data from the SQL Server and return the results back to the Blazor WebAssembly client.On top of that, we will introduce best practices to that walking skeleton. For instance, we don’t want to use fat controllers. Instead, we’ll use the repository pattern together with dependency injection.After that, we build a huge part of the e-commerce application. This section is all about the products your users can buy in your shop, it’s about categories, product variants, a search bar, pagination, a basic cart, and so on.With all these implementations you learn lots of features of Blazor WebAssembly, together with the Web API and also relationships between entities and how to manage them with Entity Framework Core and SQL Server.After that, we dive into authentication with JSON web tokens.You will learn how to register users, log them in and create JSON web tokens (JWT) to authenticate your users, set the token in the default HTTP request header, utilize the famous [Authorize] attribute to secure your Web API, and add a page for the users’ profile so that they can change their password, for instance.The next section is all about the cart and orders. Until this point, you’ve already implemented a cart, but it only works offline. So now it’s time to store the products of the cart in the database and also implement the final order and an overview of the order history.But one thing will still be missing, and that’s an option to checkout and pay for your order. We cover that with the next section and use Stripe to do that. This means, your users can pay with a credit card, Google Pay and Apple Pay. Additionally, we’ll continue with a smaller section where we implement the option to add a delivery address.And after that, it’s time for the big administration dashboard. Everything you’ve learned so far comes together in this section.We utilize lots of features of Blazor WebAssembly, we build several CRUD operations for our entities – meaning an administrator should be able to create, read, update and delete all products, categories, and product variants – and to know if the user is allowed to do all that, we introduce role-based authorization.As you can see, there’s a lot to learn!Here’s an overview of what you will learn in this course:Introduction- Install the .NET 6 Framework & Visual Studio 2022- Get the source code from GitHubFull Stack Foundations – Building a Walking Skeleton- Create a Blazor WebAssembly ASP.NET Core Hosted Project- Debug your project- Learn about the new Hot Reload feature of .NET 6 & Visual Studio 2022- Create Razor Components & utilize CSS Isolation- Implement a Web API Controller & test it with SwaggerUI- Install & use SQL Server Express and Entity Framework Core 6- Utilize Code-First Migrations with EF Core 6 & Seed Data programmatically- Create a Git repository and push your code to GitHubAdding & Using Best Practices- Implement a Service Response with Generics- Use the Repository Pattern and Dependency Injection- Create Services for the client and the serviceIt’s all about Products – Blazor WebAssembly in Action- Add more models & entities to your web application like categories, variants, and more- Use several features of EF Core 6 like composite primary keys, more migrations & relationships- Utilize several built-in components of Blazor WebAssembly- Realize a search feature & pagination- Implement a custom layout- Add a cart using the local storage to your applicationLet’s add Users – Authentication with JSON Web Tokens- Implement user registration & login- Use data annotations & validation- Introduce the user model- Add token authentication with JSON Web Tokens (JWT)- Implement a custom AuthenticationStateProvider- Add a return URL to the login- Utilize the [Authorize] attributeLet’s buy some Products – Cart & Orders- Store the cart of a user in the database- Use the HttpContextAccessor to access the user in the services- Store the orders in the database- View an order history- Utilize the authentication state of the userKa-Ching! – Payment with Stripe Checkout- Introduce Stripe- Use Stripe Checkout for payments- Fulfill an Order with WebHooks- Enable a shipping address in Stripe CheckoutWhere are you from? – Add a Delivery Address- Add an address model with a new migration- Create a shared component for the cart and the user profile pageWe need more stuff! – Admin Dashboard- Introduce role-based authorization on the client & the server- Extend your models- Create several administration pages- Implement CRUD operations (create, read, update, delete) for your entitiesIf you don’t know me yet from YouTube or my other courses on Udemy, my name is Patrick God, I’m going to be your instructor for this course. I’m a web developer for over a decade now, I have worked for big corporations and small teams, as an employee and a contractor and I just love to see the way Microsoft is going with .NET & Blazor and how important these technologies get day by day.So far, I’ve created 10 courses on Udemy about .NET (Core), Blazor WebAssembly, single-page applications, Angular, and DevOps – with a total of more than 60.000 students and countless 5-Star reviews.If you’re still not sure if this course is right for you, there’s a 30-day money-back guarantee. So, feel free to check it out and get your money back if it’s just not for you. No questions asked.Apart from that, you can always ask questions in the Q&A sections that the community (including me) is happy to answer and you also get the complete source code, if there happens to be a problem with that.Are you ready?I’m looking forward to seeing you in the course!

Overview

Section 1: Introduction

Lecture 1 Course Overview

Lecture 2 Install .NET & Visual Studio

Lecture 3 GitHub Repository

Section 2: Full Stack Foundations – Building a Walking Skeleton

Lecture 4 Introduction

Lecture 5 Create the Blazor WebAssembly Project

Lecture 6 Solution Overview

Lecture 7 Debug the Project

Lecture 8 Trust the Dev Certificate

Lecture 9 Hot Reload with .NET 6 & Visual Studio 2022

Lecture 10 Add the Product Model

Lecture 11 Your First Component

Lecture 12 Images don’t show up? Here’s why.

Lecture 13 CSS Isolation

Lecture 14 Fixing Bootstrap from .NET 5 / Bootstrap 5 CSS Fix

Lecture 15 Your First Web API Controller

Lecture 16 Call the Web API from the Client

Lecture 17 Add SwaggerUI

Lecture 18 Install SQL Server

Lecture 19 Add the ConnectionString

Lecture 20 Install Entity Framework

Lecture 21 Install Packages for Entity Framework Core, Code-First Migration & SQL Server

Lecture 22 Add the DataContext

Lecture 23 Register the DbContext & Configure SqlServer

Lecture 24 Your First Migration with Entity Framework Core

Lecture 25 Seed Data

Lecture 26 Get Products from the Database

Lecture 27 Create the GitHub Repository

Lecture 28 Summary

Section 3: Adding & Using Best Practices

Lecture 29 Introduction

Lecture 30 Implement a Service Response with Generics

Lecture 31 Using Services with Dependency Injection

Lecture 32 Add the ProductService to the Client

Lecture 33 Use the ProductService in the ProductList Component

Lecture 34 Summary

Section 4: It’s all about Products – Blazor WebAssembly in Action

Lecture 35 Introduction

Lecture 36 Show Product Details with Page Parameters

Lecture 37 Get a Single Product from the Server

Lecture 38 Get a Single Product on the Client

Lecture 39 Little CSS Fix

Lecture 40 Introducing Categories

Lecture 41 Add Category Seeding & Migration

Lecture 42 Seed More Products

Lecture 43 Get all Categories with a new Service & Controller

Lecture 44 Add a CategoryService on the Client

Lecture 45 Display Categories in the NavMenu

Lecture 46 Get Products by Category from the Server

Lecture 47 Get Products by Category on the Client

Lecture 48 Introducing Product Variants

Lecture 49 Add a Composite Primary Key & More Seeding

Lecture 50 Add Product Variants Migration

Lecture 51 Include Product Variants & Types in the Product Service

Lecture 52 Display the Price in the ProductList Component

Lecture 53 Display the Price in the ProductDetails Component

Lecture 54 Use a Select Box for the Product Variant

Lecture 55 Introducing a Product Search Feature

Lecture 56 Search a Product on the Server

Lecture 57 Get Product Search Suggestions

Lecture 58 Add Search Methods to the Client

Lecture 59 Implement a Search via URL in the Index.razor Component

Lecture 60 Implement the Search Component

Lecture 61 Use a Custom Layout

Lecture 62 Add a Home Button

Lecture 63 Introducing Featured Products

Lecture 64 Load Featured Products

Lecture 65 Show Featured Products with a new Component

Lecture 66 Introducing Pagination & Data-Transfer-Objects (DTOs)

Lecture 67 Implement Product Search Pagination on the Server

Lecture 68 Add Pagination to the ProductService on the Client

Lecture 69 Add Pagination to the Components

Lecture 70 Introducing the Cart with the Local Storage

Lecture 71 Create a Cart Counter

Lecture 72 Add a CartItem Class

Lecture 73 Implement a CartService on the Client

Lecture 74 Implement “Add to Cart” Button in ProductDetails Component

Lecture 75 Show the Number of Items in the Cart Counter

Lecture 76 Turn Cart Items into Products on the Server

Lecture 77 Get the Cart Products on the Client

Lecture 78 Implement the Cart Page

Lecture 79 Remove an Item from the Cart

Lecture 80 Add the Quantity to Cart Models

Lecture 81 Modify the Cart Services

Lecture 82 Add Option to Update the Quantity

Lecture 83 Update the Quantity with an Input Number Field

Lecture 84 Summary

Section 5: Let’s add Users – Authentication with JSON Web Tokens

Lecture 85 Introduction

Lecture 86 Add the UserRegister Model

Lecture 87 Create the User Registration Page (EditForm without Validation)

Lecture 88 Implement a User Menu Button

Lecture 89 Add Data Annotations for Validations

Lecture 90 Add Validation to the Registration Form

Lecture 91 Use a Validation Message instead of the Validation Summary

Lecture 92 Add a User Model for the Database

Lecture 93 Add an Authentication Service on the Server

Lecture 94 Check if a User already exists

Lecture 95 Implement the User Registration on the Server

Lecture 96 Add the AuthController

Lecture 97 Create the AuthService on the Client

Lecture 98 Implement the Registration on the Client

Lecture 99 Use the AuthService on the Registration Page

Lecture 100 Display a Success Message after Registration

Lecture 101 Add a UserLogin Model

Lecture 102 Add the Login Page

Lecture 103 Prepare the Login on the Server

Lecture 104 Verify the User’s Password

Lecture 105 Create the JSON Web Token

Lecture 106 Implement the Login on the Client

Lecture 107 Implement a Custom AuthenticationStateProvider

Lecture 108 Expose the Authentication State

Lecture 109 Build a Logout Option with the AuthorizeView Component

Lecture 110 Add a Return Url to the Login

Lecture 111 Create a User Profile Page

Lecture 112 Utilize the [Authorize] Attribute on the Client

Lecture 113 Add a UserChangePassword Model

Lecture 114 Change the Password on the Server

Lecture 115 Add Authentication Middleware

Lecture 116 Implement Changing the Password in the AuthController

Lecture 117 Implement Changing the Password on the Client

Lecture 118 Change the User’s Password on the Profile Page

Lecture 119 Summary

Section 6: Let’s buy some Products – Cart & Orders

Lecture 120 Introduction

Lecture 121 Change the CartItem & Add it to the Database

Lecture 122 Prepare the Cart for Authenticated Users

Lecture 123 Store Cart Items in the Database

Lecture 124 Use the HttpContextAccessor to Access the User in the Services

Lecture 125 Get the Number of Cart Items from the Server

Lecture 126 Implement a Method to Check if the Current User is Authenticated

Lecture 127 Get the Number of Cart Items on the Client

Lecture 128 Handle the Number of Cart Items on Login and Logout

Lecture 129 Get the Stored Cart Items from the Server

Lecture 130 Refactor the CartService on the Client

Lecture 131 Add a CartItem to the Database

Lecture 132 Update the CartItem Quantity in the Database

Lecture 133 Remove a CartItem in the Database

Lecture 134 Prepare the Order Implementations (Models, Migration & a Composite Key)

Lecture 135 Implement Placing an Order on the Server

Lecture 136 Implement Placing an Order on the Client

Lecture 137 Empty the Cart after Placing an Order

Lecture 138 Say “Thank You” after Placing an Order

Lecture 139 Move GetUserId() to the AuthService

Lecture 140 Get Orders from the Server

Lecture 141 Implement Receiving Order on the Client

Lecture 142 Get Order Details from the Server

Lecture 143 Show Order Details on the Client

Lecture 144 Move IsUserAuthenticated() to the AuthService on the Client

Lecture 145 Summary

Section 7: Ka-Ching! – Payment with Stripe Checkout

Lecture 146 Introduction & Get a Stripe Account

Lecture 147 Stripe Dashboard

Lecture 148 Install Stripe.net in the Server Project with NuGet

Lecture 149 Redirect the User to a Stripe Checkout Page

Lecture 150 Create a Checkout Session on the Server

Lecture 151 Create a Success Page & Place an Order

Lecture 152 Fulfill an Order with WebHooks & Store the Order in our Database

Lecture 153 Enable a Shipping Address in Stripe Checkout

Lecture 154 Summary

Section 8: Where are you from? – Add a Delivery Address

Lecture 155 Add Address Model & New Migration

Lecture 156 Implement the Address Logic on the Server

Lecture 157 Implement the Address Logic on the Client

Lecture 158 Create a Shared AddressForm component

Lecture 159 Use the Address Form in the Cart & Profile Components

Section 9: We need more stuff! – Admin Dashboard

Lecture 160 Introduction

Lecture 161 Add a Role to the User Model and to the Token in the AuthService

Lecture 162 Create the Admin Menu Component & a Categories Admin Page

Lecture 163 Add More Properties to the Category Model

Lecture 164 Implement all CRUD Operations for Categories on the Server

Lecture 165 Implement all Client-Side CRUD Operations for the Categories

Lecture 166 Implement the Administration Page for Categories

Lecture 167 Re-render the Menu after changing the Categories

Lecture 168 Load the Product Types from the Server for Administration

Lecture 169 Add ProductTypeService Implementations to the Client

Lecture 170 Create the ProductType Administration Page

Lecture 171 Add & Update Product Types on the Server

Lecture 172 Add & Update Product Types on the Client

Lecture 173 Finish the ProductType Administration Page

Lecture 174 Change the Product & ProductVariant Model for Administrations

Lecture 175 Use the new flags in the ProductService Methods

Lecture 176 Load the Products for Administration

Lecture 177 Get the Products for Administration on the Client

Lecture 178 Create the Administration Page for Products

Lecture 179 Add an Edit & Create Button for Products

Lecture 180 Get a Single Product for Administrators

Lecture 181 Create, Update & Delete Products on the Server

Lecture 182 Create, Update & Delete Products on the Client

Lecture 183 Implement the EditProduct Component

Lecture 184 Test (and fix) the Create & Update Implementations

Lecture 185 Implement Deleting a Product on the EditProduct Page

Lecture 186 Summary

Lecture 187 Closing Words

Section 10: Bonus: Upload Images & MudBlazor Introduction

Lecture 188 Introduction

Lecture 189 Preparations

Lecture 190 Add the Image Model

Lecture 191 Add a New Migration

Lecture 192 Create a New Product with Multiple Images

Lecture 193 Include Multiple Images

Lecture 194 Update Product Images & Remove Images

Lecture 195 Install MudBlazor

Lecture 196 Display Images with MudBlazor

Lecture 197 Show an Image Carousel on the Product Details Page

Lecture 198 Use the First Image of an Image List in Products, ProductList & FeaturedProducts

C# and .NET developers who want to improve their skills and learn to build a full stack Blazor WebAssembly project,Beginner Blazor WebAssembly Developers who already have a little experience with Blazor and want to deepen their knowledge,Aspiring .NET developers who want to get the skills that might lead to more .NET & Blazor job opportunities

Course Information:

Udemy | English | 17h 39m | 9.02 GB
Created by: Patrick God

You Can See More Courses in the Developer >> Greetings from CourseDown.com