Full Stack ReactJS with Spring Boot

Create a spring boot web app with maven and postgres, model a contact domain as a uuid entity with name, email, title, phone, address, status, and photo url.

Create a contact repository by extending the JPA repository for the contact entity. Add a find by id method returning an optional contact, then create the service for the controller.

Build a Spring Boot contact service using @Service, @Slf4j, and @Transactional, inject via a required-args constructor, and implement paginated, name-sorted get all, get by id, create, and delete.

Implement a contact photo upload using multipart files, save images to a filesystem path, update the contact with a photo URL, and expose the flow through Spring Boot REST service.

Configure the data source with yaml for a PostgreSQL server, enable jpa with hibernate ddl auto update, and run the app on 8080 to test user endpoints with postman.

Master testing the contacts API with Postman: create contacts via JSON body, observe ID generation and location headers, and explore pagination and null fields.

Explore api test part 2 by building a backend to upload contact photos, handle form data, update records, and verify data persistence for a full stack application.

Spin up a React front-end with npx create react app or the tool called v, name the project contact app, install axios and react-router-dom with npm, and start the app.

Clean up a React application by removing boilerplate from Create React App and preparing to build header, contact card, contact detail, and contact list components with the provided index.css.

Define header, contact list, and contact detail components for a React contact app. Clean up the public folder and index.html, and configure fonts and icons for a responsive user interface.

Build a header component in a full stack react app, using es7 react redux to scaffold afce, destructure props for toggle modal and contact count.

Build a contact list component that fetches backend data and renders the content array with reusable contact elements. Implement pagination with previous, next, and page links.

Create a contact service in JavaScript using Axios to interact with a Spring Boot backend, implementing save, get (with pagination), get by id, update, delete, and image upload endpoints.

Define data and current page state, then fetch contacts from the backend using page and size. Use useEffect to fetch on mount and fix a cors error between localhost:3000 and 8080.

Learn how to configure cors in Spring Boot using a URL-based configuration to allow localhost:3000, define allowed headers and methods, and wire a course filter bean.

Show how to render a header by importing a header component, using a fragment, and wiring props for toggle modal and the contact count from data total elements.

Configure routes with react router dom to render the contact list at /contacts and pass data, current page, and get all contacts.

Learn to implement a native HTML dialog modal in a React app using useRef to toggle show and close, wire up an add contact form, and save workflow.

Bind form inputs to a single values state object with use state, update it via a universal onchange handler using event.target.name and event.target.value, and track the file separately.

learn to capture a file from a React input, store it in state, and implement a two-step save - first the user, then the image - while resetting the form with a ref.

Learn to save a new contact in a full-stack React and Spring Boot app by handling form submission. Call the backend to store data and upload the contact photo.

Fetch a single contact by id in a React app, using useParams to read the URL id, call the get contact API, and render the contact details.

build a contact profile in react using react-router-dom links to return home, display the contact photo and name, and enable a jpg/png/gif upload with a change photo button.

Trigger a hidden file input on click to select an image, upload it via form data to the backend, and refresh the photo URL to force reload.

Display a contact form in a React and Spring Boot app, use a hidden ID for updates, and handle onChange and onSubmit to update the backend.

Implement update contact flows in a full stack ReactJS with Spring Boot app by saving with id, fetching updates, and paginating two per page with navigation.

Learn to implement toast notifications in a React app using react-toastify, configure a reusable toast service with info, success, warning, and error messages, and display toasts via a toast container.