Building FullStack E-Commerce App using SpringBoot & Angular

Bootstrap a spring boot project using start.spring.io, select Maven and Java 21, then add Spring Web, Spring Data JPA, MySQL, and Lombok for a sports center ecommerce app.

Open the unzipped project in IntelliJ, adjust the editor and layout, review the folder structure and dependencies, and switch from application properties to yaml.

Explore a clean five-folder structure for a spring boot and angular full-stack app, including controller, entity, model, repository, and service, and set up 8080 server and JPA configurations.

Implement a preconfigured yaml setup for the sports center database with root credentials, JPA Hibernate and SQL eight dialect, using docker-based data initialization.

Create a docker-based seed data setup for a Sport Center database using MySQL, including data.sql, a docker-compose file, and steps to validate and manage containers.

Set up a MySQL database with Docker Compose, seed the Esports Center data, and verify schemas and tables with MySQL Workbench as you prepare for entity creation.

Create a brand JPA entity using Lombok to reduce boilerplate, annotate the table, map an id with identity generation, and a name column, while enabling the builder pattern.

Create a type entity with a builder pattern, configure id generation strategy and column mappings, then add a name field and prepare to implement the product table next.

Create a product JPA entity with table mapping, Lombok annotations, and fields for id, name, description, price, and picture URL, enabling future repository work.

Set up many-to-one relationships between product and brand and between product and type with lazy loading and join columns; establish one-to-many from brand and type to products for performance.

Configure the Java 21 project structure by selecting the Java 21 SDK, ensuring compatibility with Java 17 if needed, then build and run the app against Java 21.

Begin by implementing the repository pattern with controllers, services, and dependency injection to manage brand, product, and type data, get all brands and products, then plan pagination, filtering, and searching.

Create JPA repository interfaces for brand, type, and product by extending the Java Persistence API, enabling CRUD and custom queries via repository annotations.

Create ui models for the e-commerce app using Lombok data and builder patterns, tailoring visible properties and mapping to product and type responses.

Create brand, type, and product services as interfaces, defining methods to get all brands, get all types, and fetch a product by id or list all products.

Implement a brand service that injects the brand repository, logs progress, fetches all brands, and maps them to brand response objects using Java streams and a builder.

Implement a type service by injecting a type repository, fetching all types, mapping to type responses with a builder pattern, and wiring with a service implementation in spring boot.

Implement a Spring Boot product service by creating a service class, injecting the product repository, and fetching a product by ID with error handling, mapping to a product response.

Implement a rest controller for products, wire product, type, and brand services, and expose a get by id endpoint that returns a response entity with ok status.

Implement the product controller part 2 using Spring's ResponseEntity to return products, brands, and types via respective services; ensure unique mappings to avoid conflicts, then build and demo.

Enhance the full-stack app by introducing sorting, ordering, and paging features; learn search, default ascending id sorting, descending ordering, and pagination for ten records.

Create a custom pageable resolver within a new config package, enable Spring Data Web support, and register a custom pageable handler to set the page parameter name and pagination behavior.

Fixes and implements a custom pagination resolver by overriding argument resolvers in web mvc configure, preserves default resolvers, adds a dedicated pageable resolver, and validates pagination starts from page one.

Implement search by name in the product service, create a custom repository query, and map results to product responses for the UI.

Implement a get mapping /search in the product controller that accepts a keyword parameter, delegates to the product service to search by name, and returns product responses.

extend the get products endpoint with an optional keyword parameter to search products by name, wire it into the product service, and return a paged product response.

Fixing the search functionality with get products shows how to handle the else case when the keyword is missing, using the product service with pageable support.

Implements server-side sorting for the get products endpoint by name, with sort and order parameters (ascending by default) and paging via page request, controlling page number, size, and sort order.

Begin building the sports center site by following the angular.io documentation, installing Node.js and npm, and configuring Angular 16 with ng bootstrap compatibility for a single-page application.

Install the Angular CLI globally using npm, choose version 16 now and plan migration to 17, update npm to the latest, and proceed to client creation in the next video.

Create an Angular application by initializing a new client project with routing and Sass styling, then install npm packages and run the boilerplate code.

Explore the Angular folder structure, including src, app module, app routing, main.ts, and index.html, to bootstrap the front end of the sports centre website using Angular 16.

Run the Angular app with ng serve, complete the initial prompts, and view localhost:4200 as the Sports center app loads with hot reloading and a welcome message.

Install ngx-bootstrap in the angular project using ng add ng-bootstrap, update app.module.ts and angular.json styles, and verify the UI with ng serve and hot reload.

Build a responsive Angular navbar using ng generate, Bootstrap styling, and Font Awesome icons; integrate a brand image, toggle button, links, and custom CSS into the app.

Add the logo and key images to the Angular assets, configure the assets path, and update the navbar to display logo.png for the e-commerce app.

Improvise the app component page with a bootstrap container, row, and an md 12 column. Plan to fetch items with the Http module.

implement an angular http client module to fetch backend data, inject http client, subscribe to get requests, and display featured products with error handling.

Configure spring boot cors via web mvc config to allow any origin, methods, and headers for api/*, and adjust the incoming response to an iterable format for pageable results.

Create a models directory and define a product interface to type front-end data from the back end, using json2ts to extract props and support the angular module.

Enhance your full-stack e-commerce app by implementing sorting, filtering, and search features, with data fetched from the database and reset options, in this module.

Enhance the shopping experience by modularizing the Angular app into core and shared modules, moving the nav bar to core, exporting it, and prepping for shared components.

Create a store module in e-commerce app, generate components and a service, and set up a store routing module with lazy loading and a flat folder structure for shopping experience.

Register and export the store component, configure the app module, and implement a store service with get products using http client to return an observable from the API URL.

Inject the store service into the component, call getProducts on ngOnInit, and subscribe to the observable to render products; pass the title as an input and wire the store module.

Define brand and type models in TypeScript, implement get brands and get types in the store service, and wire them into the store component with API calls and state updates.

Design a pragmatic store page with a two-column bootstrap layout, left filters, right products, and ngFor-driven brands and types, using a currency pipe for INR and USD.

Update the get product service to accept optional brand id and type id, construct the url with interpolation, and fetch products using the selected ids.

Enhance the user experience by implementing pagination and a pagination header, built as a shared component for reuse across the catalog and ordering pages, with refactoring of the store component.

Wire up pagination by integrating a pageable data model with page number, page size, and total elements, aligning front-end indexing with the back end and fetching products on page changes.

Create and configure app routes in the routing module, wire home and store paths, enable lazy loading, and use a router outlet to render views for an e-commerce app.

Activate the router link with router link activation and exact true to apply the active class on the item, then style active links in the navbar as blue and bold.

Implement a product detail page by wiring component methods, grid layout, and quantity controls to display name, description, price in INR, brand, and type via route id and store service.

Finish this part by implementing image extraction from the product picture URL (return last segment or null), add quantity increment/decrement with a minimum of one, and enable route lazy loading.

Implement an Http interceptor to transform requests and responses, enabling error handling, authentication, and logging, and scaffold not-found and server-error components within a core module.

Register an http interceptor in the app module with multi: true, and add routing for not found and server error component, noting 400 instead of 500.

Install NGX-Toastr to enable toast notifications, configure the toaster module, update angular.json styles, and discuss version compatibility with Angular 16 and 17 to prevent design breakage.

Learn to wire up toast notifications in an angular store module by creating a toaster service, triggering success and error toasts for product fetches and interceptor errors.

Enhance your full-stack e-commerce app by integrating breadcrumb navigation, a spinner, and wiring up the breadcrumb package with a highlighted header.

Build a section header with breadcrumb in an Angular app, generate and export the component, and integrate it in app html while planning a dynamic X and G breadcrumb.

Configure breadcrumb metadata in the app routing module to show a dynamic home / store / product name path, fetch data from breadcrumb items, and render in title case.

Set the breadcrumb name to the product name by applying an alias in the store routing. Bind a breadcrumb service to the product detail page and style the breadcrumb label.

Make the breadcrumb title dynamic by injecting a breadcrumb service into the section header and using an async pipe to display the current label when not on the home page.

Install Bootswatch via npm, inject the theme into your Angular project with Bootstrap 5, switch between united or superhero themes using angular.json, and run ng serve to preview.

Install and configure the mx spinner library for Angular 16, create a loading interceptor to simulate a one-second delay, and wire the ng spinner into the app module.

Wire up the spinner in Angular by creating a loading service and a spinner service, wiring ng spinner in the app component, and managing a loading request counter.

Fixes the spinner issue by refactoring and realigning the code, ensuring the spinner ends before the nav bar renders, and demonstrates preparing the basket APIs to integrate with the UI.