13 - Add Toast Component | Amigoscode

Autoplay
Autocomplete

Previous Lesson Complete and Continue

PROFESSIONAL Full Stack Developer

Java Master Class

1 - Java Master Class

Full Stack Professional Plus

1 - The Next Steps

TODO's

1 - Practise as I teach
2 - Discord
3 - Linkedin
4 - Textbook
5 - Exercises and Textbook
6 - Exercise Solutions
7 - Commit Your Changes
8 - Linux and Terminal
9 - JetBrains All Products - 1 Year Licence
10 - Intellij New Theme
11 - Repo
12 - Newsletter

Project and Environment Setup

1 - What we are about to cook
2 - Spring Initiliazer
3 - Open the project with IntelliJ
4 - pom.xml
5 - Lets clean up few things
6 - JDK

Getting Started with Spring Boot 3

1 - Your first Spring Boot Application
2 - Embedded Web Server
3 - Configuring Embedded Web Server
4 - Your first API
5 - @SpringBootApplication @RestController and @GetMapping
6 - Spring Web MVC
7 - JSON For Java
8 - Java Objects to JSON Objects
Code

HTTP, REST and APIs

1 - Introduction to HTTP
2 - The Evolution of HTTP
3 - HTTP Request and Response Messages
4 - HTTP Methods
5 - HTTP Status Codes
6 - URL
7 - API and REST API
8 - Public APIs and Other Types
9 - Why build APIs

Developer Tools

1 - Chrome Developer Tools
2 - Exploring XHR for our API
3 - Inspecting Instagram Network Activity
4 - Postman
5 - IntelliJ REST Client

CRUD - Read

1 - CRUD and Section Overview
2 - Customer Model
3 - Fake Database
4 - API Endpoint
5 - @PathVariable
Code

Structure the Backend

1 - N Tier Architecture
2 - Refactor - Controller Service and DAO
3 - @RestController @Service @Repository @Component
Code

Application Context and Beans

1 - Application Context
2 - Inspecting beans
3 - Bean Scopes
4 - Creating Beans
Code

Error Handling

1 - We are not handling error the right way
2 - Custom Exception
3 - @ResponseStatus
4 - Include error Message to Responses
Code

Databases

1 - Section Intro
2 - Postgres and Docker
3 - Verifying Docker Installation
4 - Postgres DB with Docker compose
5 - Connecting to Database
6 - Connecting to DB using IntelliJ IDEA
7 - Data Source & JPA
8 - Installing PostgreSQL Driver and Spring Data JPA Dependencies
9 - Configuring Datasource Properties
10 - Create Customer Table
11 - PSQL & SQL Cheatsheet
12 - Outro

Spring Data JPA

1 - Entity
2 - Inspecting The Database
3 - Column Contraints
4 - CustomerRepository
5 - CustomerJPADataAccessService class
6 - @Qualifier
7 - Saving Entities
8 - Exploring JPA Methods
9 - Outro
Code

Get Customer By Id Exercise

1 - The Problem
2 - Exercise Solution

CRUD - Create

1 - Intro
2 - Changing CustomerDao Interface
3 - Override insert customer
4 - Business Logic for Adding new Customer
5 - Controller @RequestMapping and @RequestBody
6 - Testing POST Request
Code

CRUD - Delete (Exercise)

1 - Exercise
2 - Exercise Solution

CRUD - Update (Exercise)

1 - Exercise
2 - Exercise Solution

Let's Pause

1 - Few Words

Datasources, JDBC & Flyway

1 - Intro
2 - JPA and Hibernate under the hood
3 - JDBC and JDBCTemplate
4 - DataSource and Connection Pools
5 - Flyway and Liquibase

Flyway

1 - Flyway
2 - Installing Flyway
3 - Applying and Understanding Flyway Migrations
4 - Lets Start Again but Right
5 - Create Customer Table
6 - Inspecting the Customer Table
7 - Working with Sequences
8 - Exercise
9 - Exercise Solution
10 - Migrations Documentation
11 - Match Entity Containts schema
12 - Validating Schema With Hibernate
13 - Exercise Solution
Code

JDBC Template

1 - Intro
2 - CustomerJDBC class
3 - JDBC Template Documentation
4 - Insert Customer
5 - Test Insert Customer
6 - Select All Customers
7 - RowMapper and ResultSet
8 - Refactor Row Mapper
9 - Exercise
10 - Exercise Solution
11 - Exercise
12 - Exercise Solution
13 - Why multiple DAO implementations
14 - More on databases later
Code

Spring JDBC vs JPA

1 - When to use JDBC over JPA

Important Question

1 - Would you 🤔?

Testing - Setup

1 - Intro
2 - Testcontainers
3 - H2
4 - Intalling Testcontainers
5 - Let's Write a test Testcontainers
6 - Inspecting DB created by Testcontainers
7 - Apply migrations with Flyway
8 - @DynamicPropertySource
9 - Don't Use @SpringBootTest for Unit Tests
10 - Abstract Testcontainres Logic
Code

Testing JDBC Template

1 - Intro
2 - JDBCTeamplate Test Class
3 - Configure JDBC Template
4 - selectAllCustomers Test
5 - selectCustomerById Test
6 - selectCustomerById Test 2
7 - Exercises
8 - Test Coverage
9 - Exercise Solution

Testing JPA Repositories

1 - Intro
2 - What do we need to test
3 - The Wrong Way
4 - @DataJpaTest and @AutoConfigureTestDatabase
5 - Writing Tests For CustomerRepository
Code

DAO Mock Testing

1 - No Need to Test DB Backed by List
2 - Mockito
3 - @Mock
4 - Test Select All Customers
5 - Test selectCustomerById
6 - Exercise Solution
Code

Testing Business Layer

1 - Intro
2 - Create CustomerServiceTest and MockitoExtension
3 - Test GetAllCustomers
4 - Test getCustomer
5 - Test if getCustomer Returns Empty Optional
6 - Test addCustomer
7 - addCustomer Test Code Explanation
8 - Test addCustomer 2
9 - Exercises
10 - Exercise Solution (Part 1)
11 - Exercise Solution (Part 2)
12 - Exercise
13 - Exercise Solution
Code

Integration Testing

1 - Intro
2 - @SpringBootTest
3 - WebTestClient
4 - The First Integration - canRegisterCustomer - Part 1
5 - Running canRegisterCustomer Integration Test
6 - The First Integration - canRegisterCustomer - Part 2
7 - canDeleteCustomer Integration Test
8 - Exercise Solution
Code

The Upcoming Sections

1 - Intro

The Jar file

1 - Intro
2 - Spring Boot Maven Plugin Jar
3 - Running Jar

Maven & Tests

1 - Intro
2 - Surefire Plugin
3 - Configuring Surefire Plugin
4 - Maven Failsafe Plugin
5 - The Jar File
6 - Section Outro

DevOps

1 - Intro
2 - What is DevOps
3 - DevOps Key Practices and Benefits
4 - Slides
5 - Outro

Docker

1 - Intro
2 - What is Docker
3 - Docker vs VM
Docker Commands Cheatsheet
4 - Undestanding Containers
5 - Docker Images and Containers
6 - Docker Architecture
7 - Docker Registries
8 - Docker Login
10 - Outro

Jib

1 - Intro
2 - What is Jib
3 - Configuring Jib Plugin
4 - Building Docker Image
5 - Pulling Image and Running Container
6 - Container Comunication
7 - Docker Network In Action
8 - Docker Compose
9 - Section Outro
10 - Outro
Code

AWS

1 - Intro
2 - Infrastructure Components Overview
3 - AWS Free Tier
4 - AWS Console Overview
5 - Elastic Beanstalk
6 - Elastic Beanstalk Key Terms
7 - Generate New Key Pair
8 - Saving Private Key

Elastic Beanstalk

1 - Getting Started With Elastic Beanstalk
2 - Elastic Container Service
3 - Dockerrun aws json
4 - Configure More Options
5 - Infrastructure Provisioned By EB
6 - Updating DB Host and Inspecting Logs
7 - SSH MAC & LINUX & Windows
8 - Bastions
9 - Create Customer DB
10 - Hooray we deployed the API
11 - Exploring EB
12 - Cloudformation
13 - Infrastructure As Code
14 - Multiple Environments
15 - There Are Many Other Ways To Deploy
Code

Git and Github

1 - Intro
2- What We Need To Do
3 - Organizing Folders (Monorepo)
Git Cheatsheet
4 - Create Github Repository
5 - Pushing code to Github
6 - Open the new Folder and Run Application
Code

Github Actions

1 - Intro
2 - Github Actions Overview

Continuos Integration

1 - Intro
2 - Creating the workfow
3 - Github Actions Services
4 - Checkout Action
5 - Setup Java Action
6 - Run Shell Command
7 - Commit and Push Workflow
8 - New Feature Branch
9 - Triggering the Workflow With Pull Request
10 - Make Build Workflow Fail
11 - Outro
Code

Continous Delivery

1 - Intro
2 - Create Deploy Workflow
3 - Postgres Service
4 - Setting Working Directory
5 - Clone Java and Login to Docker Hub
6 - Generate Custom Build Number
7 - Build Number Step
8 - Maven Verify Step
9 - SED Command
10 - Step to Replace tag in Dockerrun aws json
11 - The Deployment Process
12 - Create AWS Github Actions User with Programmatic Access
13 - Github Secrets for AWS
14 - AWS Elastic Beanstalk
15 - Commit and Push Dockerrun.aws.json STEP
16 - Continuous Delivery In Action
17 - Outro
Code

Slack Integration

1 - Intro
2 - Installing Slack
3 - Workspaces
4 - Webhooks
5 - Exercise
6 - Exercise Solution
7 - Deployment In Action With Slack Messaging
8 - Discord Webhooks

Javascript

React

1 - What is React
2 - Vite
3 - Scaffolding React App with Vite
4 - Application Folder Stucture
5 - SRC folder
6 - Understanding Available Scripts
7 - Clean up code to start fresh

Basics of React

1 - Intro
2 - JSX
3 - Components
4 - Creating Components
5 - Components and Props
6 - Props Children
7 - Tranformations with Map
8 - UseState hook
9 - UseEffect Hooks
10 - Outro
Code

React Building Our Web App

1 - Intro
2 - UI Libraries
3 - Installing Chakra
4 - Testing ChakraUI installation
5 - SideBar
6 - Customize The SideBar
7 - Axios and getCustomers method
8 - Vite environement variables
9 - Lets try to fetch data from the server
10 - CORS
11 - Allow CORS on the backend
12 - Render Customers & Loading Spinner
13 - Card Component
14 - Wrap and Wrap Item
15 - Customizing Card
16 - Include sha and commit to CD workflow
17 - Watch CD Workflow Deploy CORS changes

Backend and React - Gender Exercise (Challenging)

1 - Intro
2 - Exercise

Backend and React - Gender Exercise Solution

1 - Add New Migration
2 - Updating Customer Contructor to Include Gender
3 - Fixing Tests
4 - Fixing Integration Tests
5 - Add Gender and Profile Picture to Frontend
6 - Deployment
7 - Pull Lastest amigoscode-api version
8 - Outro
Code

React - New Customer Feature

1 - Intro
2 - Create Customer Button
3 - Drawer
4 - Installing Formik and YUP
5 - CreateCustomerForm component
6 - Customise Form (Part 1)
7 - Customise Form (Part 2)
8 - Disable submit button if form not valid
9 - Axios Post
10 - onSubmit
11 - Fetch customers on save
12 - Toasts and Notifications
13 - Using success and error notifications

React - Delete Customer Exercise

1 - Exercise
2 - Exercise Solution

React - Update Customer Exercise

1 - Exercise
2 - Exercise Solution
3 - Final Touches
Code

Dockerise React App and Docker Compose

1 - Intro
2 - Dockerfile react frontend
3 - Building React Frontend Docker Image
4 - Running React Frontend Container
5 - Looking inside the container
6 - Adding react service to docker compose
Code

React Frontend Deployment

1 - Intro
2 - Docker Build Args
3 - React Frontend Container Definition
4 - Deploying
5 - AWS Security Group and Rules
6 - Adding Security Group Rule
7 - Outro
Code

AWS - Exercise

1 - Exercise
2 - Exercise Solution

Security & JWT Overview

1 - Intro
2 - The Problem
3 - Spring Security
4 - Exploring Spring Security Documentation
5 - Introduction to JWT
6 - The Structure of JWT
7 - How We Are Going to Secure Our Endpoints

Implementing Security

1 - Installing Dependencies
2 - Starting the server
3 - Generate JWT Token
4 - Generate JWT Token - Signing
5 - Important
6 - Send Signed Token to Client
7 - Allow Only POST Requests to Register Customers
8 - Inspecting JWT Token
9 - Security FIlter Chain
10 - The Next Steps
11 - UserDetails
12 - Implement UserDetails
13 - Fixing Tests
14 - UserDetailsService
15 - Password Encoder and BCrypt
16 - Hashed Passowords In Action
17 - Authentication Provider
18 - DaoAuthenticationProvider
19 - JWT Token Validation Overview
20 - JWT Auth Filter and Extract Token
21 - Extract Subject From Token
22 - Validate Token and Set Authentication
23 - Registering The Filter
24 - Attatching JWT to Requests
25 - Fixing CustomerRepositoryTest
26 - Lets Pause
27 - Spring Security Architecture Explained
Code
28 - Outro

DTO Pattern

1 - Intro
2 - DTO Pattern
Code

Implementing Security PART 2

1 - Fixing canRegisterCustomer Integration Test
2 - We Have A Problem With Spring Security
3 - Authentication Entrypoint
4 - @ControllerAdvice and @ExceptionHandler
5 - Handle InsufficientAuthenticationException and Exception
6 - Exercise
7 - Exercise Solution canDeleteCustomer
8 - Exercise Solution canUpdateCustomer
9 - CORS Issue Again
10 - Spring Security CORS
11 - Login Exercise
12 - Login Exercise Solution
13 - Login Integration Test
14 - Test Login using Postman
15 - POST Mistake
16 - Deployment
17 - Testing API
Code
18 - Exercise
19 - Exercise Solution
20 - Outro

React - Login & Registration

1 - Intro
2 - Section Intro
3 - Installing React Router
4 - React Router Routes
5 - Login Page
6 - Syling Right Side of Login Page
7 - Login Form P1
8 - Login Form P2
9 - Login Post Method
10 - React Context
11 - AuthProvider
12 - Using Context
13 - Performing Login
14 - Local Storage
15 - Adding to Local Storage
16 - Redirected After Successful login
17 - Attach Authorization Header to HTTP Requests
18 - Add Password To Create New Customer
19 - Logout
20 - Add Details about Current Logged in Customer
21 - Protected Route
22 - Check Token Expiration with JWT Decode
23 - UseEffect in AuthProvider
24 - Redirect to Dashboard if logged in
25 - Testing when token expires
26 - Login Page Deployment
Code
27 - Exercise
28 - Exercise Solution (Part 1)
29 - Exercise Solution (Part 2)
30 - Deployment for Registration

AWS Load Balancers, Route53, Certificate Manager and SSL/TLS

1 - Intro
2 - Section Overview
3 - Load Balancers Overview
4 - The Need For a Brand New Environment
5 - Create new EB Environment with ALB
6 - Deploy new version with correct DB details
7 - Understanding ALB health checks
8 - Actuator and Health Endpoint
9 - Update Github Secrets
10 - Deploy Actuator Changes
11 - Changing LB Health Endpoint
12 - Route 53 - Register Domain
13 - Create A Record for Load Balancer
14 - SSL and TLS
15 - Issuing Certificate with Certificate Manager
16 - HTTPS Listener
17 - HTTP to HTTPS Redirects
18 - Outro
Code

AWS Amplify - React Deployment

1 - Managed Hosting Services for Web Apps
2 - Installing AWS Amplify
3 - Choosing Repo and Branch
4 - Build Settings (Part 1)
5 - Build Settings (Part 2)
6 - Deployment
7 - Custom Domain
8 - Protect Web App
9 - Previews
10 - Change React UI
11 - Raise PR
12 - Merge PR

Typescript

Getting Started with Angular

1 - Intro
2 - What is angular
3 - What is a module
4 - Components in angular
5 - Install angular cli
6 - Bootstrap the app with npm
7 - Explain project structure (src folder)
8 - Explain project structure (package json file)
9 - Explain project structure (angular json file)
10 - Strip sample application

Basics of Angular

1 - Create a new angular component
2 - Display and use a component
3 - Data binding
4 - Two ways binding
5 - Event binding
6 - Directives - Conditions - Nglf (Part 1)
7 - Directives - conditions - Ngfor (Part 2)
8 - Inputs
9 - Output (Part 1)
9.1 - Output (Part 2)
10 - Services (Part 1)
10.1 - Services (Part 2)
11 - Routing-bootstrapping
12 - Routing - Definition
13 - Routing - Declaring a new route
14 - Routing - Navigating to different routes by template and by injecting router service (programatically)

Angular - Application Skeleton

1 - Walking through PrimeNG Website
2 - Cleanup the Project
3 - Adding PrimeNG Dependencies
4 - Import PrimeNG Styles
5 - Make Sure the Imports Work
6 - Explaining Login and Register Pages
7 - Explaining the Future Design of the App
8 - Splitting the App into Components
9 - Create the Customer Component
10 - Create Menu Bar Component
11 - Create Menu Item Component
12 - Header Bar Component
13 - Add Create Customer Button
14 - Add the Sidebar
15 - Create Mana-Customer Component (Part 1)
16 - Create Mana-Customer Component (Part 2)

Angular - Login Page

1 - Create Login Component
2 - Exercise 1 - Add Routing for Login Page
3 - Exercise 1 - Solution
4 - Implement Login Page UI (Part 1)
4.1 - Implement Login Page UI (Part 2)
5 - Create the Authentication Service
6 - Create the Authentication Model
7 - Exercise 2 - Bind the Authentication Model to the Login Form
8 - Exercise 2 - Solution
9 - Implement the Login Method
10 - Consume the Login Method and Console Log the Result
11 - Import the HTTP Client Module
12 - Test the Login Method and Analyse the Response
13 - Create Authentication Response Object
14 - Make the Login Method Returns Authentication Response
15 - Catch the Authentication Error and Display the Error Message
16 - Implement Success Login - Store Unauthorised Response and Redirect the User
17 - Why Securing a Route
18 - What is a Guard
19 - Create the Access Guard Service
20 - Use the Access Guard to Secure the Customers Route
21 - Add the Angular-JWT Library
22 - Implement the Access Guard and Secure the Customers Route

Angular - Fetch All Customers

1 - Create Customer Service
2 - Exercise 1 - Find all Customers
3 - Exercise 1 - Solution
4 - Display all Customers (Part 1)
5 - Ddd the Authorisation Header to the Request
6 - Display all customers (Part 2)
7 - Generate Environments Files
8 - Add Application Properties
9 - Update the Services to use the Values from Environment file
10 - Present the Hard Coded JWT Token (problematic)
11 - Create the HTTP Interceptor
12 - Make Angular use the Interceptor
13 - Implement the Interceptor
14 - Create Customer Card Component
15 - Implement Customer Card UI
16 - Exercise 2 - Display Customer Information in the Card component
17 - Exercise 2 - Solution

Angular - Create Customer

1 - Add Customer Registration Object as Input
2 - Create the Customer Registration Request Object
3 - Add Binding to the Form
4 - Exercise 1 - Disable the Submit button if the customer is not valid
5 - Exercise 1 Solution
6 - Exercise 2 - Delegate the Submit Operation to the Parent Component
7 - Exercise 2 - Solution
8 - Consume the Submit Event and Console Log the Customer Information
9 - Create POST Customer Service Method
10 - Exercise 3 - Save and Refresh the Customers List
11 - Exercise 3 - Solution
12 - Add Style to the Displayed Cards
13 - Add Toast Component
14 - Display Succes Message after Saving New Customer
15 - Add Dynamic Profile Picture to the Customer Card

Angular - Delete Customer

1 - Exercise - Implement the Delete Functionality (including the confirm dialogue)
2 - Delegate the Delete Event to the Parent and Console Log the Customer DTO
3 - Add the Confirmation Dialogue Component
4 - Display the Confirmation Dialogue and Console Log the Confirm Delete Action
5 - Create Delete Customer Method (HTTP)
6 - Perform Delete Action and Refresh the Customers List

Angular - Update customer

1 - Explaining the Update Functionnality
2 - Create Customer Update Request Model
3 - Create Customer Update Methods (service)
4 - Add Operation Input and Manage Fields Display
5 - Display Title Depending on the Operation
6 - Delegate the Update Event to the Parent and Display Customer Information in the Form
7 - Adjust the Create Customer (button) Click Envent
8 - Adjust the Disabling of the Submit Button
9 - Implement Update Customer (Part 1)
10 - Extend the Customer Object and Test the Update Functionality (Part 2)
11 - Correctly Display the Manage Customer Title
12 - Implement Cancel Button

Angular - Finalize the Header Component

1 - Exercise 1 - Display Username and Role in the Header
2 - Exercise 1 - Soluion
3 - Logout

Angular - Register New Customer

1 - Exercise - Implement the Registration Functionality
2 - Create Register Component
3 - Add Routing to Register Page
4 - Implement the Register UI (Part 1)
5 - Implement the Register UI (Part 2)
6 - Add Binding to the Customer Registration Request
7 - Register a User and Redirect to Customers Page

Angular - Tidy Up

1 - Redirect Angular
2 - Tidy Up Some Files
3 - Commit Changes

Angular - Deployment Exercise + Solution

1 - Exercise
2 - Product Environment Configuration
3 - AWS Amplify Configuration
4 - Deploying Frontend
5 - Custom Domain With Free SSL Certificate
6 - Access Control
7 - AWS Amplify Continuos Integration
8 - AWS Amplify Continuous Delivery

Angular Outro

Outro

Limit and Pagination

1 - Intro
2 - The Problem and Fix
3 - Outro

File Upload Exercise

1 - The Exercise

S3 File Uploads

1 - Documentation and POM
2 - Create User
3 - Create Access and Secret Keys
4 - Storing Credentials
5 - Amazon S3
6 - S3Client Bean
7 - Implement PutObject Method
8 - Implement GetObject Method
9 - Create S3 Bucket
10 - Testing Uploads and Downloads
11 - Bucket Name as Config
12 - Upload and Download API Endpoints
13 - Implement Service method to upload
14 - Implement Service method to download
15 - ProfileImageId New Column
16 - SQL and JPQL Queries
17 - Include new column in select statements
18 - Storing and Retrieving Profile Image Id from DB
19 - Fixing Compilation and Tests
20 - Test canPutObject
21 - Test canGetObject
22 - Test canGetObject Exception
23 - Test uploadCustomerProfileImage Part 1
24 - Test uploadCustomerProfileImage Part 2
25 - Test uploadCustomerProfileImage Part 3
26 - Test downloadCustomerProfileImage Part 1
27 - Test downloadCustomerProfileImage Part 2
28 - Test downloadCustomerProfileImage Part 3
29 - Exception Handling Documentation
30 - Test JPA Repository Query
31 - Test JPA DAO Implementation
32 - Test JDBC DAO Implementation
33 - Adding Pictures To Test Folder
34 - Picture Upload IT Part 1
35 - Increase Multipart File Size
36 - Download Picture Integration Test
37 - Permit All to Download Picture
38 - FakeS3
39 - FakeS3 PutObject
40 - FakeS3 GetObject
41 - Mock S3
42 - Mock S3 In Action
43 - Roles and Policies
44 - IAM Policy Simulator
Code

Spring Profiles

1 - Different Profiles Per Environment
2 - Working With Profiles
3 - Test Profile Configuration
4 - Deployment
5 - SSH Into EC2

React - File Upload

1 - Intro
2 - React Drop Zone
3 - Using Dropzone
4 - Syling Dropzone
5 - uploadCustomerProfilePicture method
6 - Dropzone Upload FIle
7 - Testing Picture upload
8 - Display Profile Picture
9 - Reload Profile Picture On Upload
10 - MediaType IMAGE_JPEG_VALUE
11 - CI_CD Backend and Frontend
12 - Test Live Application

File Upload Outro

1 - Outro

Secrets Manager

1 - Intro
2 - AWS Secrets Manager
3 - Implementation Overview
4 - Create Secret
5 - Secrets Manager Configuration
6 - AWS CLI
7 - IAM Permission
8 - Deployment
9 - Testing Changes
Code

Social Login

Coming Soon

Few Words

1 - We Built The Building Blocks and Potential Features
2 - Improve Things as you Wish
3 - Secrets Management

Plus Package

Next steps

110 - Outro

Testimonial

Next Steps

Software Testing

13 - Add Toast Component

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock