Build Modern Ai-Powered Web Apps With Spring Ai, And React

Build a complete Full stack AI Customer Support System with Spring Boot, Spring AI, and React.

What you'll learn

Learn the smart features of React 19

Learn how to power web apps with Spring AI

Learn how to build modern web applications

Get a complete understanding of prompt engineering

Learn how to integrate LLMs into your new or existing web apps

Learn how to build modern web applications with AI technologies

Requirements

Basic knowledge of JavaScript

Basic knowledge of working with React

Be familiar working with Spring Boot

Be familiar working with Java

Be familiar working with CSS or some CSS framework such as bootstrap

Description

In this course, you will learn to create a fully functional AI-driven customer support application using Spring Boot, Spring Security, social login techniques, Spring AI, and React. This hands-on practical course will guide you through the entire development lifecycle, from initial setup to deployment.Key Highlights:Backend Development with Spring Boot:Understand the fundamentals of Spring Boot and its architecture.Create RESTful APIs to handle customer queries and support requests.Implement security measures to protect user data and application integrity.AI Integration with Spring AI:Learn how to leverage AI technologies to automate responses and improve customer interactions.Build chatbots that can handle common inquiries and escalate issues when necessary.Explore machine learning models that can analyze customer data for insights.Frontend Development with React:Develop a dynamic and responsive user interface that enhances user engagement.Integrate frontend components with the backend API for real-time data updates.Learning OutcomesBy the end of this course, you will be able toDesign and implement a complete AI customer support application from scratch.Integrate advanced AI features to enhance customer service capabilities.Be equipped with the complete knowledge of modern web applications with AI.Build an end-to-end full-stack web application with Spring Boot, Spring AI, and React.

Overview

Section 1: Introduction

Lecture 1 Welcome

Lecture 2 Introduction to the course

Lecture 3 Course Prerequisites

Section 2: Introduction to Spring AI

Lecture 4 Overview of Spring AI

Lecture 5 LLMs Overview

Lecture 6 OpenAI Overview

Lecture 7 Working with LLMs

Lecture 8 Generate a Spring AI project

Lecture 9 Create the OpenAI account to obtain API key.

Lecture 10 Working with the ChatClient

Lecture 11 Test run the AI interaction in Postman

Lecture 12 How to specify a model for a task

Lecture 13 An overview of the ChatOptions parameters

Lecture 14 More on Spring AI

Section 3: The Final Project Backend : Section 1

Lecture 15 Welcome to the AI Customer Support Service

Lecture 16 Generate a new spring boot project

Lecture 17 Create and map the entities

Lecture 18 Test run the project

Lecture 19 Generate the OpenAI API Key

Lecture 20 Test run the project with the API Key

Lecture 21 Create the test chat controller

Lecture 22 Test interaction with AI

Section 4: Introduction to Prompt Engineering

Lecture 23 A deeper look into Prompt Engineering

Section 5: FP Backend : Section 2

Lecture 24 Set up the prompt template for prompt engineering

Lecture 25 Create the AI Support Service class 1

Lecture 26 Test running the AI support service class

Lecture 27 Understanding the AI Support Service class

Lecture 28 Understanding Roles in Prompt Engineering

Lecture 29 More on prompt crafting

Lecture 30 How to specify a specific model for different tasks

Lecture 31 How to centralize a specific model for our app.

Lecture 32 Implementing the conversation service part one

Lecture 33 Implementing the conversation service part two

Lecture 34 Extracting customer information from the chat history-1

Lecture 35 Extracting customer information from the chat history-2

Lecture 36 Prompt AI to confirm customer chat information.

Lecture 37 Fetch customer information from the database

Lecture 38 Fixing the phone number regex to be more restricted

Lecture 39 Testing the fixed regex

Section 6: FP Backend : Section 3 : WebSocket Configuration.

Lecture 40 Add the WebSocket dependency to POM file

Lecture 41 Configuring the WebSocket Messaging Services

Lecture 42 Finalize customer conversation with the AI

Lecture 43 Save customer conversation

Lecture 44 Implementing the conversation ticket service

Lecture 45 Implementing the conversation ticket service-2

Lecture 46 Create ticket for conversation

Lecture 47 Test the ticket creation

Lecture 48 Refining the AI prompt for a better result.

Lecture 49 Refining the AI prompt for a better result-2

Lecture 50 Assignment-1

Section 7: FP Backend: Set up The Email Service

Lecture 51 Assignment walkthrough

Lecture 52 Setting up the email sender services

Lecture 53 Implementing the email notification service

Lecture 54 Implementing the customer service class

Lecture 55 Implementing the ticket event listener

Lecture 56 Test run the email creation

Lecture 57 Creating the customized email template

Lecture 58 Wrap up

Lecture 59 Assignment-2

Lecture 60 Assignment Solution Walkthrough

Section 8: FP Frontend : Project Setup

Lecture 61 Development environment check

Lecture 62 Generate the project

Lecture 63 Set up the project

Lecture 64 Installing the initial dependencies

Lecture 65 Setting up the project RootLayout component

Lecture 66 Setting up the basic Router for the project

Section 9: FP Frontend: The Home Page

Lecture 67 Home page overview

Lecture 68 Create the home page component

Lecture 69 Create the logo-anim component

Lecture 70 Implement the header component

Lecture 71 Implement the navbar component

Lecture 72 Implement the hero anima component

Lecture 73 Implement the support team component

Lecture 74 Putting it all together

Section 10: The AI Support Chat Page

Lecture 75 Installing the dependencies

Lecture 76 Configuring the WebSocket hook

Lecture 77 Implement the chat component-1

Lecture 78 Implement the header component-2

Lecture 79 Implementing the chat UI-1

Lecture 80 Implementing the chat UI-2

Lecture 81 Test running the application

Lecture 82 Sending ticket feedback to customer

Lecture 83 Prompt customer to update incorrect information-1

Lecture 84 Prompt customer to update incorrect information-2

Lecture 85 Prompt customer to update incorrect information-3

Lecture 86 Prompt customer to update incorrect information-4

Lecture 87 Troubleshooting feedback message

Lecture 88 Wrap up

Section 11: The admin dashboard

Lecture 89 The page overview

Lecture 90 Creating the tickets view component

Lecture 91 Implement the ticket controller -BE

Lecture 92 Test run the ticket component

Lecture 93 Implementing the admin dashboard sidebar

Lecture 94 Implementing the ticket search bar

Section 12: The Ticket details component

Lecture 95 The ticket details page overview

Lecture 96 Implementing the header component

Lecture 97 Implementing the footer component

Lecture 98 Implementing the details component

Lecture 99 Implementing the customer information component

Lecture 100 Implementing the customer complaint component

Lecture 101 Implementing the resolution input component

Lecture 102 Putting it all together

Lecture 103 Putting it all together-2

Lecture 104 Implement the AI text suggestion API: BE

Lecture 105 Test run and fixes

Section 13: Project E2E testing

Lecture 106 Final project e2e testing

Lecture 107 Project clean-up and Wrap-up

Java backend developers who are moving towards becoming full stack developers,React frontend developers who are moving towards becoming full stack developers,Java developers who want to learn how to work with AI technologies,Java developers who want to learn how to integrate AI into their existing or new web applications,Java developers who want to learn how to build modern web apps with AI