E-Commerce app with .NET, Angular [intermediate-level-dev]

Name: E-Commerce app with .NET, Angular [intermediate-level-dev]
Rating: 4.2 (3 reviews)

Develop a Fullstack application using Angular, .Net Core, Bootstrap and PrimeNG UI Library

Created byYoussef Kharoufi

Last updated 11/2023

English

What you'll learn

Create an Web Application of type eCommerce Using the .NET Core, Angular, and PrimeNG
Complete your fullstack application with the course resources (html and css files)
Learn Backend development with .NET Core which is a C# framework
Learn Commands and Queries to be able to communicate with your SQL Database
Learn to Implement Authentication based on JWT tokens
Learn how to integrate components from the free PrimeNG library to your API

Course content

8 sections • 42 lectures • 7h 27m total length

Intro1:06
What the final app looks like5:58
Softwares installment2:16
Backend API creation4:19

Creating the frontend app4:47
Building the frontend app skeleton13:36
Account Service Setup8:41
Attempting to login (CORS Policy)19:56
Successfully loging in (CORS policy)7:09
Enable authentication and a CORS policy in the API, and configure JSON serialization with reference loop handling. Test login on the front end and verify login state in local storage.
Login features and bugs correction4:19
Register (part 1)16:11
Register (part 2)16:31
Register (part 3)16:57
Register function12:23

Creating our cartItem model7:55
Products Item Controller15:16
Create a backend cart controller in the .NET API and persist a user's cart across sessions. Add products to the cart with quantity management, handling existing items and cart items.
Cart Service (part 1)15:17
Create a back-end cart items count endpoint and wire a front-end service to display a badge showing the cart item count when adding to cart.
Assigning cart and adding one product14:42
Add to cart11:29
Cart Controller14:41
Cart Service (part 2)7:15
Cart Component (part 1)13:52
Create and connect a cart component in an Angular e-commerce app, wire cart route, fetch user cart items, and compute the total price with increment, decrement, and delete item actions.
Cart Component (part 2)14:48
Cart Component final touches8:24
Contact Page and SideBar7:20

Backend API Deployment with Azure9:15
Deploy the backend to Azure by creating a web app and SQL Server, updating the connection string, running migrations, and validating the get all products endpoint.
Don't forget your repo, and push the code after you are done with next video2:38
Create a GitHub repository, push your e-commerce UI project using git add, commit, and git push origin main, then configure the docs folder and GitHub Pages for deployment.
Deplying to Github pages7:46

Requirements

DISCLAIMER : This is not a course for beginners ! You are expected to know the basics of Javascript and to know basic angular terminology (such as what is a component, a service...).
You are also expected to know what a Model View Controller formation is in .NET Core

Description

Build a fullsatck .Net Core / Angular e-commerce Application.

This course covers in detail every aspect of creating a backend with .Net Core. It also teaches you how to test your routes by using a mock api software named Postman. Further more, you are to discover everything there is to know about a frontend coded with Angular.

About the UI Library you will be using in this course : PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.

We will be deploying our app in Azure Portal and Github Pages. The Azure portal is a web-based, unified console that provides an alternative to command-line tools. You can manage your Azure subscription with the Azure portal. Build, manage, and monitor everything from simple web apps to complex cloud deployments.

For the database, we will use Microsoft SQL Server on a local scale, then publish the database in Azure.

This course targets developers from different levels, from intermediate to advanced programming levels (not beginners).

You are expected to know the very basic terms of Javascript, Angular and .Net Core such as "Services", "Components", "npm packages", "Controllers", "Extensions"... .

Who this course is for:

Intermediate or advanced level .Net Core and Angular developers of freelancers.

E-Commerce app with .NET, Angular [intermediate-level-dev]

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 14min

Backend API setup (part 1)6 lectures • 1hr 19min

Frontend User (login, register) features10 lectures • 2hr 1min

Index (Backend API configuration)1 lecture • 7min

Products in the frontend5 lectures • 46min

Cart Management11 lectures • 2hr 11min

Final Additional Features2 lectures • 30min

Deployment3 lectures • 20min

Requirements

Description

Who this course is for: