Angular Shopping Store (Angular 17)

From Scratch to Successful Payment

What you'll learn

Students will learn how to create the user interface of the shopping store using Angular's powerful templating and component system.

They will learn to design and implement product listings, shopping carts, and other essential components.

Students will explore techniques for managing data within the Angular framework.

They will learn how to retrieve and display product information, handle user input, and update the shopping cart in real-time using Angular's data binding capab

Students will dive into integrating Stripe as the payment gateway for their shopping store.

Students will learn techniques to enhance the user experience of the shopping store.

Requirements

Basic knowledge of HTML, CSS, JavaScript and Angular

Description

In this hands-on guide, we'll embark on an exciting journey to create a fully functional online shopping store using the powerful Angular framework. Along the way, we'll delve into the intricacies of integrating Stripe, a popular payment gateway, to enable secure and frictionless transactions.We will use Signals and the latest Angular updates to the new syntax for control flow in templates.Our application will also be responsive design and performance optimized.This course is aimed at both beginners and intermediate developers who want to expand their knowledge of Angular and gain hands-on experience in developing robust e-commerce applications. By following the step-by-step instructions, you will not only learn the basic concepts of Angular, but also acquire the necessary skills to implement a secure and efficient payment system with Stripe.We start from scratch and build an Angular application that forms the backbone of our store. You will learn how to set up the development environment, configure Angular and create the key components and services for an e-commerce platform.But our journey doesn't stop here. Knowing that a successful shopping experience depends on reliable payment processing, we will explore the integration of Stripe into our application. By seamlessly integrating Stripe's powerful API, you'll learn how to process payments securely and efficiently and provide your customers with a smooth checkout process.To ensure a comprehensive understanding of the payment flow, we will not only cover the server-side implementation, but also focus on the client-side experience. You will learn how to create intuitive success and abandonment pages that inform the user about the payment status and confirm successful transactions. This will allow you to create a seamless and professional user experience that increases customer satisfaction and trust.At the end of this journey, you will have the knowledge and skills you need to create a fully functional online store with Angular and process payments with Stripe.So, let's start this exciting adventure and harness the potential of Angular and Stripe to build your own successful online shopping store. Get ready to turn your ideas into reality and provide users with a secure and hassle-free shopping experience!

Overview

Section 1: Chapter 1: Preview

Lecture 1 1.1 Desktop Preview

Lecture 2 1.2 Mobile Preview

Lecture 3 1.3 Application Flow

Lecture 4 1.4 Projects

Lecture 5 Source Code

Section 2: Chapter 2: Angular Project Structure

Lecture 6 2.1 Pages

Lecture 7 2.2 Layout

Lecture 8 2.3 Home Page Layout

Lecture 9 2.4 Cart Page Layout

Lecture 10 2.5 Project Folder Structure

Lecture 11 2.6 Development Steps

Lecture 12 2.7 Development Steps

Section 3: Chapter 3: Create the Angular Application

Lecture 13 3.1 Create the Angular Application

Lecture 14 3.2 Do the Basic Setup

Lecture 15 3.3 Run the Application

Section 4: Chapter 4: The Top Bar

Lecture 16 4.1 Create It

Lecture 17 4.2 TS

Lecture 18 4.3 HTML

Lecture 19 4.4 CSS

Lecture 20 4.5 Use It

Lecture 21 4.6 Style the Main Area

Section 5: Chapter 5: The Footer

Lecture 22 5.1 Create It

Lecture 23 5.2 TS

Lecture 24 5.3 HTML

Lecture 25 5.4 CSS

Lecture 26 5.5 Use It

Section 6: Chapter 6: The Home Page

Lecture 27 6.1 Create It

Lecture 28 6.2 Add Route

Section 7: Chapter 7: [Home] Deals

Lecture 29 7.1 Create It

Lecture 30 7.2 TS

Lecture 31 7.3 HTML

Lecture 32 7.4 CSS

Lecture 33 7.5 Use It

Section 8: Chapter 8: Products Data

Lecture 34 8.1 Create It

Lecture 35 8.2 Product Data Model

Lecture 36 8.3 Products Array

Section 9: Chapter 9: [Home] Products

Lecture 37 9.1 Create It

Lecture 38 9.2 TS

Lecture 39 9.3 HTML

Lecture 40 9.4 CSS

Lecture 41 9.5 Use It

Section 10: Chapter 10: Product Card Component

Lecture 42 10.1 Create It

Lecture 43 10.2 TS

Lecture 44 10.3 HTML

Lecture 45 10.4 CSS

Lecture 46 10.5 Use It

Section 11: Chapter 11: The Truncate Pipe

Lecture 47 11.1 Create It

Lecture 48 11.2 TS

Lecture 49 11.3 Use It

Section 12: Chapter 12: The Cart Service

Lecture 50 12.1 Create It

Lecture 51 12.2 The Data Models

Lecture 52 12.3 The cart Variable

Lecture 53 12.4 The addItem Method

Lecture 54 12.5 The increaseItem Method

Lecture 55 12.6 The decreaseItem Method

Lecture 56 12.7 The removeItem Method

Section 13: Chapter 13: Use the Cart Service

Lecture 57 13.1 Update the Products Component

Lecture 58 13.2 Update the Top Bar Component

Section 14: Chapter 14: The Cart Page

Lecture 59 14.1 Create It

Lecture 60 14.2 Add Route

Lecture 61 14.3 TS

Lecture 62 14.4 The Page Layout

Lecture 63 14.5 HTML - Header

Lecture 64 14.6 HTML - Items

Lecture 65 14.7 HTML - Total

Lecture 66 14.8 CSS

Lecture 67 14.9 Scroll Position Restoration

Section 15: Chapter 15: The Cart Item Card Component

Lecture 68 15.1 Create It

Lecture 69 15.2 TS

Lecture 70 15.3 HTML

Lecture 71 15.4 CSS

Lecture 72 15.5 Use It

Section 16: Chapter 16: Quantity Stepper

Lecture 73 16.1 Create It

Lecture 74 16.2 TS

Lecture 75 16.3 HTML

Lecture 76 16.4 CSS

Lecture 77 16.5 Use It

Section 17: Chapter 17: The Node.js Application

Lecture 78 17.1 Create It

Lecture 79 17.2 Install Dependencies

Lecture 80 17.3 Create the Server

Lecture 81 17.4 Charge the Customer

Section 18: Chapter 18: Checkout

Lecture 82 18.1 Install the Stripe Dependency

Lecture 83 18.2 Generate the Environments

Lecture 84 18.3 Provide the HttpClientModule

Lecture 85 18.4 Update the Cart Component

Lecture 86 18.5 Stripe Test Cards

Section 19: Chapter 19: The Success Page

Lecture 87 19.1 Create It

Lecture 88 19.2 Add Route

Lecture 89 19.3 TS

Lecture 90 19.4 HTML

Lecture 91 19.5 CSS

Lecture 92 19.6 Use It

Section 20: Chapter 20: The Continue Shopping Button

Lecture 93 20.1 Create It

Lecture 94 20.2 TS

Lecture 95 20.3 HTML

Lecture 96 20.4 CSS

Lecture 97 20.5 Use It

Section 21: Chapter 21. The Cancel Page

Lecture 98 21.1 Create It

Lecture 99 21.2 Add Route

Lecture 100 21.3 TS

Lecture 101 21.4 HTML

Lecture 102 21.5 CSS

Lecture 103 21.6 Use It

Section 22: Chapter 22: Deployment

Lecture 104 22.1 Angular App Deployment

Lecture 105 22.2 Node.js App Deployment

This course is ideal for web developers who want to expand their skills and learn how to build a complete online shopping store using Angular.,Individuals who have a basic understanding of Angular and want to deepen their knowledge specifically in the context of building an e-commerce store will find this course valuable.,This course is also beneficial for entrepreneurs or business owners who want to create their own online shopping store using Angular.,Students or individuals who are interested in learning Angular development and building practical applications will find this course valuable.