Mô tả

In this hands-on project-oriented course, you will dive into the world of full-stack web app development using the powerful combination of Spring Boot and React JS.


In this course, you will build two full-stack web applications (Employee Management System and Todo Management App) using Spring Boot, Spring Security, Spring Data JPA, JWT, React JS, and MySQL database.


In this course, we will use the latest version of Spring Boot (3+), Spring Security (6+), React JS (18+), and MySQL database (8+). We will use modern and popular tools to build full-stack web applications such as IntelliJ IDEA, VS Code, Maven, Postman, NPM, etc.


What is React JS?

  • React JS is a JavaScript library used to build user interfaces (UI) on the front end.

  • React is not a framework (unlike Angular, which is more opinionated).

  • React is an open-source project created by Facebook.

What is Spring Boot?

  • Spring boot to develop REST web services and microservices.

  • Spring Boot has taken the Spring framework to the next level. It has drastically reduced the configuration and setup time required for spring projects.

  • You can set up a project with almost zero configuration and start building the things that actually matter to your application.

Course Topics:

1. React JS Fundamentals

2. Spring Boot Fundamentals

3. Project 1: Employee Management System

  • Build Employee Management Module - Backend Implementation using Spring Boot

  • Build Employee Management Module - Frontend Implementation using React JS

  • Build Department Management Module - Backend Implementation using Spring Boot

  • Build Department Management Module - Frontend Implementation using React JS

  • Style Web Pages using the Bootstrap CSS framework

4. Project 2: Todo Management App

  • Todo Management Module - Backend Implementation using Spring Boot

  • Todo Management Module - Frontend Implementation using React JS

  • Secure REST APIs using Spring Security

  • Build Register and Login REST APIs

  • Implement Register and Login Features in React App

  • Secure REST APIs using JWT (JSON Web Token)

  • Using JWT (JSON Web Token) in React App

  • Style Web Pages using the Bootstrap CSS framework


Tools and technologies used in this course:

Server-side:

  1. Java 17+

  2. Spring Boot 3+

  3. Spring Data JPA (Hibernate)

  4. Maven

  5. IntelliJ IDEA

  6. MySQL database

  7. Postman

Client-side:

  1. React JS 18+

  2. React Hooks

  3. React Router

  4. Axios

  5. Bootstrap CSS framework

  6. Visual Studio Code IDE

  7. VS Code extensions

  8. Node JS

  9. NPM

Bạn sẽ học được gì

Learn to develop a FULL-STACK Web Application with React and Spring Boot

Build Employee Management System FULL-STACK Web Application with React and Spring Boot

Build Todo Management FULL-STACK Web Application with React and Spring Boot

Learn Spring Boot Fundamentals and REST API Basics

Learn React JS Fundamentals

Building RESTful APIs with Spring Boot

Consuming RESTful APIs in React JS

Data Persistence with Spring Data JPA and Hibernate

Secure REST APIs using Spring Security

Build User Registration and Login Module

Secure REST APIs using JWT (JSON Web Token)

Using JWT (JSON Web Token) in React App

Style Web Pages using the Bootstrap CSS framework

Use Modern and Popular tools to build full-stack web applications such as IntelliJ IDEA, VS Code, Maven, Postman, NPM, etc.

Yêu cầu

  • Java 17+
  • Familiar with IntelliJ IDEA and VS Code
  • Familiar with HTML, CSS and JavaScript
  • No Spring Boot REST API experience is needed, You will learn building Spring Boot REST APIs from the scratch
  • No React JS experience is needed, I will teach React JS from the scratch

Nội dung khoá học

17 sections

Introduction

4 lectures
Course Introduction
07:48
Prerequisites for this Course
00:39
My Other Top Udemy Courses - Don't Skip
01:39
Guide to Set Up Development Environment
01:17

Spring Boot Fundamentals and REST API Development Basics

17 lectures
Download Lecture Notes in PDF
00:03
Section Overview
01:00
What is Spring Boot?
07:09
Spring Boot Features
08:02
Create Spring Boot Project using Spring Initializr and Import in IntelliJ IDE
05:52
Create Simple Spring Boot REST API
07:21
Spring Boot REST API returns Java Bean
05:39
Create Spring Boot REST API That Returns List
03:52
Spring Boot REST API with Path Variable - @PathVariable
07:58
Spring Boot REST API with Request Param - @RequestParam
06:41
Spring Boot POST REST API - @PostMapping and @RequestBody
09:21
Spring Boot PUT REST API - @PutMapping and @RequestBody
09:05
Spring Boot DELETE REST API - @DeleteMapping
04:47
Using Spring ResponseEntity to Manipulate the HTTP Response
09:38
Define Base URL for REST API’s in Spring MVC Controller - @RequestMapping
05:31
Download Source Code of this Section
00:04
Section Quiz - Test Yourself
9 questions

React JS Fundamentals

19 lectures
Lecture Notes in PDF
00:03
Section Overview
00:27
Introduction to React JS
06:08
Create and Set up React App
08:29
Understanding React App Project Structure
08:11
React Components Overview
01:46
Functional Components
10:00
Class Components
07:43
Importing and Exporting Components
09:28
JSX
06:33
JSX Rules in React
10:55
Props
10:39
Destructuring Props
04:49
State and setState
08:00
useState Hook
12:57
Event Handling
07:16
Conditional Rendering
10:12
Section Quiz - Test Yourself
10 questions
Source Code
00:05

Employee Management System Full-Stack Project

3 lectures
Select Technology Stack and Understanding Project Requirements
02:25
Demo - What Are We Going to Build?
04:17
Spring Boot React Full-Stack Architecture
03:19

Employee Management Module - Spring Boot Backend

14 lectures
Section Overview
00:41
Spring Boot Application Three Layer Architecture
02:38
Create and Setup Spring Boot Project in IntelliJ IDEA
05:15
Configure MySQL Database in Spring Boot Application
04:27
Create Employee JPA Entity
06:04
Create EmployeeRepository
04:49
Create EmployeeDto and EmployeeMapper
03:53
Build Add Employee REST API
10:32
Build Get Employee REST API
08:12
Build Get All Employees REST API
06:56
Build Update Employee REST API
09:19
Build Delete Employee REST API
05:39
Source Code of this Section
00:05
Quiz for Sections 4 and 5 - Test Yourself
12 questions

Employee Management Module - React JS Backend

18 lectures
Section Overview
00:53
Create and Set up React App
07:15
Understanding React App Project Structure
09:53
Adding Bootstrap in React Using NPM
03:56
Create React ListEmployeeComponent and Display Data
13:22
Connect React App with Get All Employees REST API
10:32
Adding Header and Footer to React App
06:56
Configure Routing in a React App
08:12
Create React EmployeeComponent and Configure Route
06:42
Add Employee Form Handling
19:21
Connect React App to Add Employee REST API
06:10
Add Employee Form Validation
15:25
Adding Update Button, Title and Route
10:09
Connect React App to Get Employee REST API
06:26
Connect React App to Update Employee REST API
07:13
Implement Delete Employee Feature in React App
07:12
Source Code of this Section
00:05
Section Quiz - Test Yourself
10 questions

Department Management Module - Spring Boot Backend

9 lectures
Section Overview
00:40
Create Department Entity and DepartmentRepository
05:07
Create DepartmentDto and DepartmentMapper
03:42
Build Create Department REST API
09:02
Build Get Department REST API
06:27
Build Get All Departments REST API
06:33
Build Update Department REST API
09:00
Build Delete Department REST API
05:15
Source Code of this Section
00:05

Department Management Module - React JS Frontend

14 lectures
Section Overview
00:55
Add Navigation Links in Header
08:12
Design List Department Component
07:44
Connect React App with Get All Departments REST API
08:51
Create React DepartmentComponent
04:29
Add Department Form Handling
11:51
Connect React to Add Department REST API
05:22
Adding Update Button, Title and Route
08:07
Connect React App to Get Department REST API
04:26
Connect React App to Update Department REST API
06:18
Implement Delete Department Feature in React App
06:40
Change Add and Update Employee Feature - Many To One Relationship in Spring Boot
12:03
Change Add and Update Employee Feature to use Department - React App
15:02
Source Code of this Section
00:05

Todo Management Full-Stack Project

3 lectures
Todo Management Project - Technology Stack and Requirements
04:09
Todo Management Project - What Are We Going to Build?
02:56
Spring Boot React Full-Stack Architecture for Todo Management Project
02:24

Todo Management Module - Spring Boot Backend with MySQL Database

14 lectures
Section Overview
00:45
Create and Setup Spring Boot Project in IntelliJ IDEA
05:09
Configure MySQL Database in Spring Boot Application
05:27
Create Todo JPA Entity
05:54
Create TodoRepository and TodoDto
07:59
Build Add Todo REST API
13:40
Using ModelMapper Library
07:06
Build Get Todo REST API
10:39
Build Get All Todos REST API
06:49
Build Update Todo REST API
10:59
Build Delete Todo REST API
06:23
Build Complete Todo REST API
08:15
Build In Complete Todo API
06:32
Source Code of this Section
00:05

Todo Management Module - React JS Frontend

19 lectures
Section Overview
01:12
Create and Setup React App using Vite
06:31
Understanding Folder Structure
08:40
Add Bootstrap to React App using NPM
02:58
Create ListTodoComponent + useState Hook
15:44
Connect React App with Get All Todos REST API
12:15
Adding Header and Footer to React App
06:43
Configure Routing in a React App
08:44
Create React TodoComponent and Configure Route
06:46
Add Todo Form Handling
14:35
Connect React App to Add Todo REST API
05:17
Adding Update Button, Title and Route
10:03
Connect React App to Get Todo REST API
05:26
Connect React App to Update Todo REST API
05:12
Implement Delete Todo Feature in React App
06:05
Implement Complete Todo Feature in React App
05:26
Implement InComplete Todo Feature in React App
04:17
Demo - Test All CRUD Operations
01:14
Source Code of this Section
00:05

Spring Security Authentication & Role-Based Authorization - Spring Boot Backend

17 lectures
Section Overview
01:03
Authentication and Authorization
04:10
Adding Spring Security to Spring Boot App
04:12
Spring Boot Auto Configuration for Spring Security
09:21
Customizing the Default User
03:58
Solution for Deprecated Method - csrf()
00:25
Configure and Understand Basic Authentication
09:05
In-Memory Authentication
06:35
Understanding Role-Based Authorization
15:29
Method Level Security
11:41
Database Authentication Overview
01:13
Creating User and Role JPA Entities
10:47
UserRepository and RoleRepository
04:27
How Database Authentication Works in Spring Security
09:10
Creating CustomUserDetailsService Class
08:04
Database Authentication
12:48
Source Code of this Section
00:05

Registration and Login Module - Spring Boot Backend

5 lectures
Section Overview
00:25
Build Register REST API
19:19
Exception Handling in Register REST API
06:39
Build Login REST API
11:48
Source Code of this Section
00:05

Registration and Login Module - React JS Frontend

12 lectures
Section Overview
00:48
Create RegisterComponent and Configure Route
07:16
User Registration Form Handling
17:01
Connect React App to Register REST API
08:25
Create LoginComponent and Configure Route
04:16
Design Login Form
06:44
Connect React App to Login REST API
07:10
Implement Basic Authentication in React App
14:48
Display the Links as Per User Authentication in the Header
13:55
Logout Feature in React App
07:04
Secure the Routes in React App
06:54
Source Code of this Section
00:05

Secure REST APIs using JWT - Spring Boot Backend & React JS Frontend

10 lectures
Section Overview
00:36
JWT Introduction
09:06
Spring Security JWT Overview
03:11
Adding JWT to Spring Boot App
07:41
Creating JwtTokenProvider Utility Class
12:05
Creating JwtAuthenticationFilter
13:00
Configure JWT in Spring Security
05:25
Change Login REST API to Return JWT Token
08:59
Using JWT Token in React App
07:43
Source Code of this Section
00:05

Role-Based Access Feature - Spring Boot Backend and React JS Frontend

4 lectures
Change Login REST API to Return Role along with JWT Token
09:42
Implement Role-Based Access Feature in React App
11:02
Test Complete Todo Management Application
02:04
Source Code of this Section
00:05

Thank you note and further learnings

1 lectures
My Top and Bestseller Courses
01:43

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.