Full Stack Project Spring Boot 20 React Redux

Build a Personal Project Management Tool from scratch

Last updated 2022-01-10 | 4.3

- Create a RESTful API with Spring boot
- Secure a RESTful API with Spring Security and JWT web token
- Create a web application with React

What you'll learn

Create a RESTful API with Spring boot

Secure a RESTful API with Spring Security and JWT web token

Create a web application with React

Consume a RESTful API with React/Redux

Deploy to Heroku

* Requirements

* Practical knowledge of the Java language syntax
* Previous hands on experience with basic CRUD operations using the Spring framework
* JPA
* MySQL
* Hands on experience developing and running Spring CRUD applications with one of the following IDE's: STS
* IntelliJ
* Eclipse
* Familiarity with HTML
* CSS
* and JavaScript (ES6 Syntax is important)
* Have local environment set up for Spring Framework - Spring boot development (Java 8
* Maven
* MySQL
* MySQL Workbench)

Description

If you know the basics of java and the spring framework, the next thing to do is to keep on practicing! Building apps with real life features is a great next step in your journey to becoming a developer. The main benefits of this is that it sharpens your skills and helps you build your portfolio for prospective employers. In this course, we will build a prototype of a personal project management tool using Spring boot 2.0 in the backend, ReactJS and Redux on the front end.

These are some of the cool things we will work on:

We will build our REST APIs with Spring boot for CRUD operations

We will create our front end using ReactJS and Boostrap

And will use Redux and Thunk to manage the state of our application in the front-end

We will secure our application using JWT tokens

Last but not least we will deploy our application to Heroku’s free tier. This is a great opportunity to get practical experience with two amazing technologies that are highly desirable by prospective employers.

Who this course is for:

Students who have had hands on experience with the basics of Java and the Spring Framework looking to grow their new skills

Course content

8 sections • 110 lectures

Introduction 5 lectures

Introduction Preview 03:42

IMPORTANT: BROWSERS FOR THIS COURSE Preview 00:35

WATCH BEFORE YOU BUY: App Demo (Prototype) Preview 13:45

Please note that this app works fine on: Firefox, Safari and Chrome. If you are on Chrome and it loads blank, then please install react dev tools and redux dev tools on Chrome. You need Chrome and these dev tools to follow the course.

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

Please also note that this is a known issue in the React/Redux community: https://github.com/reduxjs/redux/issues/2359

I'll be investigating how to configure the store for Internet Explorer and Edge, but for now please use Chrome (with extensions) or Firefox (MacOS and Windows) or Safari (MacOS)

WATCH BEFORE YOU BUY: Requirements, IDEs, Support Preview 15:41

REVIEW BEFORE YOU START- Mindset and Course's scope Preview 01:17

Spring Backend - Basic CRUD Operations - Project 14 lectures

IMPORTANT PLEASE USE JAVA 8 Preview 01:18

Folder Structure and Github setup Preview 15:42

IMPORTANT - READ THROUGH: About H2 Database Preview 00:48

Project Object & Project Repository- branch1 Preview 10:08

Project Service & Project Controller | Create first project - branch2 Preview 15:03

Set up project object validation - branch3 Preview 08:15

Project Object Validation part1 - branch4 Preview 07:20

Project Object Validation part2 - branch5 Preview 14:17

Refactor Project Controller ->branch6 Preview 08:43

Custom Exceptions for Unique Project Identifiers -> branch7 Preview 19:04

Find Project by Identifier - branch8 Preview 14:37

Find All Projects -> branch9 Preview 05:13

Delete an existing project -> branch10 Preview 08:14

Update an existing project Preview 04:20

React & Redux Front-end: Project CRUD Operations 26 lectures

Introduction to React and Redux Preview 07:24

Set up development Environment for React Development Preview 07:47

POTENTIAL ISSUE- create-react-app as of January 2020 Preview 00:23

Create and review Boiler Plate react app -> branch11 Preview 09:22

first react component - branch12 Preview 10:35

Project and header components - branch13 Preview 08:03

Bringing Bootstrap 4+ - branch14 Preview 05:13

Style our Dashboard, Navbar, ProjectItem - branch15 Preview 10:32

React Router, first Functional component - branch16 Preview 16:13

AddProject Component - controlled form - branch 17 Preview 23:09

IMPORTANT: React + Redux Architecture and Support Preview 14:49

Create Redux Store - branch18 Preview 19:56

Create Project from React - branch19 Preview 25:51

Get validation errors from Redux - branch20 Preview 19:16

Style validation errors with classnames - branch21 Preview 12:19

Get Projects - redux only - branch22 Preview 18:59

Get Projects - final step - branch23 Preview 23:02

"Update Project" use case architecture Preview 06:21

Update Project form and route Preview 12:17

Get Project by Id, Update use case part 1 - commit id: b13741f Preview 19:17

Hi team; forgot to create branch25, my apologies! please use the commit ID b13741f to check the code committed for this lecture

Persist Project Object Updates - branch26 Preview 17:55

Handle Errors in UpdateProject.js - branch27 Preview 12:56

BUG FIX Strange Update Behaviour Preview 04:07

"Delete Project" Architecture Preview 02:10

Delete an existing project - branch29 Preview 24:35

Refactor Delete Operation and Proxy Preview 05:57

Add Project Tasks - Backend 14 lectures

Backlog and ProjectTask Entities - branch31 Preview 15:52

Entity Relationships: Project and Backlog - branch32 Preview 19:36

Backlog - ProjectTask relationship - branch33 Preview 07:19

Design discussion around creating a Project Task Preview 09:57

Persist Project Task (Bug fix pending: setPriority) - branch34 Preview 20:15

BUG FIX ProjectTask priority, projectIdentifier, PTSequence - branch35 Preview 06:46

Get Project Backlog (happy path) - branch36 Preview 16:10

SET UP THE PROJECT TO USE MYSQL, NO MORE H2! Preview 05:40

Handle Project Not Found Exception / Project Tasks-branch37 Preview 23:28

Find ProjectTask by projectSequence (happy path)-branch38 Preview 15:46

Find ProjectTask by projectSequence w/Validation - branch39 Preview 11:38

Update project task (happy path)-branch40 Preview 12:45

Finish up with update validation and delete - branch41 Preview 19:19

BUG FIX delete operation, improved backlog/project task rel - branch42 Preview 10:05

Add Project Tasks - React / Redux 17 lectures

Intro to Section, Demo of what we are implementing Preview 03:23

BUG FIX Import error in Backlog reducer - branch43 Preview 00:16

Types and Reducers for Project Tasks - branch43 Preview 08:16

Section designs and Folder Structure - branch44 Preview 05:24

Routes to ProjectBoard and AddProjectTask - branch45 Preview 21:19

AddProjectTask action ( :)path) AddProjectTask form controlled part 1 -branch46 Preview 19:04

AddProjectTask action ( :)path) AddProjectTask form controlled part 2 -branch47 Preview 12:18

Finish AddProjectTask action, handle errors part3 - branch48 Preview 10:11

Set up ProjectBoard, Backlog, ProjectTask components - branch49 Preview 08:21

Load ProjectTasks to the state - branch50 Preview 12:03

Load Project Tasks to UI step 1 - branch51 Preview 08:42

Organize Project Tasks by status and priority - branch52 Preview 15:35

ProjectBoard Algorithm - branch53 Preview 18:24

update Project task part 1 - branch54 Preview 25:34

Update Project task part 2 - branch55 Preview 22:01

Update Project task part 3- branch56 Preview 23:44

Delete Project Task - branch57 Preview 16:32

Secure our App: Spring Security + JWT 16 lectures

Intro to Spring Security Section Preview 11:47

IMPORTANT: New to Spring Security? Preview 00:34

IMPORTANT: New to JWTs? Preview 00:33

Initial Security Config - branch59 Preview 22:38

Create User Object, Validation, Repository, Service - branch60 Preview 10:28

User registration part 1 - branch61 Preview 19:44

User registration part 2 - branch62 Preview 08:59

User registration part 3 - branch63 Preview 10:02

JWT Provider pre-work - branch64 Preview 27:12

Token Generated!!! - branch65 Preview 22:52

Custom JWT filter to use our tokens - branch66 Preview 28:24

One: User to Many: Projects - branch67 Preview 12:39

Lock operations to specific User (Read and Delete) - branch68 Preview 17:57

Lock operations to specific User (Update) - branch69 Preview 26:04

User specific Create and Read Ops for Project Tasks - branch70 Preview 20:34

Find, Update, Delete Project task with Security - branch71 Preview 19:51

Secure our React App 11 lectures

Intro to Securing the React App, Security Components -branch72 Preview 21:37

User registration happy path - branch73 Preview 28:05

User registration with validation- branch74 Preview 11:05

SecurityActions and SecurityReducer - branch75 Preview 26:26

Login form - branch76 Preview 22:14

Handle Login logic - branch77 Preview 21:59

Handle routing for expired token - branch78 Preview 19:27

Dynamic header based on security state - branch79 Preview 18:32

Lock public routes when logged in - branch80 Preview 16:34

SecuredRoutes - branch81 Preview 17:17

Bug Fixes Preview 22:27

Deploy to Heroku 7 lectures

MUST READ: REQUIREMENTS FOR THIS SECTION Preview 00:06

Coming Soon

Step 1 - Connect Spring boot api to Clear DB Preview 24:55

YOU NEED THIS FOR STEP 2 Preview 00:09

Step 2 - Deploy the Back-end to Heroku Preview 11:09

Step 3 - Deploy with React build Preview 16:23

POLYFILL CDN FOR STEP 4 Preview 00:07

Step 4 - Fix app to work with Internet explorer 11 Preview 19:55