Spring Boot 2 & React FullStack Development

Install node.js and npm, bootstrap a React frontend with npx create react app, then run the development server to view a running React web app.

Explore React app file structure created with create react app, including public and src folders, index files, and the app component, and prepare to connect to the springboard back end.

Learn to perform a get request from a React frontend to a Spring Boot backend by consuming the /students endpoint with fetch and validating the returned student data.

Learn to add and manage React state to fetch, store, and display students from a backend, using componentDidMount, map over data, and render student fields with unique keys.

Explore Ant Design (antd) as a clean React UI framework, install and import the library, and start using components like buttons, icons, dropdowns, menus, and tables in your app.

Import the antd table component into your React app and configure its dataSource and columns. Define columns with title, dataIndex, and key, and use student id as the rowKey.

Create a custom container component to add spacing and center content with a 1400-pixel width, using inline styles and props.children, and integrate it into a table in a React setup.

Learn to implement the avatar component in a React full-stack app by importing avatar, customizing size, rendering initials from first and last names, and displaying it in a data column.

Integrate a spin loader into a React app to indicate data loading from a backend, manage the isFetching state, and render an ant icon indicator during data fetch.

Configure a global context path of /api using application.properties or application.yml, so every endpoint, like /students, automatically prefixes with /api and aligns the front end.

Learn how to use Docker to spin up a postgres database and to package and deploy software, ensuring cross-platform consistency across Windows, Linux, and macOS.

Install docker on Linux, macOS, or Windows and run the official postgres image, set the postgres password via environment variable, and expose port 5432 in detached mode.

Bash into a PostgreSQL docker container, connect via psql as the root user, and create your first database for a Spring Boot backend.

Create a new Postgres database using psql and backslash commands, then connect and describe its relations. Prepare your Spring Boot app to connect to the amigos code demo database.

Configure a hikari data source for spring boot using app.data.source properties, wire a data source bean, and connect to a postgresql database via docker, noting migrations are missing.

Use Flyway migrations to version-control database schemas by creating a v1 migration that builds a student table (id, first_name, last_name, email unique, gender with constraints) and updates the flyway_schema_history table.

Inspect flyway schema history and the student table using psql, observe migration scripts and checksums, and learn to add new migrations for table changes.

Learn to stop and start docker containers using docker ps to list them, docker stop to halt, and docker start to run the container, with container name or id.

Explore a Spring Boot service layer that routes API endpoints to business logic, injects a student service into the controller, and prepares for a data access path to the database.

Build a data access layer with a student data access service and repository, wire it into the student service via dependency injection, and connect to a real database.

Connect to the database from a spring boot app using jdbc template, inject it, and map the result set to student objects with a row mapper through a select query.

Write a select statement to retrieve all columns from the student table, including id, first name, last name, email, and gender, and transform the results into a Java student object.

Learn how to map query results to a Java object using row mappers, extract columns by label, convert strings to a UID, handle gender enum, and build a Student instance.

Refactor row mappers by extracting a dedicated map method to transform query results into a Java object, make it package-private, and run the application to see cleaner code in action.

Start the application, generate 20 random student records, and display retrieved students in a frontend table connected to a Spring Boot backend and post quest database.

Add a footer with a primary button in a React app, opening a modal form to add students, and create a filter component with an avatar showing the student count.

Learn to implement an add-student modal in React by managing modal visibility with state, wiring open and close handlers, and passing the add-student action through props.

Install Formik to manage form state in a React app, then create an add-student form component inside a modal, export it, and wire it into the main view.

Learn to customize a React form by adding text fields for first name, last name, email, and gender, adjust placeholders, styling, and prepare validation handling.

Define initial values for first name, last name, email, and gender. Use validate to enforce required fields and email format in a React form.

Style validation errors by wrapping them in a tag component and applying a colored background and white text across first name, last name, email, and gender fields.

Submit form values to the server by sending a Jason object; disable the submit button until the form is valid and touched, preparing the backend payload.

Learn how the client sends a JSON payload to the server to add a new student, using fetch with content-type json and a post request to /students.

Submit a new student form to the backend by importing and invoking the add new student function with form values, verify the payload, and reset the form for new submissions.

Implement the service for adding new students by generating a uid when absent, verifying email is not taken, and inserting the student via the data access service through the controller.

Perform end-to-end submission testing by submitting the form, processing the JSON payload in Spring Boot, and verifying new students appear in the amigos code demo database via React.

Refactor the form component to a stateless function, wire onSuccess to close the modal and fetch updated students from the database, ensuring the list updates after submission.

Learn to handle server errors in a spring boot and react full-stack app by surfacing meaningful error information to the client, using json responses with status codes and timestamps.

Log errors on the frontend when handling server responses. Learn to handle errors with promises by checking response status, constructing an error object, and using reject and catch.

Add a React app notification system by creating helper functions for success, info, warning, and error, then integrate them to display message and description during errors.

Show no data with antd's Empty component and center a footer to add new students, handling zero or undefined counts.

Learn to create custom exceptions in spring boot and build a dedicated api exception payload. Use a controller advice to handle these exceptions and return a tailored 400 response.

Showcase server side validation in a Spring Boot and React fullstack app by sending an empty object via Postman, illustrating missing fields causing errors and need to validate before persistence.

Apply Java Bean Validation annotations in the student model to enforce not blank for first name, last name, and email, and a valid gender enum.

Implement email validation in exercise 1 using a regular expression, either in the student service or in a dedicated email validator class, and throw an exception for invalid emails.

Implement an email validator using a regular expression in a Spring component, with unit tests via JUnit and AssertJ, and integrate it into a service and Postman API checks.

Verify that an email is not taken by checking existence with select exists, throw an exception if found, and insert the student if not.

Implement a Postgres exists check to prevent duplicate emails, throwing an API request exception when taken, and surface the error in the front end with a notification.

Flyway streamlines database schema evolution with versioned and repeatable migrations, enabling effortless growth across environments by managing migrations in a dedicated db/migration location and maintaining schema history.

Learn how migrations are tracked with flyway and the schema history, including version, checksum, and installed status, and avoid editing applied migrations by using separate files.

Learn to create and run a second flyway migration adding course and student_course tables with start date, end date, and a 0–100 grade constraint, while tracking changes in schema history.

Apply a not null constraint to the department column in the course table and create migration v3 to alter the table, illustrating how to google Postgres solutions.

Learn to set a not null constraint on a column via alter table and alter column, using migrations to update the course department column safely.

Create a Postgres gender enum and apply it to the student table, cast existing data to the new type, and remove the check constraint to enforce enum values.

Learn to drop a check constraint on the student table with a Flyway migration, using alter table drop constraint if exists and verifying the migration schema version 5.

Learn how to cast string gender values to a PostgreSQL gender enum during inserts, ensuring existing data conforms to the enum type and updating constraints accordingly.

Learn how joins connect students and courses via the student_course link table and generate a random uid to create a course in the database.

Learn to insert new courses with sql commands, define columns and values, generate course ids, and link students to courses through the link table with start date and grade.

Insert a student-course record into a link table using student and course IDs, set start and end dates, and use joins to fetch combined student and course details.

Learn to write joins across the student, course, and student course tables to pull related data using on and using clauses, guided by foreign key constraints and table references.

Learn how to join the student and course tables using course_id, retrieve combined data from all three tables, and translate the SQL join into Java code.