Spring Boot and React with Test Driven Development

Configure a Spring Boot project with Maven, add Web, Spring Data JPA with Hibernate, Lombok, Spring Security, and an embedded H2 database, then run the main class.

Set up a front-end project with Create React App, use Babel for older browsers, bundle modules into a file, and adopt test-driven development with a test runner and live refresh.

Configure frontend tests for the React components using React Testing Library to render components like web pages, test user behavior with assertions and mocking, and generate test result reports.

Implement user signup form with React state and interactive fields, hash the password before saving to the database, and use Axios for API requests with Bootstrap styling and progress updates.

Apply test driven development to implement user registration in a spring boot backend, writing unit and integration tests with test rest templates and a user controller handling post /api/1.0/users.

Implement a generic response body with a message field in the backend, validate via TDD, ensure endpoints return a coherent json response, and align with Spring Boot and React workflow.

Secure user data by hashing passwords before storage using a hashing algorithm from Spring Security, while validating against the in-memory H2 database and console tooling.

apply test-driven development to build a frontend user sign up page in a react project, using testing library to render components and verify the sign up header.

Learn to implement a progress indicator for sign up API calls by disabling the button during pending requests. Display a spinner and test success and failure scenarios.

Implement Java validation with custom relational logic and internationalized error messages, add a Spring JPA query, and enable form validation feedback including repeat-password checks before signup.

Demonstrates backend user validation in Spring Boot by applying size and pattern constraints with Hibernate Validator, and driving tests to ensure bad request responses during signup.

Explore how to model and customize validation errors in Spring Boot backend, handling method argument validation with a dedicated API error object, and mapping field errors for precise client feedback.

Set up and test internationalized validation messages for backend errors in spring boot, overriding default constraint messages, and verify translations across Turkish, German, French, and Spanish using accept-language headers.

Learn to display backend validation errors on the frontend for fields like display name by updating state with API errors and rendering per-field messages using bootstrap is-invalid and invalid feedback.

Create a reusable React input component with label, type, placeholder, value, and onChange props, including default props and validation styling for default, valid, and invalid states.

Activate Spring security and implement a user details service to load user from the database during authentication, with login endpoint and frontend login page using EDP response buddy Jason manipulation.

handle frontend input changes by simulating fire events, updating the login page state for user name and password, and verifying via tests that inputs reflect new values.

Explore frontend click handling for a redux-backed login page, wiring a login action with mock functions, and managing input state to enable the submit button and show api alerts.

Explore test-driven frontend login flows by wiring api calls, mock functions, and axios post configuration for user authentication, validating login requests from browser to backend.

Extract a reusable button with a progress indicator for pending API calls, integrate it into the login page, reuse the sign-up workflow, and validate with tests and error handling.

Implement client-side routing with React, add sign up, login, and user pages, wire a top navigation bar, and redirect to the home page after successful sign up or login.

Learn to add frontend pages, create a home page and a user page, and drive development with tests using react testing library, including data-testid checks and component implementation.

Build client-side routing in a React app using React Router to switch between homepage, login, sign up, and dynamic user pages, with hash routing and test-driven development.

Explore login success routing by wiring the login page to react router props, handle post login API calls, and auto-redirect to the homepage on success, with tests and route navigation.

Implement signup success routing on the frontend by mirroring the login test, using history.push('/') after signup, and updating components to supply a history prop.

Add Redux to manage a global login state with client-side reducers and actions. Reveal logout and my profile links after login and navigate to the user page on profile click.

Leverage redux to manage a single source of truth with a shared, read-only state updated by actions and pure producers; connect components with react-redux and enable debugging with redux-logger.

Learn to configure Redux in a React frontend by setting up a store, creating a reducer for authentication, and wrapping the app with the provider to manage login state.

Learn to integrate redux in a react app by wiring a store and provider, mapping state to props, and conditionally rendering logout and profile links for a logged-in user.

Connect the login page to Redux and dispatch the log in action from the login form to update the top bar with the user profile after login, validated by tests.

Connect the user sign up page to Redux on the frontend, implementing sign up and automatic login via API calls, with tests validating the flow.

Develop the frontend sign up and login flow by exporting a sign up handler, dispatching redux actions, calling sign up and login API functions, and coordinating post-request redirects.

Persist redux state with localStorage and restore it on page reload. Tests verify saving and loading serialized state, ensuring the user remains logged in after refresh.

Explore managing authentication data in the redux store, configuring axios authorization headers with base64 credentials, and updating or removing headers on login, logout, and persisted state changes.

List users with an endpoint and pagination, override spring pagination defaults, and use spring data projection with custom models, plus a component loading data with next and previous user links.

Implement a backend get users endpoint with pagination using Spring Data Page and PageRequest, guided by test-driven development and robust get mapping.

Use Jackson view annotations and a Spring data page module to serialize page objects and omit password fields, with tests verifying users arrive without password.

Explore how to implement user projections in the backend, choosing between native SQL and JPQL, defining a projection interface, and integrating it with a repository and service.

Master backend pagination with Spring Boot by implementing page, current page, and page size parameters, validating through TDD tests, and enforcing defaults and maximum limits via Spring Data Pageable.

Learn to exclude the currently logged-in user from the user listing in the backend using current user context and test-driven development to verify the result.

Seed the backend at startup by creating multiple users with a Spring CommandLineRunner, injecting the user service, and running only in non-test profiles to support UI tests.

Extract the user list item into its own functional component that receives props, render it in the user list, and display a profile image with a default when missing.

Develop a frontend user list page with multi-page pagination using next and previous controls, loading data and updating the UI based on first/last page states, all guided by test-driven development.

Add links to each user in the frontend list and enable navigation to user pages using router anchors, with three user entries and memory router for test-driven development.

Build a get user by name endpoint in Spring Boot with test-driven development, returning a password-free user and handling not found via a custom exception and api errors.

Implement the get user function on the frontend under test-driven development by calling the API to fetch a user's data with an axios get request to the /api/Users/{USERNAME} endpoint.

Load user data on the frontend by fetching API data for a dynamic user name from the URL in a React page; tests verify API calls and rendering.

Fix front-end navigation between user pages by reloading user data in componentDidUpdate when route params change, and validate with tests using mock API responses for loading and not-found cases.

Develop the profile card component in React to render a user's display name, username, and profile picture inside a bootstrap card, guided by test-driven development.

Extract the profile image into a reusable React component with a default image, and test default, provided images, and error handling for fallback in profile cards and lists.

Apply test driven development to implement a frontend profile loading spinner, mock delayed responses, and robust tests that handle loading states and error alerts.

Implement backend user update with an endpoint and secure update requests; enforce method-level security to ensure logged-in user updates profile, display profile card edit button, and allow display-name edits only.

Secure the update user API with put requests, enforcing authorization so only the logged-in user can update their own data using Spring Security pre authorization.

Implement the profile card edit button so it appears only when the editable property is true and the displayed user matches the logged-in user, using a Font Awesome edit icon.

Explore frontend user interactions by implementing a profile card with edit and cancel flows, conditional editing, and save behavior, guided by tests using Testing Library.

Wire the save button to trigger an update user api call, verify it with mocks and tests on the profile card, and exit edit mode after updating the display name.

Explore how canceling a frontend update mishandles component state and how adding an original display name field and reset logic fixes cancel behavior, with tests and browser verification.