Full Stack Web and Hybrid Mobile App Development With React

Set up the server-side infrastructure by installing MySQL, running its services in the background, and configuring the database root credentials with MySQL Workbench; use Java 8.

Install and configure Lombok, then enable annotation processing in settings to simplify server-side code and eliminate boilerplate getter and setter methods.

Explore the Spring overview; learn how dependency injection decouples components, implement dependency injection via interfaces for repositories, and apply constructor, setter, and field injection with Spring annotations and configuration.

Explore server side architectures by implementing mvc structure with entity classes, repositories, services, and a separate risk controller, using spring security, hibernate, and liquibase for secure, mapped database migrations.

Create a Spring Initializr project using Gradle and Java, configuring MVC architecture with security, persistence API with Hibernate, REST repositories, Liquibase migrations, and MySQL as the database.

We chose Gradle for easier configuration and better performance than Maven; it enables incremental builds by running only changed tasks and supports parallel multi-module builds.

Configure server-side application properties by naming the application, configuring data source credentials, enabling utc time zone, auto-creating the database, and using Liquibase with Hibernate to manage schema updates.

Examine the entity diagram to model users, roles, products, and transactions, enabling users to purchase products through transactions while storing roles as an enumeration.

Hibernate is a Java object-relational mapping tool that maps entities, tables, and columns to databases, supports id generation, relationships like one-to-one, one-to-many, many-to-one, many-to-many, and fetch strategies.

Create a user model class in the model package with auto-increment id, name, password; include a role class and use mock data annotations to generate getters, setters, equals, and hashCode.

Explore ID generation strategies in JPA and Hibernate, including auto, identity, sequence, and table generators, with practical JPA examples and guidance on optimal use per database.

Create a product model class in the model package mapping to the product table, with id as the primary key and fields for name, price, and explanation, using data annotations.

Create a transaction model class with id as primary key, product_id and user_id joins, establishing a one-to-many relation with product and a many-to-one relation with user, using Bloomberg data annotations.

Liquibase overview explains a migration library for relational databases, using a change log of change sets with unique IDs; it supports json and sdk formats and offers automatic rollback.

Create a Liquibase change log to build a user table with name, first name, and role, with rollback to drop the table, and integrate it into the master changelog.

Learn to create database change sets for product and transaction models using liquibase, including creating product and transaction tables and populating with ten test products.

Explore JPA repository basics for CRUD by extending with an entity and id, use derived queries like findByUsername, and apply @Query and @Modifying for custom updates.

Create a user repository implementation by adding a user repository interface that extends the GPA repository, enabling save, update, and find by id, with a find by user name query.

Define product and transaction repository interfaces, each extending a generic repository with model and id types, enabling CRUD database methods.

Implement a Spring user service in MVC service layer, wiring the repository via dependency injection and providing save, update, delete, find by username, and find all users with password encoding.

Implement a Spring product service by defining the interface and implementation, annotating for service and transaction management, injecting the product repository, and adding save, update sales, and find all methods.

Implement a transaction service with an interface and implementation in the service package, wired to the transaction repository, providing save and find all transactions methods with service and transactional annotations.

Explore server-side control and role-based access, detailing musician and admin permissions: login, register, profile, product purchases, and admin-wide actions like managing users, products, transactions.

Discover how a rest controller handles http requests with get, post, lead, put, and patch mappings, and how it uses request parameters and response entity.

Implement a Spring-based user controller to handle registration, login, and purchases, wiring user, product, and transaction services, with rest mappings, security principles, and proper responses.

Implement admin controller with rest endpoints to manage users, products, and transactions, using dependency injection and autowired, performing create, update, delete, and find operations with proper statuses.

Learn how Spring Security handles authentication and authorization, implement secure login with encrypted authentication, configure user details service, and control access to resources for authorized and unauthorized users.

Explore spring security’s default login flow, basic and form-based authentication, and session management, then customize access rules, logout, CSRF, and CORS for flexible security.

Customize web security with spring security by creating a config class, enabling web security, and overriding configure to set cors, public resources, admin-only endpoints, and disable csrf.

Explore JWT authentication with role-based access by creating and validating tokens, applying server-side filters and an authorization header, and enforcing token expiration.

Generate a JWT token provider that creates tokens from authentication data including username and authorities, signs them with a secure algorithm, and validates expiry via the authorization header.

Implement a custom JWT authentication filter by extending the basic authentication filter, wiring authentication managers and the JWT token provider, validate tokens, and set authentication in the Spring security context.

Learn multiple ways to run a Spring Boot application, including from the main class, via a run configuration with environment variables and profiles, and using the Gradle boot run task.

Test the server side of a full stack web and hybrid mobile app built with React.

Learn to integrate backend REST API endpoints with the frontend using HTTP requests and handle backend data directly in the frontend.

prepare the client-side infrastructure, adopt react, and install it via an npm installation command to set up a react app.

Explore the basics of React development, including creating projects with Create React App, managing libraries with npm, and building component-based interfaces with props, state, and JSX.

Develop a client side interface for user and product management, consume server data via api calls, enable login and registration, and support admin user CRUD operations.

Create React app for a product management app by installing and configuring axios, react-router, bootstrap, and font awesome, and setting up to consume rest api data.

Explore how a Create React App project is structured, including public and src folders and package.json, and how npm start serves a single-page app via ReactDOM.render.

Configure external dependencies for the grid project by defining and organizing them in the index file, including bootstrap, ensuring proper configuration.

Create model classes for React on the client side by defining user, role, and transaction classes within a model package.

Explore observables in React as asynchronous data streams you subscribe to with observers. See how next, error, and complete events update components and manage session user state with RxJS.

Learn how Axios handles http requests to fetch data from server api endpoints in a React app, using promises and then catch, and build reusable services to centralize data access.

Implement user service to manage login, logout, registration, and purchase via http requests with authentication headers, store current user with behavior subject and local storage, and expose it as observable.

Implement a React login component that calls the user service login, manages state (user, error, submitted), handles input changes, and renders a login page that redirects on success.

Implement the register component by building a register page, importing react and user service, managing state for user, loading, and error, handling input changes, submitting to register, redirecting to login.

Implement a user profile component and profile page, importing React and the user service, redirecting to logon if no user, and rendering a welcome header with details.

implement the home page component to list all products in a table, view details, and manage user and transaction services with state for products, errors, and current user.

Implement a product detail page component in React to display product information. Fetch the current product from local storage, manage state, and render a header with a welcome message.

Implement an admin service to handle get, update, and delete admin users via authorized rest api calls, using the user service for a token.

Develop admin component to list, create, edit, and delete users using admin and user services, display them in a bootstrap table, and manage modals, forms, and font awesome icons.

Develop a user modal component in React, using Bootstrap modal, to create and edit users via user and admin services, managing state, props, and error message.

Create a delete modal component and lead confirmation dialog in a React app, wiring a bootstrap modal with admin service to delete users and handle errors.

Build a React Router setup with user, admin, and error routes using browser, memory, or hash history, including default routing, login, product detail routes with params, and 404/401 pages.

Implement authentication guards in React with a card architecture and a rollout component to restrict access by user roles, showing unauthorized messages or redirects to protected pages.

Implement an authentication guard to protect private routes by verifying the current user with the user service; export the guard and redirect to login or unauthorized page as needed.

Develop a navigation bar for the user and admin panels by importing Font Awesome icons, wiring logout via the user service, and rendering login, register, profile, and payouts options.

Learn to display the active route on navigation by using bootstrap's active class, subscribe to location changes, and update the active link as components mount and unsubscribe on unmount.

Test the application by starting the server and choosing between two running methods, then verify behavior with different users by switching roles in the database.

Prepare the mobile side infrastructure for a React Native app by installing the React Native CLI, npm package tools, Android SDK, and Android Studio emulator, with iOS builds on macOS.

Introduces React Native basics, project setup via command line and npm, library management, and core concepts: props, state, lifecycle, and render-based components.

Develop a mobile interface for user and product management, consume server data via APIs, enable login and registration, product browsing and purchases, and admin CRUD with authentication and authorization.

Install and initialize a React Native project, add dependencies like axios, React Navigation, React Native Elements, vector icons, and async storage, and link libraries for iOS and Android.

Debug React Native on localhost and build Android and iOS apps by installing Android Studio and the Android SDK, creating a device, and running react-native run-android or run-ios.

Configure the repo and create page templates for login, register, home, product, detail, admin, and user pages, update the app name and Android display name to consumer, and export components.

define user, role, and transaction model classes in a React Native project, using constructors and constraints, and organize them in a models folder.

Build a user panel navigation in React Native using stack, role, and seq navigation, by creating a components folder and menu component, wiring home, product, and detail pages with icons.

Create an admin menu panel with a side navigation that links home, Edwin page, and user page, featuring stack navigation, icons, and user lists and details.

Learn to build a star shaped component using React Native style sheet, organize styles into containers, logos, text inputs, and buttons, and implement alert and success messages with centered layouts.

Customize side menu content in a React Native app by building a drawer content component, exporting it, and using a PureComponent with a scroll view, images, and text.

Builds a react-native router with stack navigators for login and register, and separate user and admin navigators managed by a router container and app state.

Implement a default export user service to handle authentication, login, logout, and registration, manage current user with storage and a behavior subject, and support product retrieval and purchase with events.

Implement a login component in React Native, using a user service to authenticate, manage input state, show a loading indicator, and redirect when a current user exists.

Implement the register page by wiring a register component to the user service, manage form state, render with React Native elements, and handle input changes and form submission.

Create a custom header component for a native navigation bar with a left menu icon, a center title from props, and a right logout icon calling the user service.

Implement the home page by importing React Native components, asynchronous storage, and user models, fetch the current user in componentDidMount, and render a welcome message with user details and logo.

Implement the product page by listing all products with a flat list and rendering each item with a title, subtitle, and icon, and pressing item navigates to the detail page.

Implement a product detail page by importing text and image components, a custom header, and user service; display product details using navigation parameters and handle purchase via transaction with errors.

Implement admin service class exporting by default, performing get, post, put, and delete rest api calls for admin user management, using user service to provide authorization headers.

Develops an admin page that lists all users via admin service methods, using a custom header, loading state, and interactive list items to navigate to a user detail page.

Implement a user page that shows user details, handles text input and alerts, uses image components and a custom header, and supports update or delete actions via services.

Test the mobile app by running the server from the main class or via a Gradle task. Then launch on devices or emulators and verify user access via database rules.