Build & Deploy Modern eCommerce App | Java | Spring | React

Explore how Spring Boot builds production-ready apps with auto configuration, starter dependencies, Spring Initializer, and an embedded server, while following convention over configuration.

Learn to bootstrap a spring boot 3.4.x project using the spring initializer, choosing Maven and Java 21 LTS, and add web, JPA, security, MySQL, and Lombok dependencies.

Explore Spring Boot starter dependencies, their POM file configuration, and how they bundle web, data JPA, security, and MySQL support for auto configuration.

Explore REST APIs, a stateless, resource-based web service approach using standard http methods to enable scalable, interoperable communication with representations like json, xml, or html and hypermedia navigation.

Explore spring annotations as metadata that configure beans and enable dependency injection, aspect oriented programming, and transaction management, with examples like @Component, @Service, @Repository, and @RequestMapping.

Explores the most commonly used Spring Boot annotations, including RestController and ResponseBody, for restful web services. Demonstrates request mapping and binding path variables, parameters, and bodies.

Create your first spring boot controller by scaffolding a demo controller inside a main package, annotating with @Controller and @RequestMapping, and defining a get method for hello.

Create a spring boot web controller with /demo and /demo/hello mappings, diagnose startup errors, and adjust dependencies by commenting out database, security, and jpa to run on port 8080.

Configure database settings and Hibernate DDL auto create to generate tables, create the schema in MySQL Workbench, then run the project to verify the contact table is created.

Define the contact service interface and its implementation to perform CRUD operations (add, update, get by id, get all, delete) and inject the JPA repository via a constructor.

Learn how to implement a contact service in a Spring Boot app by adding, retrieving, updating, and deleting contacts, including handling an embedded address and guarding against null pointer exceptions.

Create a rest controller in spring boot to test and expose endpoints for getting all contacts, adding, updating, deleting, and getting a contact by id using request bodies and path variables.

Test the project using postman by hitting the contacts API: create, update, retrieve, delete, and verify changes against the MySQL database.

Wrap up previews Spring Boot basics, introduces React basics, and guides you to set up a startup project for hands-on, practical experience with Spring Boot and React.

Explore how React, a JavaScript library by Facebook, builds fast, single-page interfaces with a component-based architecture and a virtual DOM, and learn setup with NodeJS, npm, and Visual Studio Code.

Create your first React app by installing Node.js and VS Code, generating the project with Veet, installing dependencies, and running the dev server to view it at localhost.

Explore the React app folder structure, including package.json, Vite config, index.html, and main.jsx. Understand how the root div renders app components and how CSS and development settings organize the project.

Explore how React uses the useState hook to manage a component's state, initializing count to zero and updating it via onClick to rerender the component.

Explore how react hooks enable state and lifecycle management in functional components. Discover useState and the top-level rules for calling hooks only in react components or custom hooks.

Explore event handling in React, binding onClick and other events in JSX, passing arguments with arrows, and using handle prefixes for cleaner handlers.

Learn how to render lists in React with the map function, assign unique keys from item IDs, and avoid array indices to optimize rendering and stability.

Learn how to render elements conditionally in react using if statements, the ternary operator, logical and, and switch cases, with examples like isloggedin, notifications, and status (loading, error, success).

Create a simple todo app in react using Veed, install dependencies with npm, and run npm run dev to view it at 5173.

Set up the todo component state using useState to manage a todo array, input, and edit index for a CRUD flow. Initialize with an empty array in the app.

Create a handle edit function as a click event handler for todos, pass the todo index, and set the input value and edited index to enable editing.

Learn how to toggle a todo's completed state by mapping the todo array, comparing indices, and updating the list to strike or restore items as you click.

Implement the todo form in a React app, using inline styles, input change handling, add and edit logic, delete actions, and conditional rendering to display todos.

Learn to style a todo component with bootstrap, installing and importing bootstrap, removing old css, and applying bootstrap classes for layout, controls, and buttons; implement complete state to strike items.

Test the system by adding, editing, completing, and deleting to-dos to verify the app functions. Prepare for deeper study and mastery in the next section.

Explore user use cases for both customers and admins: customers create accounts, login, browse and manage the cart, and checkout via PayPal or Stripe; admins login and manage products.

Install the Java JDK (preferably JDK 21), an IDE (IntelliJ or Eclipse), Node.js, and MySQL to prepare for a Spring Boot back end and a React front end.

Model the product, image, and category entities and their relationships: one product has many images, many products belong to one category, and every product has at least one image.

Learn to generate a brand new Spring Boot project using start.spring.io or IntelliJ, select Java 21 with Maven, add web, Lombok, JPA, and MySQL dependencies, and import into the IDE.

Define and implement user, cart, order, and row entities in IntelliJ, establishing many-to-many and one-to-many relationships, with join tables and an order status enum (pending, processing, shipped, delivered, canceled).

Explain how to model a cart item as a product line, with fields for quantity and prices and links to cart and product, including a method to compute total price.

Implement the product service layer by wiring a JPA repository, providing retrieval methods (all, by id, by category and brand), and preparing for add, update, and delete operations.

implement the add product method in the product service by validating uniqueness of name and brand, creating or linking a category, and saving the new product.

Learn to test the product API with Postman by creating, updating, deleting, and getting products by name, uploading images, and validating data via DTOs and path variables.

Explore how global and specific exception handlers work in a Spring Boot app. See how entity not found and product not found errors propagate to provide clear messages.

Clean up your project by centralizing exception handling, removing try-catch blocks from controllers, and delegating business logic to the service layer for maintainability.

Create user service by adding a users package, a user service interface, and define user request and update user request classes for create, update, get by id, and delete operations.

Implement the user service by wiring the user repository, adding create, update, get by id, and delete methods, with entity not found and exists checks.

Learn to test the user API with postman, validate unique emails, and implement user DTO mapping using model mapper to prevent exposing passwords in responses.