Creating Full-Stack Applications with React and Spring

Explore spring data options for SQL and NoSQL databases, including MongoDB and Redis, and learn that JPA, the Java Persistence API, defines what to persist in a chosen database.

Create the initial contact model in Java for the CRM, with id, firstName, lastName, and email fields, using JPA entity, generated value, Lombok data, and a factory method to instantiate.

Create a jpa repository by adding a contact repository interface that extends CrudRepository, linking the contact model to the database and enabling spring data operations.

Preload the app with initial data by creating a demo loader class that implements command line runner, autowires a contact repository, and saves a sample contact at startup.

Finalize api endpoints by creating a React and Spring Data REST application class, configuring Spring Boot to run the server, and setting the rest base path to /api for localhost:8080.

Explore how Spring auto-generates endpoints and test a post endpoint with Postman by adding contacts via a JSON payload, using get and post to manage data on localhost 8080 api/contacts.

Test the get endpoint with postman to retrieve the contacts list and see all people (Emmanuel, Manny, Emmanuel, Kim) that were posted earlier, preparing data for use in React.

Learn to get a single person by appending the id to the endpoint. Explore href self links and code blocks for javascript, jquery ajax, and postman.

Learn how to update and delete contacts using put and delete endpoints in a Spring framework API, including get and post calls, json payloads, and testing with Postman.

Begin building the React frontend by creating a contact listing component that fetches data from the Spring backend and renders it in the app's state.

Add materialize to the project by adding CDN links to index.html, then update app.js to use a container fluid layout with a nav wrapper and a brand logo for contacts.

Fetch contacts from the server in componentDidMount, parse JSON, update state, and render add form above mapped single contact components with unique ids.

create and structure components by building a single contact stateless component, wiring it to item data (first name, last name, email) and integrating a materialize card and form.

Implement the add contact form submission by wiring an onsubmit handler, collecting first name, last name, and email via refs, and posting JSON to the server at /api/contacts with fetch.

Implement a Spring rest controller to enable CORS for the React app on port 3000 against the backend on 8080, map the API, and fix frontend className issues.

Finalize the contacts controller by wiring the contact repository, implement get and post mappings for /contacts, validate input, save new contacts, and verify data via server restart and Postman tests.

Learn to manage state with React and share data via the Context API across components, while integrating with a Spring backend to fetch and use contacts data.