

Explore Spring Boot fundamentals, REST API basics, and Reactjs fundamentals while building two full stack projects: employer management and todo management, with CRUD for departments and employees.
Master one complete stack and avoid seven common early mistakes as a full stack developer. Learn to strengthen backend fundamentals, testing, DevOps, and real projects.
Explore how an api enables two software systems to talk, and how rest api uses http methods get, post, put, delete with json messaging.
Learn the six rest architectural constraints: client-server, statelessness, cacheability, uniform interface, layered system, and code on demand, and how they ensure reliable, scalable APIs.
Explore Spring Boot fundamentals for beginners, learn essential annotations for building Spring Boot rest APIs, and create a Spring Boot project to implement simple APIs.
Learn how Spring Boot eliminates boilerplate by auto-configuring Spring beans, providing embedded Tomcat, and offering starter dependencies. Discover its focus on quick bootstrapping, externalized configuration, and easy Spring MVC setup.
Discover how Spring Boot accelerates spring-based app development with starters, auto-configuration, externalized configuration, actuator, and embedded servlet containers, simplifying dependency management and deployment.
Create a Spring Boot project via Spring Initializr and import it into IntelliJ IDEA. Run the application on the embedded Tomcat server and explore the project structure and dependencies.
Create a simple Spring Boot REST API using @RestController and @GetMapping to return a Hello World string as JSON at /hello-world, running on an embedded server port 8080.
Create a Spring Boot REST API that returns a Java bean as JSON, using a Student class with id, firstName, lastName, and a Rest controller mapped to /student.
Create a Spring Boot rest api that returns a list of students as json using @GetMapping, building a four-student list in the controller and exposing it at /students.
Create a Spring Boot REST API that handles path variables using @PathVariable, including multiple URI template variables, and binds values from the URL to method parameters.
Learn to build a Spring Boot REST API that uses @RequestParam to extract single and multiple query parameters from a request URL, such as id, firstName, and lastName.
Learn to build a Spring Boot REST API that handles HTTP POST requests with @PostMapping and @RequestBody, mapping JSON to a Student object and returning 201 Created.
Learn to create a Spring Boot REST API that handles HTTP PUT requests to update a resource using @PutMapping, @RequestBody, and @PathVariable, with Postman and status codes 200 and 201.
Build a Spring Boot REST API that handles HTTP delete requests with @DeleteMapping, bind the path variable id, and return a 200 OK response when deleting a student by URL.
Configure full http responses in a spring boot rest api using the ResponseEntity class. Pass body, status codes, and headers, and explore ok() and created status examples.
Define a base URL for REST APIs in a Spring MVC controller using @RequestMapping at the class level, avoiding repetition and testing endpoints with Postman.
Explore ReactJS fundamentals and concepts to prepare for building Spring Boot and ReactJS full-stack projects.
Explore React.js, an open source JavaScript library for building user interfaces. Learn component-based architecture, reusable components, and how virtual DOM optimizes updates by comparing and updating the real DOM.
Create and set up a react application with create-react-app and vite, install node and npm, and run a development server on port 3000, rendering hello world.
Explore the react app project structure—from package.json with dependencies and scripts, to public/index.html, src files like App.js and index.js, and root rendering with ReactDOM.createRoot.
Explore the concept of React components, including reusable, nested blocks like headers, footers, and navbars, and distinguish functional components from class components.
Learn how functional components in React are JavaScript functions or ES6 arrow functions that return JSX and how props enable data transfer.
Learn how to create class components in a React app using ES6 classes, React.Component, and a render method that returns JSX. Compare with functional components and props.
Master importing and exporting React components using named and default exports, including multiple named exports per file, one default export, and aliasing with practical examples.
Show how jsx, standing for javascript xml, lets you write html inside javascript and build components like HelloWorld, exported and used in App.js, with Babel converting jsx to javascript.
Master JSX rules in React by wrapping multiple elements in a single parent, using div or fragment, and applying className, camelCase event handlers, and expressions with curly braces.
Explore props in react, a properties data carrier that passes data from a parent to a child component and supports strings, objects, and arrays.
learn how to destructure props in React using ES6, extracting firstName, lastName, and email either in the function parameter or in the function body to improve readability.
Master the React class components state object and setState() by walking through an Employee component example that updates firstName, lastName, and email on a button click, triggering a re-render.
Learn how to use the useState hook to define and update state in functional components, including destructuring into state and setter with an initial value, and managing strings and objects.
Learn how to implement event handling in a React application, using camelCase event names like onClick, managing state with useState, and updating count through handleClick and handleReset.
Explore conditional rendering in React using if-else, ternary, and short-circuit logic to control UI output based on state. Learn to implement these patterns with useState and login examples.
Build a full stack employee management app using spring boot with spring data jpa and hibernate 7, mysql, and a react 18 frontend with bootstrap, axios, maven, and postman.
Explore the demo of an employee management system with two modules: employee management and department management, performing CRUD operations on employees and departments, with departments created before adding employees.
Explore spring boot and react full-stack architecture with separate back-end and front-end projects, loosely coupled rest APIs, and a three-layer back end (controller, service, dao) using axios for json.
Explore how the data transfer object (DTO) pattern reduces remote calls by returning a single API response containing organization, department, and employee data in a Spring Boot REST context.
Explore applying the DTO pattern in a Spring Boot application, transferring only needed data between client and server, safeguarding sensitive fields, and reducing remote calls with aggregated responses.
Build crude rest APIs for the employee management module, implementing create, get, get all, update, and delete operations, and test them with Postman to prepare for frontend integration.
The lecture explains the Spring Boot three-tier architecture—controller, service, and Dao or repository layer—showing how Postman requests flow from client to controller, service, Dao, and the MySQL database.
Create a Spring Boot project in IntelliJ IDEA via Spring Initializr, configure Maven and Java, add Spring Web and Spring Data JPA with MySQL driver, and set up Lombok.
Configure a MySQL database in a spring boot application by creating the EMS database, wiring application.properties with jdbc url, username, password, hibernate dialect, and spring.jpa.hibernate.ddl-auto, then verify the connection.
Create an employee JPA entity with Jakarta Persistence annotations, map fields to first_name, last_name, and email_id, and organize packages for entity, controller, repository, service, dto, and exception.
Create an employee repository by extending JpaRepository with Employee and long, gaining CRUD methods; SimpleJpaRepository implements it, is annotated with @Repository and @Transactional, so methods are transactional by default.
Create an EmployeeDto with id, firstName, lastName, and email, annotate it with Lombok for getters, setters, and constructors, and build an EmployeeMapper to map between entity and dto for REST.
Build an add employee rest api using a layered spring boot architecture, wiring service, controller and repository, mapping dto to entity, and testing with postman against a MySQL database.
Build a get employee rest API using Spring Boot, defining the getEmployeeById service method, implementing it in EmployeeServiceImpl, creating ResourceNotFoundException, and mapping to EmployeeDto for testing with Postman.
Build a get all employees API with Spring Boot by implementing the service and controller layers, converting Employee entities to EmployeeDto via EmployeeMapper, and exposing an @GetMapping endpoint at /api/employees.
Implement update employee rest api by updating the service and controller layers, handle not found errors, map the put request with path variable and request body, and test with postman.
Develop a delete employee rest api by updating the service and controller layers, validate existence with resource not found exception, delete by id, and expose delete endpoint tested with postman.
Build the front-end react application to consume the rest APIs built in requirement one for the employee management module, enabling users to add, list, update, and delete employees.
Create and set up a React app for an employee management system using Vite; install NodeJS and NPM, initialize ems-frontend, install dependencies, run the dev server, and configure port 3000.
Understand the React app project structure, including package.json, vite.config.js, index.html, and src. See how main.jsx uses ReactDOM.createRoot to render App into the root div.
Install bootstrap via npm in a React app, import bootstrap.min.css in the entry file, and test by centering a hello world heading with the text-center bootstrap class.
Create a React ListEmployeeComponent to render a dummy employee list in an HTML table, using map over dummyData and bootstrap styling, then integrate it into App for testing.
Connect a React app with the Get All Employees REST API using Axios, display the response in a list with useState and useEffect, and enable cross-origin access.
Add a header and a footer to the React app by creating HeaderComponent and FooterComponent and importing them into the App component, styled with Bootstrap and a custom CSS.
Configure routing in a react app by installing react-router-dom, wrapping components in BrowserRouter, and defining routes for ListEmployeeComponent at / and /employees. Test the routes locally at http://localhost:3000 and http://localhost:3000/employees.
Create a functional EmployeeComponent, add an add employee button in ListEmployeeComponent, configure the /add-employee route with React Router, and test navigation from the list to the add employee page.
Design an add employee form in a React component using useState, bootstrap, and a card layout. Handle input with onChange and saveEmployee, logging the firstName, lastName, and email to console.
Connect a React app to the add employee REST API using Axios in a service and component, navigate to the employees list after submission, and verify data in MySQL.
Implement client-side validation for the add employee form using react useState for errors, a validateForm function, and bootstrap feedback to require first name, last name, and email before submission.
Implement update functionality in a React app by adding an update button, dynamic page title, and a route using the shared EmployeeComponent for both add and update operations.
Connect a React app to the employee REST API using Axios, and use useEffect to fetch data and populate the update employee form with first name, last name, and email.
Connect the React app to the update employee REST API by using Axios put in EmployeeService and updating saveOrUpdateEmployee to handle both add and update operations.
Implement delete employee functionality in a React app by adding a delete button in the employees list, wiring Axios to call the delete API, and refreshing the list after removal.
Build crude rest APIs for the department management module, including add, get, get all, update, and delete operations, then prepare a React frontend for these CRUD actions.
Create a department entity with Lombok-generated getters, setters, and constructors, map it to the departments table with JPA, and extend JpaRepository<Department, Long> for CRUD operations.
Create a department DTO with id, name, and description using Lombok to reduce boilerplate, and implement a mapper to convert between department entity and department DTO with mapToDepartmentDto and mapToDepartment.
Build create department rest API by implementing a department service (interface and impl), mapping DTO to entity, saving via repository, and exposing a POST endpoint /api/departments returning 201.
Build a get department by id api with service and controller, validate with repository find by id, handle not found, map to dto, and test with postman on port 800.
Build a get all departments rest api by retrieving all department entities, mapping them to department DTOs, and exposing the endpoint with a spring get mapping.
Build the update department api in spring boot by validating the department and updating fields from a department dto, exposing a put endpoint with id path variable and request body.
Build a delete department rest api by validating department existence, deleting by id, and exposing the operation via a spring delete mapping tested with postman.
Build the department management UI in a React frontend for the full-stack Java developer course, enabling full CRUD operations, add, list, update, delete departments, and assign employees by consuming APIs.
Add navigation links in the header for employees and departments, configure routes, and create the list department component, enabling route-based navigation and testing via react-router-dom and bootstrap navbar.
Design a list department component that displays departments with dummy data in a Bootstrap-styled HTML table using React useState, then test in the browser.
Connect a React app to the get all departments rest api using Axios, and display the api response in the departments list.
Create a React department component, add an add department button in the list, configure a React Router route, and test navigation to the department page.
Design a department form in React using useState for name and description, with bootstrap styling and onChange handlers; prepare to connect to the add department API.
Connect a React app to the add department REST API using Axios, posting the department form data and navigating to the departments page after submission.
Add an update button to the departments list, configure a route, and update the page title using React Router params and navigate to support add and update in one component.
Connect your React app to the get department api, use axios and useEffect to populate the update department form with department name and description, then test changes.
Connect a React application to the update department Rest API using Axios put, and update the department form to support both add and update operations, then verify changes in MySQL.
Implement a delete department feature in a React app using Axios, add a delete button in the departments table, handle its click event, and verify updates.
Establishes a many-to-one relationship between employee and department in spring boot using @manytoone and @joincolumn with lazy fetch, and updates service and mapper to assign departments.
Update the add and update employee features to include department selection in a React app, fetch departments, render a select box, validate it, and send department ID in requests.
In this hands-on project-oriented course, you will dive into the world of full-stack web app development using the powerful combination of Spring Boot 4 and React JS.
In this course, you will build two full-stack web applications (Employee Management System and Todo Management App) using Spring Boot 4, Spring Security 7, Spring Data JPA, JWT, React JS, and MySQL database.
In this course, we will use the latest version of Spring Boot (4+), Spring Security (7+), React JS (18+), and MySQL database (8+). We will use modern and popular tools to build full-stack web applications such as IntelliJ IDEA, VS Code, Maven, Postman, NPM, etc.
What is React JS?
React JS is a JavaScript library used to build user interfaces (UI) on the front end.
React is not a framework (unlike Angular, which is more opinionated).
React is an open-source project created by Facebook.
What is Spring Boot?
Spring boot to develop REST web services and microservices.
Spring Boot has taken the Spring framework to the next level. It has drastically reduced the configuration and setup time required for spring projects.
You can set up a project with almost zero configuration and start building the things that actually matter to your application.
Course Topics:
1. React JS Fundamentals
2. Spring Boot Fundamentals
3. Project 1: Employee Management System
Build Employee Management Module - Backend Implementation using Spring Boot
Build Employee Management Module - Frontend Implementation using React JS
Build Department Management Module - Backend Implementation using Spring Boot
Build Department Management Module - Frontend Implementation using React JS
Style Web Pages using the Bootstrap CSS framework
4. Project 2: Todo Management App
Todo Management Module - Backend Implementation using Spring Boot
Todo Management Module - Frontend Implementation using React JS
Secure REST APIs using Spring Security
Build Register and Login REST APIs
Implement Register and Login Features in the React App
Secure REST APIs using JWT (JSON Web Token)
Using JWT (JSON Web Token) in React App
Style Web Pages using the Bootstrap CSS framework
Tools and technologies used in this course:
Server-side:
Java 25
Spring Boot 4+
Spring Data JPA (Hibernate)
Spring Security
JWT
Maven
IntelliJ IDEA
MySQL database
Postman
Client-side:
React JS 18+
React Hooks
React Router
Axios
Bootstrap CSS framework
Visual Studio Code IDE
VS Code extensions
Node JS
NPM