Building FullStack E-Commerce App using SpringBoot & React

Initialize the project with Spring Initializr to create the core structure. Organize into modular packages: controller, entity model, repository, and services, and connect to a MySQL database via Docker Compose.

Initialize a Spring Boot full-stack e-commerce project using Spring Initializr, selecting a Maven Java 21 setup with the dependencies Spring Web, Spring Data JPA, MySQL driver, and Lombok.

Set up the Spring Boot and React project in IntelliJ, configure pom.xml, verify Java 21, enable Spring Data JPA, Spring Boot Starter Web, and Lombok, and choose yaml over properties.

Organize a modular Spring Boot project by structuring packages for controllers, entities, models, repositories, and services, and configure a starting server port 80/81 for the full stack app.

Set up an e-commerce app with Spring Boot and React by configuring YAML and exploring parent-child components, Docker Compose for MySQL, and ddl-auto schema updates with a physical naming strategy.

Set up seed data for a MySQL database with Docker, creating data.sql and a docker-compose.yml to initialize the sportscentre database.

Set up Docker to containerize the e-commerce app, exploring images, volumes, and Docker Compose, and manage MySQL with a dashboard and meaningful container names.

Visualize your seeded data in a dockerized MySQL setup using MySQL Workbench, connect with root credentials, and inspect the sport center schema with brand, types, and product tables.

Create a brand JPA entity by annotating a Java class as an entity and table, use Lombok for boilerplate, and define an identity generation strategy and a name column.

Create the type entity by copying the previous entity's blueprint, defining an id and name, and applying the same structure before introducing the product entity in the next video.

Create a product entity by coding a product class, borrowing from brand or type, and adding id, name, description, price, and picture url, with brand and type id mappings.

Establish many-to-one relations between product and brand and between product and type using lazy fetch, join columns, and mapped-by one-to-many mappings, guiding the upcoming repository setup.

Introduce the repository pattern across the controller, entities, service layer, and repository, and demonstrate swagger-based open api documentation for product endpoints at /api/products.

Adopt a practical GitHub strategy by using the hosted repository to switch modules, view code, and troubleshoot with live support as you progress to the next level.

Create repository interfaces for the e-commerce app by annotating with @Repository and extending JpaRepository for image sports center, brand, and product entities with integer IDs.

Create view models that interact with the UI layer, using Lombok and builder patterns to define brand, type, and product responses for a full-stack e-commerce app.

Create and implement a service layer by defining brand, type, and product services, including get all brands, get all types, and get product by id.

Implement the brand service by wiring a repository, fetching all brands with find all, and mapping results to brand responses using a builder pattern, with logging and constructor injection.

Implement the type service in Spring, inject the type repository, fetch all types from the database, map them to type responses using a builder, and prepare for the product service.

Implement the product service using a repository pattern to fetch by ID, handle not found errors, and convert products to responses with a builder, including brand and type name extraction.

Implement the remaining public method for the product service, following the public contracts first pattern, fetch all products from the database, map to product responses, and log the results.

Build a Spring Boot product controller with a REST controller and api/products mapping, inject services, and implement get by id to return a response entity with product data.

Implement a product controller with get mappings for products, brands, and types, returning response entities of product, brand, and type responses via the product service.

Demonstrates the e-commerce API in action, verifying 35 products with id, name, description, price, image, url, brand, and type, and showing brands, types endpoints, and swagger documentation.

Add Swagger by integrating the dependency into pom.xml, refresh the Maven project, and launch Swagger UI to expose API docs and listed endpoints for easy testing.

Extend product repository with the specification pattern to enable dynamic queries via the query and criteria builder, updating product service and controller to support name, brand, and type filters.

Explore implementing pagination with a pageable component in Spring Boot, updating the product service and controller to return a page of products via a pageable findAll call.

Apply the specification pattern to replace if-else logic and build dynamic product queries. Define name, brand, and type specifications in the repository and use them in the service layer.

Extend the product service to support a brand ID, type ID, and keyword via a brand specification built with the specification pattern and criteria builder.

Finish implementing the remaining search criteria by building a JPA spec with type id and keyword filters, then query with findAll and map to product responses.

Modify the get products endpoint to accept page, size, keyword, brandId, typeId, sort, and order parameters, build a pageable page request, call product service, and return a structured product response.

This demo fixes a Spring repository issue by using brand id and type id, then demonstrates filtering, searching, and pagination with sort direction, paving the way for spa setup.

Explore building a React application from scratch by creating a component, organizing folders, and outlining features to implement in a full-stack e-commerce app.

Use vite to set up your React application, a fast front-end tool for modern web projects. Enjoy lightning-fast server start, hot module replacement, and optimized builds.

Set up a React client project by validating Node.js compatibility, selecting TypeScript with SWC, creating the client scaffold, and installing dependencies to run the dev server.

Install dependencies in the client folder with npm install, then start the app with npm start to run Beat plus React on localhost:3000 after changing port from 5173 to 3000.

Explore the react folder structure from node_modules to public and src, and see how index.tsx renders the app component with JSX and useState into the DOM.

Explain how a state hook initializes a count variable to zero, exposes count and set count via destructuring, and updates state in a React functional component from a scratch UI.

Build a live product list using the state hook to manage products, map the array to render id, name, and price, and add new items with an on click button.

Learn to use the state hook to manage a products array initialized with three items, updating state with the spread operator to add new products on click.

Use the useEffect hook to fetch data from the backend api with an async get call, update the products state, and bind the results to the user interface.

Implement cors config in a dedicated course config class to permit any origin, any header, and common methods (get, post, delete, put) between front end and back end.

Fetch products with a promise in a React component using useEffect and fetch, then setProducts with data.content, ensuring the dependency array avoids infinite loops, and previewing a TypeScript extension.

Add a TypeScript interface for product to type the app state and leverage JSON to TypeScript with Swagger to generate models, ensuring compile-time type safety.

Organize the react project by structuring app with layout and models, moving app.tsx and index.css into layout, placing features outside the app, and using a public folder for images.

Fixes an import issue in a full-stack e-commerce app by correcting main tsx imports, adjusting layout and index.css, restarting npm start, and planning a catalog component in features.

Explore building the app layout with a live app bar, the style theme builder, and product cards in React, showcasing parent-child relationships and state management.

Create a catalog component by moving catalog logic into a dedicated catalog folder and catalog.tsx, fetch products, set state, and map products.

Learn to style a full-stack e-commerce app with material ui by installing and configuring typography, icons, and components like paper, card, divider, badge, and avatar in main.tsx.

Refactor the catalog by introducing a product list that takes a typed products prop, uses a grid layout with Material UI, and renders a product card for each item.

Create a product card component for the catalog using TypeScript and material UI, defining props and wiring header, media, content, and actions such as add to cart and view.

Implement extract image name from product picture URLs and format prices with Intl.NumberFormat for INR, then integrate these utilities into a React product grid and product cards.

Create a header.tsx to render a Material UI app bar with a toolbar and typography, using a static position, bottom spacing, baseline, and container for a consistent layout.

Implement a theme builder to support multiple themes with a Material UI theme provider, configuring dark and light modes via a palette type and theme switch.

Wrap the app with a theme provider and pass the created theme to enable consistent theming, including switching to dark mode, after correcting the missing provider.

Make the app bar static by setting position to fixed with a z-index and proper padding to prevent overlap, and use react dev tools and profiler for debugging.

Activate the navigation links using React Router to drive page navigation, wire up the product detail page, and set up styling for the navigation pages in the app.

Explore installing and configuring react router dom with npm in a modern app. Master version nuances, nested routes, and essential snippets for setup.

Create the home and contact pages in a React app by scaffolding tsx components, applying h2 typography, and wiring the basic router structure for navigation.

Create a router module using the browser router to define a routes array with home page, store, catalog, product details, and a contact page, including app shell and nested paths.

Create a product details page in a React app, enable routing with a router outlet, and activate navigation via a root provider and main.tsx.

Create header navigation with nav links and account links, including home, store, contact, login, and register, and apply typography and hover states for a cohesive toolbar.

Build and style navigation in the full-stack e-commerce app by implementing nav links with hover and active states, inherited colors, typography, and a flex-based toolbar with separators and mapped links.

activate account links in the navigation using a flex layout, an icon button with a shopping cart badge, and a mapped account links list with reusable styles.

Explore nav links and styles in a Material UI app bar, using a box wrapper, flex layout, and a React Router nav link with an icon button and badge.

Update the product card to use a React Router link for the view button, passing the product ID in the route, and verify navigation to the detail page.

Fetches product data on the details page using Axios in a React app, wiring useEffect with the product ID from useParams, and manages loading and error handling.

Implement the product detail page using a Material UI table container and responsive grid, extracting images, formatting price in INR, and wiring product details with add-to-cart functionality.

Implement best practices in the e-commerce app by adding toast notifications, a built-in spinner, and a custom error handler, with proper route handling and missing store ID messaging.

Centralize api requests by creating an api folder and an agent.ts that configures axios defaults, defines typed get, post, put, delete signatures, and exposes a catalog and product requests store.

Modify the catalog and product details pages by centralizing API requests via an agent, fetching store lists and product data, and implementing loading and error handling.

Create a not found page to handle 404 errors by building an errors folder, implementing a not found component with react-router navigation to home, and registering the route.

Extend the not found page to handle server error 500 by creating a server error React component, reusing imports and assets, and wiring it into the router.

Implement a TypeScript axios response interceptor to catch HTTP errors, log status messages, and route users to notfound or server error pages.

Update the router to include not found and server error routes, add a wildcard redirect to not found, route product detail errors, review the implemented interceptors, and plan toast notifications.

Install and configure react-toastify to implement toast notifications in a React app, add a global toast container with bottom-right position, CSS, and use toast.error for errors.

Implement a custom product not found exception and a centralized exception handler to return a not found response using a controller advice and a custom error payload.

Implement centralized exception handling for all controllers with a controller advice that extends the response entity exception handler and maps product not found exceptions to a not found response.

Create a reusable spinner component using Material UI backdrop and circular progress, with a configurable loading message via props, styled with a flexbox and typography.

Implement a reusable spinner using a backdrop and Material UI box, with a circular progress indicator and loading message; simulate delay with setTimeout and apply to catalog and product details.

Learn to implement the server-side basket controller, exposing methods to get a basket by id and return basket data, while configuring the radius hash in a dockerized setup.

Import the Redis library by adding the Maven dependency in pom.xml, pull it from Maven cloud, refresh to resolve dependencies, and prepare to build the basket entity.

Create a basket entity as a Redis hash by annotating a Java class with an id and a list of basket items, using Lombok data annotations and a no-args constructor.

Create a basket item class using Lombok data to auto-generate getters, setters, and equals, and define id, name, description, price, image URL, brand, type, and quantity, with yaml updates.

Add the radius configuration under the spring section of application.yaml, pointing to localhost:6379. Note its case and space sensitivity and prepare for repository setup in the next video.

Create a basket repository with the @Repository annotation, extend CrudRepository for a NoSQL database, define a string ID, and design it as an interface for future implementation.

Create basket response and basket item response classes in the model folder to be exchanged over the wire with ui; annotate with Lombok and builder and prepare for service implementation.

Establish a basket service interface with get all baskets, get basket by id, delete by id, and create basket returning basket response; implement to initialize baskets and clear on checkout.

Implement a basket service in Spring by constructor-injecting the basket repository, fetching all baskets, mapping to basket responses with a stream, and logging the process.

create a basket response by mapping basket items via a mapper, converting to basket item responses, and building the final response using a builder pattern.

Implement basket item response mapping by building a basket item response from a basket item, stitching id, name, description, price, picture URL, product brand, product type, and quantity.

Implement the get basket by id method with logging, use an optional basket, check presence, log not found, and return a converted basket response when found.

Implement delete basket by ID using the basket repository with logging, then create and save a basket, log the creation, and return a basket response.

Create a basket controller as a rest controller mapped to api/baskets. Implement endpoints to get baskets, get by id, and delete by id, using basket response and basket DTO concepts.

Create a post mapping to convert basket responses to basket entities, map basket items to entities, call the basket service to persist in Redis, and return a created basket response.

Implement client-side basket functionality in React, updating the cart icon and counts as users add, increment, decrement, or remove items, with Redux managing state in a single store.

Develop and wire TypeScript interfaces for basket, basket item, and basket totals, enabling add-to-cart, shipping, subtotal, and total calculations on the client side.

Learn how Redux provides a centralized, predictable state container for JavaScript apps, covering store, actions, reducers, dispatch, and selectors in a React-based e-commerce project.

Install redux libraries, including react-redux and redux toolkit, and set up the redux store for your full-stack e-commerce app.

Configure a Redux store with Redux Toolkit, wire in a basket reducer, and create typed hooks like useAppDispatch and useAppSelector for state access.

Create a basket slice in the basket module using redux toolkit's create slice, define initial state as null, and implement set basket reducer to update basket from the action payload.

Wrap the app in a provider in the main file to pass the store and settings to all components, import the basket slice, and prepare the basket component for use.

Create and route the basket page in the React app. Wire the header basket link and test navigation to /basket, then plan to extend basket functionality.

Build the basket skeleton with a contextual table (quantity, price, name, image) and implement the basket service to fetch data, map operators over items, and show a totals basket summary.

Build a dedicated basket service in the API section, implementing get basket from API, get basket from local storage, add item to basket with redux dispatch, and calculate totals.

Build a basket service that fetches or creates baskets in local storage, maps products to basket items, updates quantities, and updates totals in Redux.

Implement basket service by adding items to the basket, updating quantities, and calculating totals with a reducer for subtotals; remove items, sync with local storage, and delete baskets via API.

Increment and decrement basket item quantities on the catalog page, update the Redux store and local storage, and handle item removal via index-based splice.

Install and integrate the cuid2 package to generate secure, collision-resistant unique IDs for the basket service, enabling offline-friendly, scalable IDs in the full-stack e-commerce app.

Export the basket service and integrate it into the agent to support get, add item, remove item, and quantity updates including increment and decrement via Redux dispatch.

Export basket functionality from the agent by updating the store to expose the basket to components via services, then verify operations and prepare to update the card component.

Fix store and basket slice typos, then modify the basket page to render items via useAppSelector and implement remove, decrement, and increment item actions with images and empty basket messaging.

Update the header to reflect basket changes by reading basket state with the app selector, computing the item count from basket items, and updating the header icon via useEffect.

Demonstrates add to cart by wiring the product card to dispatch actions, showing loading with a circular progress loading button, and updating the basket via redux and api calls.