Full Stack Project: Spring Boot, React, Redux

Model a project as a JPA entity with ID, name, identifier, description, and start and end dates, plus created at and updated at; enable CRUD via a repository.

Save and organize api requests in a Postman collection to test features, and implement project object validation with not blank name, project identifier unique, and json date formatting.

Explore how server validation moves from a 500 to a descriptive 400 by using @Valid and BindingResult on a project object, returning actionable json to the client.

Explore building server-side validation errors as a field-to-message json map using binding result and field errors, then refactor for reuse and ensure persistence.

Learn to read a project by its unique identifier using JPA. Expose a GET endpoint that uses the identifier from the URL and handle not-found cases via service logic.

Install Node.js LTS and set up VS Code with essential React extensions. Enable Prettier and emit for consistent formatting as you build the boilerplate with the Create React Command.

Learn to build reusable React components, including a class-based dashboard component, using JSX and app flow with App.js and index.html, and set up React and Redux dev tools in Chrome.

Create a project folder with a ProjectItem component and render it inside the dashboard in App.js. Build a layout header that uses application state to toggle login and logout options.

learn how to bring bootstrap into a react project by installing via npm, importing bootstrap css in app.js, and validating styling with a bootstrap alert.

Learn to retrieve validation errors from Redux, map them to a component, and display backend errors on the create project form using a Redux store and React lifecycle.

Fetch and display projects in a React-Redux dashboard by calling get projects API, pass project data as props from the dashboard to project items, and render the list from state.

implement the update project use case by loading an existing project by identifier, populating the form, and submitting updates via a redux-connected flow with a spring boot backend.

Learn to handle update project errors in a React Redux app by routing non-existent projects to the dashboard, wiring server errors into state, and showing field validation with classnames.

Diagnose a strange update behavior where error messages linger after submitting valid data. Wipe errors from the Redux state on successful submissions so the user interface clears.

Refactor delete operation and proxy setup in package.json to clean up project routes, enable a localhost 8080 proxy, and add a confirmation prompt to prevent accidental deletion.

Define backlog and project task domain entities in Spring Boot, with id, pt sequence, and project identifier, plus a one-to-many relationship. Implement repositories and discuss API calls and decoupling.

Explore designing a project task service to persist tasks and preserve the one-to-many link between backlog and project tasks, with a robust project sequence, and defaults for priority and status.

Fixes a null pointer by defaulting project task priority to three when no UI value is sent, and resolves sequence updates and a project identifier typo for reliable persistence.

Enforce validation when locating a task by project sequence by confirming the backlog exists, the task exists, and the task belongs to the correct project, with explicit not-found handling.

Learn to update an existing project task via a patch, locate the task, replace it with an updated object, and save the changes using backlog id and task id.

Fixes the delete operation by refining the backlog and project task relationship with JPA, adding orphan removal and proper cascade refresh, demonstrated in the Spring Boot React stack.

Wire up backlog types and reducers for project tasks in Redux, including get backlog, get project task, and delete project task actions.

Wire up the backlog reducer and set up a clean folder structure for the project board, backlog, and project tasks, including add and update project task forms, branch 44 designs.

Wire up the project board and add project task routes using React Router, passing the project identifier through params. Test end-to-end with npm start and fix backlog reducer types.

Implement onChange and submit for a controlled add project task form, binding inputs and validating happy path to send a new task to the server and update the MySQL database.

Finish wiring the add project task action with a try-catch to clear and load errors. Map state to props and display validation messages in the form.

Connect the project board to the Redux state and wire an API call to fetch backlog by id, loading the project tasks into the state and displaying them.

Learn to surface project tasks from the app state into the backlog interface by wiring backlog props, mapping tasks to a project task component, and preparing for dynamic display.

Organize project tasks by status and priority in a React backlog component, splitting items into to do, in progress, and done, with Bootstrap color-coding for priority levels.

Load the update form with the project task data and post updates. Wire Redux actions and routing to fetch task data by backlog and task IDs and handle errors.

Learn to update a project task by turning the update form into a controlled React component, loading data from the server, wiring onChange, and building a Redux submission payload.

Wire up updating a project task via a patch request with axios in a React-Redux app, handle errors, and update the backlog and project board with thunk-enabled actions.

Configure spring security with a web security config adapter, enable http security, disable csrf, implement a jwt-based stateless setup, and craft a custom authentication entry point and invalid login response.

Define a user entity with email validation and transient password confirmation, implement a repository and service for registration, and prepare json web token generation for authentication.

Implement a user registration flow by wiring the user details interface, encoding passwords with bcrypt, persisting users via the repository, and exposing a public register endpoint for Json web token.

This lecture shows how to implement a Spring user validator to enforce password length and confirm password matching during registration, wire it in the controller, and handle duplicate exceptions.

Explore implementing a custom jwt authentication filter in a Spring Boot project, including bearer token extraction from the authorization header, token validation, and user authentication flow.

Learn to secure project task operations by enforcing ownership checks, validating backlog and task existence, and using principal-based authorization across find, update, and delete endpoints, with hands-on testing.

Learn to secure the React front end by building landing, login, and register pages, wiring routes for private and public access, and preparing authentication flow in App.js.

Wire login action to post login request, extract and store token, decode it for user claims, and dispatch the security reducer to set current user for protected routes.

Learn to secure login by storing a JSON web token in local storage, set the token in headers, decode expiration, and route to the dashboard while the token stays valid.

Learn to handle login form errors, finalize logout wiring, and manage expired json web tokens by clearing local storage, updating redux state, and redirecting to the main page.

Develop a secure route in React by checking a valid token and redirecting unauthenticated users to login, then protect dashboard and project routes under a switch before deploying to Heroku.

Deploy the back-end api to the cloud using a proc file, mvn clean install, and a jar, then test the Heroku endpoint with Postman and a token.

Deploys the full stack by building the React client, updating the proxy to point to the Heroku backend, and deploying to Heroku with the Spring Boot static build in place.

Fixes the React and Redux app to run in Internet Explorer 11 by refactoring the store, rebuilding with npm run build, and redeploying to Heroku, incognito tests and cross-browser checks.