Full Stack: Angular And Java Spring Boot ECommerce Website (updated 10/2022)

Full Stack: Angular And Java Spring Boot E-Commerce Website
Last updated 10/2022
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz

Build a Full Stack E-Commerce website with Angular and Java Spring Boot (includes Stripe Credit Card Payments)

What you’ll learn

Develop a Full Stack E-commerce application with Angular front-end and Spring Boot back-end

Learn how to build Angular front-end applications .. all from the beginning. We assume no prior knowledge of Angular.

Develop a Spring Boot back-end using REST APIs and MySQL database

Process credit card payments using Stripe API

Develop your code using modern development tools such as IntelliJ, VS Code, Maven and npm

I am a RESPONSIVE INSTRUCTOR . post your questions and I will RESPOND in 24 hours.

Join an ACTIVE COMMUNITY of 80,000+ students that are already enrolled! Over 6,000+ Reviews – 5 STARS

Full Stack developers with Angular and Spring Boot are in HIGH-DEMAND. Level up your career and become a FULL STACK developer!

You can DOWNLOAD all source code and PDFs. Perfect for offline LEARNING and REVIEW.

Requirements

Spring Boot experience is required.

No experience required for Angular. I will teach you Angular from the beginning.

Description

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 How To Take This Course and How To Get Help

Lecture 3 Download the Source Code and PDF Files

Section 2: Angular Overview

Lecture 4 Angular Overview

Section 3: Set Up Development Tools

Lecture 5 Set Up Development Tools

Section 4: TypeScript Crash Course – Fundamentals

Lecture 6 TypeScript Overview

Lecture 7 Creating our first TypeScript application

Lecture 10 Creating Loops and Arrays – Overview

Section 5: TypeScript Crash Course – Creating Classes

Lecture 13 Creating Classes – Overview

Lecture 14 Creating Classes – Write Some Code

Lecture 15 Defining Accessors – Overview

Lecture 16 Defining Accessors – Write Some Code

Lecture 17 Configuring Compiler Options with tsconfig.json

Lecture 18 Parameter Properties

Lecture 19 TypeScript Modules: Import and Export

Section 6: TypeScript Crash Course – Inheritance and Interfaces

Lecture 20 Inheritance – Overview

Lecture 21 Inheritance – Creating the Superclass and Subclass

Lecture 22 Inheritance – Pulling it all together in a Main App

Lecture 23 Inheritance – Developing a second Subclass

Lecture 24 Inheritance – Adding Shapes to an Array

Lecture 25 Abstract Classes – Overview

Lecture 26 Abstract Classes – Write Some Code

Lecture 27 Interfaces – Overview

Lecture 28 Interfaces – Write Some Code

Section 7: Angular Crash Course – Fundamentals

Lecture 30 Exploring the Angular Project

Lecture 31 Creating a New Angular Project

Lecture 32 Behind The Scenes of An Angular Project – Overview

Lecture 33 Behind The Scenes of An Angular Project – Demo

Section 8: Angular Crash Course – Bootstrap CSS, Conditionals and Formatting

Lecture 39 Integrating Angular and Bootstrap CSS – Overview

Lecture 40 Integrating Angular and Bootstrap CSS – Write Some Code

Lecture 41 Angular Conditionals and Formatting – Overview

Lecture 42 Angular Conditionals and Formatting – Write Some Code

Lecture 43 FAQ: Angular Conditionals: How to highlight table row

Section 9: eCommerce Project – Spring Boot Backend

Lecture 44 Project Overview

Lecture 45 Spring Boot Project Set Up

Lecture 46 HEADS UP: Eclipse and Lombok

Lecture 47 Set Up Database Tables

Lecture 51 Create REST APIs with Spring Data JPA Repositories and Spring Data REST

Lecture 52 REST APIs – Configure for Read Only – Overview

Lecture 53 REST APIs – Configure for Read Only – Write Some Code

Section 10: eCommerce Project – Angular Front End – Product List

Lecture 56 Angular Project – Setup

Lecture 59 Angular Project – Update Angular Component

Lecture 60 Angular Project – Integrating Angular and Spring Boot for Full Stack App!

Lecture 61 Angular Project – Building an HTML Table

Lecture 62 Angular Project – Adding Product Images

Section 11: eCommerce Project – Integrating Online Shop Template

Lecture 63 Angular Project – Template Integration Overview

Lecture 65 Angular Project – Tour of HTML Template Files

Lecture 66 Angular Project – Install Bootstrap CSS Styles with npm

Lecture 67 Angular Project – Add local custom CSS styles

Lecture 68 Angular Project – Integrate Template Files and Logos

Lecture 69 Angular Project – Run the App

Lecture 70 Angular Project – Add support for Product Grid

Lecture 71 Angular Project – Enhance Application with Product Images

Lecture 72 FAQ: Should I Store Images as BLOBs in Database or Files on file system?

Section 12: eCommerce Project – Search for Products by Category

Lecture 76 Angular Project – Search for Products by Category – Code – Define routes

Lecture 77 Angular Project – Search for Products by Category – Code – Define Router Outlet

Lecture 78 Angular Project – Search for Products by Category – Code – Enhance ProductList

Lecture 79 Angular Project – Search for Products by Category – Code – Update Spring Boot

Lecture 80 Angular Project – Search for Products by Category – Code – Update ProductService

Section 13: eCommerce Project – Search for Products by Category (Dynamic Search Component)

Lecture 81 Angular Project – Search for Products by Category (Dynamic Search Component 1)

Lecture 82 Angular Project – Search for Products by Category (Dynamic Search Component 2)

Lecture 83 Angular Project – Dynamic Search Component – Modify Spring Boot App

Lecture 84 Angular Project – Dynamic Search Component – Create Component

Lecture 85 Angular Project – Dynamic Search Component – Call Product Service

Lecture 86 Angular Project – Dynamic Search Component – Add Dynamic Code to HTML

Lecture 87 Angular Project – Dynamic Search Component – View Console Logs

Lecture 88 FAQ: Display Category Name in Product List Grid

Section 14: eCommerce Project – Search for Products by Keyword

Lecture 92 Angular Project – Search for Products by Keyword – Modify Spring Boot App

Lecture 93 Angular Project – Search for Products by Keyword – Angular Search Component

Lecture 94 Angular Project – Search for Products by Keyword – Send Data to search route

Lecture 95 Angular Project – Search for Products by Keyword – Enhance ProductList Component

Lecture 96 Angular Project – Search for Products by Keyword – Update ProductService API

Lecture 97 Angular Project – Search for Products by Keyword – Handle for No Products Found

Section 15: eCommerce Project – Product Master-Detail View

Lecture 98 Angular Project – Product Master-Detail View – Overview

Lecture 99 Angular Project – Product Master-Detail View – Create new component and route

Lecture 100 Angular Project – Product Master-Detail View – Add router links on Master page

Lecture 101 Angular Project – Product Master-Detail View – Enhance the Details Component

Lecture 102 Angular Project – Product Master-Detail View – Update Product Service and HTML

Lecture 103 Angular Project – Product Master-Detail View – Add more Product Details

Lecture 104 IDE Extension – Angular Language Service

Section 16: eCommerce Project – Pagination

Lecture 105 Angular Project- Pagination Overview

Lecture 108 Angular Project – Pagination – Install ng-bootstrap

Lecture 109 Angular Project – Pagination – Add Pagination support to Product Service

Lecture 110 Angular Project – Pagination – Update Product List Component for Pagination

Lecture 111 Angular Project – Pagination – Enhance HTML template to use Pagination Component

Lecture 112 Angular Project – Pagination Demo

Lecture 115 Angular Project – Pagination – Setting Max Size and Adding Boundary Links

Lecture 116 Angular Project – Pagination – Keyword Search Overview

Lecture 117 Angular Project – Pagination – Keyword Search – Update ProductService

Lecture 118 Angular Project – Pagination – Keyword Search – Update ProductListComponent

Lecture 140 Angular Project – Increment Item Quantity – Overview

Lecture 141 Angular Project – Increment Item Quantity – Layout the Buttons

Lecture 142 Angular Project – Increment Item Quantity – Add Event Handlers

Lecture 143 Angular Project – Decrement/Remove Item Quantity – Overview

Lecture 144 Angular Project – Decrement Item Quantity – Write Some Code

Lecture 145 Angular Project – Remove Item – Write Some Code

Section 19: eCommerce Project – Checkout Form Layout

Lecture 148 Angular Project – Checkout Form Layout – Generate Checkout Component

Lecture 149 Angular Project – Checkout Form Layout – Add support for Reactive Forms

Lecture 150 Angular Project – Checkout Form Layout – Layout Form Controls in HTML

Lecture 151 Angular Project – Checkout Form Layout – Add Event Handling for Submit

Lecture 152 Angular Project – Checkout Form Layout – Shipping Address

Lecture 153 Angular Project – Checkout Form Layout – Billing Address

Lecture 154 Angular Project – Checkout Form Layout – Credit Card

Lecture 155 Angular Project – Checkout Form Layout – Review Your Order

Section 20: eCommerce Project – Checkout Form – Drop-Down Lists

Lecture 156 Angular Project – Checkout Form – Populate Credit Card Dates – Overview

Lecture 157 Angular Project – Checkout Form – Create Form Service

Lecture 158 Angular Project -Checkout Form – Retrieve Months and Years from Service

Lecture 159 Angular Project – Checkout Form – Populate Drop-Down Lists for Months and Years

Lecture 160 Angular Project – Checkout Form – Dependent Fields – Overview

Lecture 161 Angular Project – Checkout Form – Dependent Fields – Write Some Code

Lecture 162 Angular Project – Checkout Form – Populate Countries and States – Overview

Lecture 163 Angular Project – Checkout Form – Populate Countries and States – Create DB

Lecture 164 Angular Project – Checkout Form – Populate Countries and States – JPA Entities

Lecture 165 Angular Project – Checkout Form – Populate Countries and States – Repositories

Lecture 166 Angular Project – Checkout Form – Populate Countries and States – Repositories 2

Lecture 167 Angular Project – Checkout Form – Populate Countries and States – REST Config

Lecture 168 Angular Project – Checkout Form – Populate Countries and States – Frontend

Lecture 169 Angular Project – Checkout Form – Populate Countries and States – Create Classes

Lecture 170 Angular Project – Checkout Form – Populate Countries and States – Component

Lecture 171 Angular Project – Checkout Form – Populate Countries and States – Event Handler

Lecture 172 Angular Project – Checkout Form – Populate Countries and States – States

Lecture 173 Angular Project – Checkout Form – Populate Countries and States – Billing

Lecture 174 Angular Project – Checkout Form – Populate Countries and States – Console logs

Lecture 175 Angular Project – Checkout Form – Populate Countries and States – Bug Fix

Section 21: eCommerce Project – Checkout Form – Validation

Lecture 178 Angular Project – Checkout Form – Add Validation Rules

Lecture 179 Angular Project – Checkout Form – Display Validation Error Messages

Lecture 180 Angular Project – Checkout Form – Display Validation Error Messages continued

Lecture 181 Angular Project – Checkout Form – Custom Validator Rule – Overview

Lecture 182 Angular Project – Checkout Form – Custom Validator Rule – Define the Rule

Lecture 183 Angular Project – Checkout Form – Custom Validator Rule – Apply the Rule

Section 23: eCommerce Project – Checkout Form – Save the Order to Database – Backend

Lecture 197 eCommerce Project – Checkout Form – Save the Order to Database – Overview

Lecture 198 eCommerce Project – Checkout Form – Save the Order to Database – Run DB Script

Lecture 199 eCommerce Project – Checkout Form – Save the Order to Database – Entities – 1

Lecture 200 eCommerce Project – Checkout Form – Save the Order to Database – Entities – 2

Lecture 201 eCommerce Project – Checkout Form – Save the Order to Database – Entities – 3

Lecture 202 eCommerce Project – Checkout Form – Save the Order to Database – Entities – 4

Lecture 203 eCommerce Project – Checkout Form – Save the Order to Database – Create DTOs

Lecture 204 eCommerce Project – Checkout Form – Save the Order to Database – Repo+Service 1

Lecture 205 eCommerce Project – Checkout Form – Save the Order to Database – Repo+Service 2

Lecture 206 eCommerce Project – Checkout Form – Save the Order to Database – Repo+Service 3

Lecture 207 eCommerce Project – Checkout Form – Save the Order to Database – REST Controller

Lecture 208 eCommerce Project – Checkout Form – Save the Order to Database – Postman Test

Section 24: eCommerce Project – Checkout Form – Save the Order to Database – Frontend

Lecture 209 eCommerce Project – Checkout Form – Save the Order – Frontend Overview

Lecture 210 eCommerce Project – Checkout Form – Save the Order – Frontend – Common Classes

Lecture 211 eCommerce Project – Checkout Form – Save the Order – Frontend – Checkout Service

Lecture 212 eCommerce Project – Checkout Form – Save the Order – Frontend – Injection

Lecture 213 eCommerce Project – Checkout Form – Save the Order – Frontend – Order Items

Lecture 214 eCommerce Project – Checkout Form – Save the Order – Frontend – Purchase

Lecture 215 eCommerce Project – Checkout Form – Save the Order – Frontend – Call Service

Lecture 216 eCommerce Project – Checkout Form – Save the Order – Frontend – Test App

Section 25: Release 3.0 – Security – Login/Logout

Lecture 217 Security – Login/Logout – Release 3 Tasks

Lecture 220 Security – Login/Logout – Okta Integration – Authorization Server

Lecture 221 Security – Login/Logout – Okta Integration – App Configuration

Lecture 222 Security – Login/Logout – Okta Integration – Sign-In Widget

Lecture 223 Security – Login/Logout – Okta Integration – Login Status Component

Lecture 224 Security – Login/Logout – Coding – Create OIDC Client App

Lecture 225 Security – Login/Logout – Coding – Develop App Configuration

Lecture 226 Security – Login/Logout – Coding – Install Okta Dependencies

Lecture 227 Security – Login/Logout – Coding – Create the Login Component

Lecture 228 Security – Login/Logout – Coding – Render the Sign-In Widget

Lecture 229 Security – Login/Logout – Coding – Develop Login Status Component

Lecture 230 Security – Login/Logout – Coding – Add CSS for Login Status Component

Lecture 231 Security – Login/Logout – Coding – More CSS for Login Status Component

Lecture 232 Security – Login/Logout – Coding – Connecting Routes

Lecture 233 Security – Login/Logout – Coding – App Module Configuration

Section 26: Release 3.0 – Security – VIP Member Access – Protected Routes

Lecture 234 Release 3.0 – Security – VIP Member Access – Protected Routes – Overview

Lecture 235 Release 3.0 – Security – VIP Member Access – Protected Routes – Component Dev

Lecture 236 Release 3.0 – Security – VIP Member Access – Protected Routes – Configuration

Lecture 237 Release 3.0 – Security – VIP Member Access – Protected Routes – Testing Access

Section 27: Release 3.0 – Security – Handling Browser Refresh

Lecture 240 Release 3.0 – Security – Handling Browser Refresh – Loading and Persisting Items

Lecture 241 Release 3.0 – Security – Handling Browser Refresh – Running the Application

Lecture 242 Release 3.0 – Security – Handling Browser Refresh – Exploring Storage in Browser

Section 28: Release 3.0 – Refactoring

Lecture 243 Release 3.0 – Refactoring – Handle Customer By Email – Overview

Lecture 244 Release 3.0 – Refactoring – Handle Customer By Email – Coding

Lecture 245 Release 3.0 – Refactoring – Handle Customer By Email – Run the App

Lecture 248 Release 3.0 – Refactoring – Backend Configs – Coding – Fix Deprecated Method

Lecture 249 Release 3.0 – Refactoring – Backend Configs – Coding – Configure CORS Mapping

Lecture 250 Release 3.0 – Refactoring – Backend Configs – Coding – Configure @RestController

Lecture 251 Release 3.0 – Refactoring – Backend Configs – Coding – Disable HTTP PATCH method

Section 29: Release 3.0 – Security – Order History – Base Functionality

Lecture 252 Release 3.0 – Security – Order History – Backend Overview

Lecture 253 Release 3.0 – Security – Order History – Backend Coding

Lecture 254 Release 3.0 – Security – Order History – Frontend Overview

Lecture 255 Release 3.0 – Security – Order History – Frontend Coding – Track User’s Email

Lecture 256 Release 3.0 – Security – Order History – Frontend Coding – OrderHistory Service

Lecture 257 Release 3.0 – Security – Order History – Frontend Coding – OrderHistoryComponent

Lecture 258 Release 3.0 – Security – Order History – Frontend Coding – Update HTML Page

Lecture 259 Release 3.0 – Security – Order History – Frontend Coding – Add Orders Button

Lecture 260 Release 3.0 – Security – Order History – Frontend Coding – Run the App

Lecture 261 Release 3.0 – Security – Order History – Frontend Coding – Sort Orders by Date

Section 30: Release 3.0 – Security – Order History – Secure Backend

Lecture 262 Release 3.0 – Security – Order History – Secure Backend Overview

Lecture 263 Release 3.0 – Security – Order History – Secure Backend – Set Up Okta App

Lecture 264 Release 3.0 – Security – Order History – Secure Backend – Configure Properties

Lecture 265 Release 3.0 – Security – Order History – Secure Backend – Protect Endpoints

Lecture 266 Release 3.0 – Security – Order History – Secure Backend – Testing the App

Section 31: Release 3.0 – Security – Order History – Secure Frontend

Lecture 269 Release 3.0 – Security – Order History – Secure Frontend – Create an Interceptor

Lecture 270 Release 3.0 – Security – Order History – Secure Frontend – Pass Access Token

Lecture 271 Release 3.0 – Security – Order History – Secure Frontend – Register Interceptor

Lecture 272 Release 3.0 – Security – Order History – Secure Frontend – Test the App

Lecture 273 Release 3.0 – Security – Order History – Secure Frontend – Resolve Checkout

Section 32: Secure Communication with HTTPS – Angular Frontend

Lecture 274 Secure Communication with HTTPS – Angular Frontend – Overview

Lecture 277 Secure Communication with HTTPS – Okta Updates – Overview

Lecture 278 Secure Communication with HTTPS – Okta Updates – Configuration

Section 33: Secure Communication with HTTPS – Spring Boot Backend

Lecture 279 Secure Communication with HTTPS – Spring Boot Backend – Overview

Section 34: Angular Environment Configuration

Lecture 282 Angular Environment Configuration – Overview

Lecture 283 Angular Environment Configuration – Coding

Section 35: Credit Card Payment Processing with Stripe

Lecture 290 Credit Card Payment Processing Overview

Lecture 291 Payment Processing – Stripe API Overview

Lecture 296 Payment Processing – Stripe – Backend Coding Setup – Maven

Lecture 297 Payment Processing – Stripe – Backend Coding Setup – API Keys

Lecture 298 Payment Processing – Stripe – Backend Coding – Checkout Service

Lecture 299 Payment Processing – Stripe – Backend Coding – Checkout Controller

Lecture 311 Payment Processing – Stripe – Bug Fix for Total Amount

Lecture 312 Payment Processing – Stripe – Bug Fix for Browser Reload after Checkout

Lecture 313 Payment Processing – Stripe – Add Customer Details – Overview

Lecture 316 Payment Processing – Stripe – Disable Payment Button – Overview

Lecture 317 Payment Processing – Stripe – Disable Payment Button – Coding

Lecture 318 Payment Processing – Stripe – Email Receipts – Overview

Section 36: Course Summary

Lecture 321 Thank You

The course is appropriate for all Spring Boot developers.