Full Stack Project: Spring Boot, React, Redux

Set up a tool folder with a java spring backend and a react frontend, initialize a GitHub repo, and use per-lecture branches to track and merge code.

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.

Use the service layer to delete a project by identifier with crud repository, handle non-existent IDs, and expose a delete mapping with a path variable.

Learn how updating an existing project works with JPA: pass the database ID, and JPA updates the record automatically, avoiding duplicates, before moving on to building React clients.

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.

Install and scaffold a React app using create-react-app, explore boilerplate files (public/index.html, src/index.js, App.js, package.json), and run npm start to see live updates in the app.

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.

Install redux, react-redux, redux-thunk, and axios; configure the redux store with initial state and middleware, then wrap the app with the provider for React integration.

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.

Style validation errors with the classnames package in a full stack project, implementing conditional bootstrap is-invalid classes and invalid feedback for input fields.

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 convert the update project form into a controlled component, wiring state, onChange handlers, and submission to persist project updates via the same update endpoint.

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.

Learn to delete a project with Redux: implement a delete project action and reducer to update state. See how Axios delete and a project identifier enable a dynamic, refresh-free UX.

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.

Define a one-to-one relation between project and backlog with eager fetch and cascade. Auto-create backlog on new projects, map with a project_id join column, and prevent recursion with json ignore.

Configure the one-to-many relationship between backlog and project tasks, initialize the project tasks collection, and apply cascade delete, eager fetch, and a backlog id join column mapped by backlog.

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.

Wire up the happy path to create a project task in a backlog, set sequence and priority and status, validate input, and return the created task via a REST endpoint.

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.

Move from H2 to MySQL by configuring Spring Boot with MySQL in application.properties, enable Hibernate ddl-auto update, create a schema in MySQL Workbench, and run the server for 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.

Enable the project board with React and Redux in a Spring Boot context, allowing task creation, updates, deletions, and status and priority changes without page refresh.

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.

Learn to handle bad data and 400 errors in a React/Redux project board, implement user-friendly error messages for project not found, and wire state-driven error handling for secure, reliable navigation.

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.

Implement a custom user details service to load users by username, configure the authentication manager with bcrypt encoder, and establish security constants and JWT payloads for login requests and responses.

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.

Demonstrates user registration validation in React, handling blank data, passwords must match, and length errors. Shows how a lifecycle hook maps server errors to client state with valid feedback.

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 implement a login form in a React-Redux app, using controlled inputs, onChange/onSubmit, and dispatching login actions to verify a Json web token in local storage.

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.

Create a dynamic header driven by security state in a full stack React and Redux app, showing dashboard and username when authenticated, and sign up or log in when not.

Lock public routes when a user is logged in by checking a valid token and redirecting to the dashboard, using componentDidMount, mapStateToProps, and react-redux connect.

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.

Fixes multiple bugs in a full stack app using Spring Boot, React, and Redux, including extension detection, Redux store loading, date handling in tasks, and clearer project access errors.

Connect the Spring Boot API to a cloud database using Clear DB on Heroku, set up separate folders, configure the environment, and prepare for deploying the API first.

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.