Skip to main content
00:00/00:00
Lecture 78 of 121

Creating the React Project

Download Course (Free)

Course Content

0 / 121 completed
Section 1: Course Curriculum121 videos

Who is the course for and prerequisites

7m

Introduction

7m

What will you learn in this course

20m

Non-functional requirements

7m

Functional requirements

4m

Section recap

2m

Welcome

8m

Discovering the Short Url length

14m

Designing the high-level architecture

19m

Assigning technologies to the architecture

8m

Introduction (2)

2m

Setting up GitHub environments

6m

Creating and setting up the GitHub repository

8m

Creating the API Project

11m

Section recap (2)

1m

Creating GitHub Actions for API

13m

Introduction (3)

7m

What is Infrastructure as Code and Bicep

13m

Writing Bicep scripts for URL shortener infrastructure

32m

Deploying API with GitHub Actions

11m

Deploying infrastructure to multiple environments

25m

Section recap (3)

1m

Introduction (4)

7m

Deploying infrastructure to Azure with GitHub Actions

23m

Deploying Azure Key Vault using Bicep

13m

Introduction (5)

1m

Section recap (4)

2m

Integrating with Key Vault

22m

Feature Design

12m

Adding input validation

17m

Handling requests to create a Short URL

56m

Elevate GH Actions privileges to write permissions

8m

Deploying CosmosDB resources with Bicep

12m

Creating an API endpoint to create Short URLs

24m

Generating a short URL

1h 3m

Storing URLs in CosmosDB

31m

Increment token and avoid duplication

11m

Introduction (6)

2m

Section recap (5)

6m

Demo

16m

Creating the Token Range API infrastructure

4m

Feature Design (2)

8m

Setting up PostgreSQL for token management

18m

Creating the Token Range API GitHub Action Workflow

30m

Deploying the database schema

12m

Handling token range requests

1h 6m

Demo (2)

10m

Adding a retry policy with Polly

17m

Creating an hosted service for range retrieval

1h 3m

Introduction (7)

1m

Section recap (6)

2m

Using Microsoft Entra ID for authentication

4m

Deploying Entra ID resources using Bicep

20m

Configuring Entra ID application for the API

8m

Giving permissions to GitHub Action deploy EntraID Application

9m

Adding JWT authentication with Entra ID in API

19m

Section recap (7)

2m

Accessing user identity in the API

19m

Introduction (8)

5m

Deploying the Redirect API using Bicep

6m

Setting up Azure Redis Cache

6m

Creating the Redirect API GitHub Action Workflow

16m

Demo (3)

9m

Section recap (8)

2m

Using Redis Cache for better performance

26m

Implementing URL redirection logic

37m

Introduction (9)

1m

Addressing data challenges

21m

Setting up Azure Function for data processing using Bicep

24m

Implementing CosmosDB Trigger Azure Function

21m

Creating GitHub Action for Azure Function

28m

Section recap (9)

3m

Demo (4)

3m

Introduction (10)

2m

What is React.js

8m

Adding a List endpoint to the API

56m

Add pagination using Continuation Tokens

41m

Creating the React Project

15mNow Playing

Deploying Azure Static Web App using Bicep

8m

Configuring the Web Application in Microsoft Entra ID

10m

Enable CORS on Api

7m

Creating GitHub Action for Static Web App

16m

Applying style to the Components

17m

Building a form to create a short URLs

21m

Integrating MSAL.js for Entra ID authentication

57m

Listing URLs in the UI

31m

Section recap (10)

4m

Let's practice

6m

Introduction (11)

2m

Solution

8m

What is a Health Check

6m

Configuring Health Checks using Bicep

6m

Section recap (11)

4m

Implementing a HealthCheck

28m

Applying Health Checks across all services

19m

Introduction (12)

2m

What is OpenTelemetry

8m

Collecting Request Metrics

7m

Adding OpenTelemetry to services

34m

Configuring Application Insights and Log Analytics workspace with Bicep

30m

Section recap (12)

5m

Demo (5)

17m

Introduction (13)

1m

What is Azure FrontDoor

10m

Configuring the Health Probe

9m

Adding a Rate Limit Rule with WAF to Front Door

12m

105. 16.3

46m

Section recap (13)

2m

Setting up a custom domain with Front Door

22m

Demo (6)

4m

Introduction (14)

2m

Setting up a Virtual Network

6m

Allowing FrontDoor requests

11m

Implementing access restrictions for CosmosDB

6m

Adding services to the Virtual Network

37m

Implementing access restrictions for Redis

16m

Implementing access restrictions for PostgreSQL

11m

Section recap (14)

3m

Allowing GitHub Action deployments to App Services

19m

Conclusion

4m

Implementing access restrictions for KeyVault

4m