Build a Webshop – Angular, Node.js, TypeScript, Stripe
By freeCodeCamp.org
Published: Oct 11, 2022“
Build a Webshop! In this tutorial, we are going to build a webshop or e-commerce store using Angular/TypeScript, Express.js, and Stripe.
We are gonna learn how to use Angular material and Tailwind to structure our UI and how to integrate store API into our app.
Also at the end, we will build a checkout, and we are gonna integrate Stripe so that we can process payments.
Slobodan Gajic created this course. Check out his channel: https://www.youtube.com/c/CodewithSloba
Resources
- Code: https://github.com/bobangajicsm/E-Commerce-Store
- Fake store API: https://fakestoreapi.com/
- Stripe: https://stripe.com/
- Prebuilt checkout page: https://stripe.com/docs/checkout/quickstart
- Stripe Shipping Code: https://stripe.com/docs/payments/checkout/shipping
Contents
- (0:00:00) Intro
- (0:01:01) Installing dependencies and project setup
- (0:18:11) Building home page
- (1:27:11) Building cart page
- (1:58:26) Implementing Cart logic
- (2:48:08) Implementing Store API
- (3:16:06) Stripe payment implementation
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
Tag: Angular
[#Script #Coding] Angular Course for Beginners
Angular Course for Beginners
By freeCodeCamp.org
Published: Sep 07, 2022“
Learn Angular in this complete course for beginners. First, you will learn the basics of Typescript and then you will learn about important Angular concepts such as binding, dependency injection, forms, routing, and more.
Santosh Yadav created this course.
Check out his channel: https://www.youtube.com/c/TechTalksWi…
https://twitter.com/SantoshYadavDev
https://github.com/sponsors/santoshya…Course Contents
Introduction
- (0:00:00) Introduction to Angular
- (0:09:56) Introduction to Typescript
- (0:28:57) SPA and Local Setup
Typescript
- (0:42:09) Typescript Data Types and Functions
- (1:25:56) Classes and Interface
- (2:11:10) Typescript decorators and tsconfig file
Angular Installation and Basics
- (2:20:24) Angular Installation and Binding Syntax
- (3:25:04) Built-in Directives
- (4:07:36) Built-in Pipes
- (4:30:10) Adding Bootstrap CSS to App
Lifecycle Hook and Component Communication
- (4:44:53) ngOnInt and Component Communication using Input and Output
- (5:09:32) Change Detection and ngOnChanges
- (5:36:51) ngDoCheck
- (5:42:01) ViewChild, ViewChildren and AfterViewInit
- (6:22:41) Content Projection, AfterContentInit and OnDestroy
Dependency Injection
- (6:44:55) Introduction
- (7:09:34) Resolution Modifiers
- (7:24:06) Value Providers
HttpClient and RxJs
- (7:41:04) Setting Up HttpClientModule
- (7:44:07) HttpService , RxJs observables and http get
- (8:01:28) RxJs Observable and Observer
- (8:11:59) Http Put and Delete
- (8:27:10) Http Request
- (8:40:55) ShareReplay RxJs Operators
- (8:47:17) Async Pipe
- (8:57:15) catchError operator
- (9:05:29) map operator
- (9:09:06) Http Interceptor
- (9:29:11) APP_INITIALIZER
Routing Basics
- (9:35:06) Angular Router and default Route
- (9:51:01) Adding Angular material and navigation
- (10:00:35) Wild card, dynamic route and ActivatedRoute service
- (10:23:19) ParamMap and Activate Route Service
Template Driven Forms
- (10:25:45) Introduction
- (10:50:20) Validation
- (11:09:26) Pristine, Dirty State and Reset Form
- (11:19:08) Custom Directives and Custom Validation
Advanced Routing
- (11:49:33) Navigation using Router Service
- (11:52:34) Feature and Routing Module
- (12:10:57) Nested and Child Route
- (12:19:41) Lazy Loading
- (12:35:49) Configure Lazy Loading using CLI
- (12:42:46) Using ProvidedIn Any
- (12:59:15) Router Events
- (13:06:00) Listening to Router Events
Route Guards
- (13:08:49) CanActivate
- (13:21:24) CanActivateChild
- (13:26:53) CanLoad
Reactive Forms
- (13:30:44) Introduction
- (13:41:33) Using Material Controls
- (13:59:54) Nested Form Controls
- (14:17:38) Dynamic Forms
- (14:45:09) Built-in Validators
- (14:51:50) Reset Form
- (14:55:15) Control Level Validation
- (15:05:22) SetValue and PatchValue
- (15:09:23) ValueChanges and UpdateOn
- (15:17:40) map operator with Form
- (15:29:55) Custom Validator
CanDeactivate Guard
- (15:57:10) CanDeactivate Guard and Form
Custom Pipe
- (16:15:04) Custom Pipe
Resolve Guard
- (16:25:39) Resolve Guard
Global Error Handling
- (16:45:46) Error Handling
Testing Basics
- (16:50:08) Introduction
- (16:56:59) First test
- (17:01:43) Testing Component and Service
Deployment and CI/CD
- (17:15:44) Using Netlify for Deployment
- (17:28:06) GitHub Actions to Automate Tasks
”
[#Script #Coding] Deploy 12 apps to AWS, Azure, & Google Cloud
Deploy 12 apps to AWS, Azure, & Google Cloud
By freeCodeCamp.org
Published: Jul 29, 2021“
Learn how to deploy 12 different apps to 3 different cloud services.
This course was created by Scalable Scripts. Check out their channel: https://www.youtube.com/c/ScalableScripts
- (0:00:00) Intro
- (0:00:37) Dockerize a React app
- (0:08:57) Dockerize a NodeJS app
- (0:13:40) Dockerize a VueJS app
- (0:20:00) Dockerize a NestJS app
- (0:26:26) Dockerize an Angular app
- (0:35:00) Dockerize a Golang app
- (0:41:23) Dockerize a Svelte app
- (0:47:27) Dockerize a Django app
- (0:52:12) Dockerize a Laravel app
- (0:56:32) Dockerize a .NET Core app
- (1:03:41) Dockerize a Spring Boot app with Kotlin
- (1:11:20) Dockerize a Deno app
- (1:16:33) Deploy a Container to AWS
- (1:25:22) Deploy a Container to Azure
- Deploy a Container to Google Cloud
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent...”
