[New] Java Full Stack: React and Spring Boot 3 [Expense App]

Focused View

Bushan Sirgur

14:50:16

0 View

1. Introduction

1. Project Walkthrough.mp4

07:57

2. Setup the Development Environment

1. Install Required Softwares [Part 01].mp4

04:16

2. Install Required Softwares [Part 02].mp4

02:37

3. Setup the Project for Frontend and Backend

1. Create Spring Boot Project.mp4

03:39

2. Understand the Spring Boot Project Structure.mp4

04:59

3. Create React Starter Project.mp4

04:02

4. Understand the React Project Structure.mp4

05:36

5. Create Github Repository.mp4

07:24

4. Feature 01 Create API to Fetch All Expenses (Backend)

1. Create a New Branch in Github.mp4

02:15

2. Development Steps Part 1.mp4

08:21

3. Development Steps Part 2.mp4

08:30

4. Development Steps Part 3.mp4

03:33

5. Development Steps Part 4.mp4

03:27

6. Create GET API endpoint.mp4

02:45

7. Add the Lombok Dependency.mp4

01:22

8. Create Request and Response Objects.mp4

03:01

9. Create DTO object.mp4

01:15

10. Add MySQL and JPA dependency.mp4

01:12

11. Configure the Datasource.mp4

03:27

12. Create JPA Entity.mp4

03:04

13. Create JPA Repository.mp4

01:00

14. Configure Model Mapper.mp4

01:44

15. Create Service and its Implementation.mp4

06:34

16. Update the Controller.mp4

04:39

17. Test the API endpoint.mp4

03:54

18. Add Javadocs.mp4

06:37

19. Add Loggers to the API.mp4

04:07

20. Commit and Push the Changes.mp4

04:04

21. Fixing the Cross Origin Error.mp4

05:28

22. Commit the Latest Changes.mp4

01:58

5. Feature 01 Read Expenses from Database (Frontend)

1. Create a New Branch.mp4

02:12

2. Development Steps.mp4

10:48

3. Create a New Dashboard Component.mp4

04:10

4. Display the Expenses in HTML Table.mp4

06:04

5. Create an Interface for Expense.mp4

02:38

6. Use Expense Interface to Define the Expenses Array.mp4

01:23

7. Create a Reusable Component ExpenseList.mp4

03:02

8. Pass Expenses List as a Prop.mp4

04:27

9. Configure Axios Library.mp4

03:27

10. Call the Backend API.mp4

06:12

11. Update React State.mp4

05:28

12. Show Loader and Error Messages.mp4

05:21

13. Create a Service.mp4

01:30

14. Create a Custom Hook.mp4

04:11

15. Commit and Push the Changes.mp4

02:51

6. Feature 02 Integrate Bootstrap Library (Frontend)

1. Development Steps.mp4

06:03

2. Install Bootstrap.mp4

05:00

3. Add the Basic Style.mp4

03:31

4. Redesign the ExpenseList Component.mp4

07:22

5. Display the Expenses in New Design.mp4

03:38

6. Create a Navbar Component.mp4

01:35

7. Apply Basic Style to Navbar Component.mp4

04:03

8. Apply Design for Mobile View.mp4

03:48

9. Install React Icons Library.mp4

03:02

10. Add the Application Logo.mp4

04:23

11. Commit and Push the Changes.mp4

02:19

7. Feature 03 Implement Routing in React (Frontend)

1. Create a New Branch.mp4

02:16

2. Development Steps.mp4

05:17

3. Install React Router Dom Library.mp4

03:37

4. Create Functional Components for Different Pages.mp4

03:55

5. Configure Route for Different Pages.mp4

02:33

6. Use NavLink to Navigate Different Pages.mp4

04:21

7. Fixing the Errors.mp4

02:25

8. Review and Commit the Changes.mp4

02:10

8. Feature 04 Displaying the Dashboard Status (Frontend)

1. Create a New Branch.mp4

02:33

2. Development Steps.mp4

06:54

3. Create New DashboardStatus Component.mp4

01:36

4. Create Basic Content for Dashboard Status.mp4

03:26

5. Create Date Util to Format Date.mp4

06:54

6. Create Currency Util to Format Currency.mp4

02:38

7. Using the Util Classes.mp4

01:37

8. Format the Date in ExpensesList Component.mp4

03:47

9. Calculate the Total Expenses Amount.mp4

04:16

10. Review and Commit the Changes.mp4

01:57

9. Feature 05 Create API to Fetch Single Expense (Backend)

1. Create New Branch.mp4

01:56

2. Development Steps.mp4

08:46

3. Create New API endpoint.mp4

02:56

4. Create JPA Finder Method.mp4

01:34

5. Create Service Method.mp4

02:32

6. Call the Service Method.mp4

01:02

7. Test the API endpoint.mp4

01:58

8. Handle the Exception.mp4

02:15

9. Create an Error Object.mp4

01:29

10. Create a Custom Exception.mp4

04:58

11. Test the API Endpoint.mp4

01:52

12. Add Java Docs and Logs.mp4

08:30

13. Review and Push the Changes.mp4

02:29

10. Feature 05 Show the Expense Details (Frontend)

1. Create New Branch.mp4

02:24

2. Development Steps.mp4

04:46

3. Make the Expenses Clickable.mp4

05:25

4. Create Basic HTML Table.mp4

05:06

5. Create Action Buttons.mp4

02:16

6. Create Service Method.mp4

01:29

7. Call Service Method.mp4

03:18

8. Create States and Update.mp4

04:16

9. Update the HTML Table.mp4

02:36

10. Handle the Error.mp4

04:41

11. Create Custom Hook.mp4

02:58

12. Test the Edge Case Scenarios.mp4

03:33

13. Review and Commit the Changes.mp4

01:40

11. Feature 06 Create API to Delete the Expense (Backend)

1. Create New Branch.mp4

01:40

2. Development Steps.mp4

03:21

3. Create API endpoint.mp4

02:37

4. Create Service Method.mp4

03:30

5. Call the Service Method.mp4

02:07

6. Refactor the Code.mp4

04:31

7. Review and Push the Changes.mp4

01:34

12. Feature 06 Allow End User to Delete Expense (Frontend)

1. Create New Branch.mp4

02:05

2. Development Steps.mp4

04:06

3. Create Reusable Component for Confirm Dialog.mp4

05:34

4. Test the Confirm Dialog.mp4

03:48

5. Add the Click Events.mp4

04:24

6. Create Service Method.mp4

01:15

7. Call the Service Method.mp4

03:38

8. Add the Navigation.mp4

02:21

9. Test the Failure Scenarios.mp4

03:08

10. Review and Push the Changes.mp4

01:29

13. Feature 07 Create API to Save the Expense Details (Backend)

1. Create New Branch.mp4

01:31

2. Development Steps.mp4

06:17

3. Create New API endpoint.mp4

03:31

4. Add Hibernate Validator Dependency.mp4

03:02

5. Difference between @NotNull, @NotEmpty and @NotBlank Annotation.mp4

04:06

6. Add More Validations.mp4

04:12

7. Show Validation Messages in Response.mp4

05:21

8. Save the Expense Details into Database.mp4

04:23

9. Test the API.mp4

01:53

10. Add Java docs and Logs.mp4

04:06

11. Review and Push the Changes.mp4

01:31

14. Feature 07 Allow User to Save Expense Details (Frontend)

1. Create New Branch.mp4

01:55

2. Development Steps.mp4

07:45

3. Create Textbox for Expense Name.mp4

03:02

4. Create Complete Form.mp4

03:09

5. Add Validation Error Messages.mp4

01:27

6. Install Formik and Use it.mp4

07:25

7. Install Yup Library.mp4

05:16

8. Add Validations Using Yup.mp4

06:38

9. Create Reusable Dropdown.mp4

03:10

10. Read Categories from Constants.mp4

03:45

11. Test the Reusable Component.mp4

06:19

12. Create Service Method.mp4

01:08

13. Call the Service Method.mp4

02:37

14. Test the Development.mp4

03:23

15. Review and Commit the Changes.mp4

01:24

15. Feature 08 Create API to Update the Expense Details (Backend)

1. Create New Branch.mp4

01:27

2. Development Steps.mp4

03:14

3. Create New API endpoint.mp4

04:02

4. Create Service Method.mp4

03:22

5. Call Service Method.mp4

02:24

6. Test the Development.mp4

01:49

7. Review and Commit the Changes.mp4

01:36

16. Feature 08 Allow End User to Update the Expense Details (Frontend)

1. Create New Branch.mp4

01:49

2. Development Steps.mp4

03:56

3. Create New Route to Edit Expense.mp4

01:58

4. Get the Existing Expense.mp4

03:48

5. Display the Expense Values in Form.mp4

05:01

6. Update the Service Method.mp4

01:24

7. Test the Development.mp4

02:34

8. Review and Commit the Changes.mp4

01:35

9. Organise the APIs in Postman.mp4

05:13

17. Take Break and Have Fun

1. Organize APIs in Postman.mp4

05:13

18. Feature 09 Create API to Create New Account (Backend)

1. Create New Branch.mp4

01:37

2. Development Steps 01.mp4

02:33

3. Development Steps 02.mp4

01:51

4. Create New API Endpoint.mp4

01:45

5. Test the API.mp4

02:23

6. Create IO Object for Profile.mp4

02:29

7. Create IO Object for Profile Response.mp4

03:23

8. Add Hibernate Validators.mp4

01:26

9. Test the Validation.mp4

01:48

10. Create DTO Object.mp4

02:36

11. Create JPA Entity.mp4

03:57

12. Create JPA Repository.mp4

00:43

13. Create Profile Service.mp4

04:26

14. Call Service Method and Test API.mp4

02:04

15. Add Javadocs.mp4

05:23

16. Review and Commit the Changes.mp4

02:35

19. Feature 09 Implement Register Flow (Frontend)

1. Create New Branch.mp4

01:32

2. Development Steps.mp4

05:04

3. Render HTML Textbox.mp4

02:44

4. Complete the Register Form.mp4

03:18

5. Create Validation Schema.mp4

03:53

6. Create Interface For Profile.mp4

01:31

7. Use useFormik Hook.mp4

01:37

8. Read the Validation Messages from Schema.mp4

04:38

9. Create Service Method.mp4

01:15

10. Call Service Method and Test the Flow.mp4

06:06

11. Create New Custom Hook.mp4

03:53

12. Review and Commit the Changes.mp4

01:18

20. Feature 10 Create API to AuthenticateLogin User (Backend)

1. Create New Branch.mp4

02:09

2. Development Steps 01.mp4

07:06

3. Development Steps 02.mp4

02:59

4. Development Steps 03.mp4

06:40

5. Configure Cors Globally.mp4

03:07

6. Add Spring Security Dependency.mp4

01:35

7. Test the APIs.mp4

03:20

8. Configure Spring Security.mp4

03:42

9. Create Custom User Details Service.mp4

04:14

10. Configure Spring Beans.mp4

03:41

11. Encrypt the Password.mp4

01:59

12. Create Auth Request.mp4

01:04

13. Create Auth Response.mp4

00:46

14. Create Login API endpoint.mp4

03:19

15. Test the API.mp4

02:02

16. Add Necessary Dependencies.mp4

00:51

17. Create Util Method.mp4

04:36

18. Test the Login API.mp4

03:26

19. Create Custom Filter.mp4

03:04

20. Create Helper Methods.mp4

03:42

21. Create More Helper Methods.mp4

02:42

22. Set the Security Context Holder.mp4

03:03

23. Register Custom Filter.mp4

01:49

24. Test the Complete Login Flow.mp4

04:02

25. Review and Commit the Changes.mp4

02:06

26. Test the Edge Case Scenarios.mp4

02:51

27. Handle the Exceptions for Bad Credentials.mp4

02:25

28. Create New Custom Exception.mp4

02:36

29. Test the Exceptions.mp4

03:00

30. Review and Commit the Changes.mp4

01:58

21. Feature 10 Allow User to Login

1. Create New Branch.mp4

02:06

2. Development Steps [Part 1].mp4

03:42

3. Create Login Form.mp4

03:30

4. Add Validations.mp4

01:22

5. Create Interface.mp4

02:00

6. Create Service Method.mp4

00:43

7. Create Custom Login Hook.mp4

02:38

8. Store the Token in Local Storage.mp4

01:35

9. Test the Failure Scenarios.mp4

01:55

10. Development Steps [Part 2].mp4

01:31

11. Create Axios Interceptors.mp4

05:06

12. Development Steps [Part 3].mp4

03:26

13. Create React Context.mp4

03:23

14. Create Custom Context Provider.mp4

02:50

15. Pass Global State to Children.mp4

01:16

16. Get the User Object from Local Storage.mp4

01:17

17. Create Custom Hook for Auth Context.mp4

02:27

18. Development Steps [Part 4].mp4

01:48

19. Create Logout Button.mp4

04:36

20. Update the State.mp4

01:46

21. Protect the Routes.mp4

04:08

22. Review and Commit the Changes.mp4

03:37

22. Feature 11 Create Signout API (Backend)

1. Create New Branch.mp4

01:08

2. Development Steps.mp4

02:49

3. Create Service.mp4

02:11

4. Create Signout API.mp4

03:44

5. Test the Logout API.mp4

03:35

6. Review and Commit the Changes.mp4

01:15

23. Feature 11 Allow the User to Logout (Frontend)

1. Create New Branch.mp4

01:02

2. Development Steps.mp4

01:43

3. Create Service Method.mp4

00:47

4. Create Custom Hook for Signout.mp4

02:33

5. Test the Implmentation.mp4

02:28

6. Review and Commit the Changes.mp4

01:08

24. Take Break From Coding and Enjoy Sometime

1. Postman Advance Features - 01.mp4

06:41

2. Postman Advance Features - 02.mp4

07:08

25. Feature 12 Setup Mapping Bewteen User and Expense (Backend)

1. Create New Branch.mp4

01:17

2. Development Steps.mp4

04:55

3. Update JPA Entity.mp4

02:33

4. Create Service Method.mp4

02:56

5. Call the Service Method.mp4

02:57

6. Update the Read Expenses API.mp4

05:00

7. Update All the APIs.mp4

01:55

8. Test All the APIs.mp4

04:18

9. Review and Commit the Changes.mp4

02:35

10. Test From UI.mp4

02:11

26. Miscellaneous Updates

1. Create New Branch.mp4

01:33

2. Display the Logged In User Email Address.mp4

03:34

3. Add Reset Button To All the Forms.mp4

02:37

4. Add New Validation Rule For Expense Date.mp4

01:29

5. Add Background Image to Login and Register Page.mp4

02:10

6. Make Expense Amount Type as String.mp4

04:01

7. Review and Commit the Changes.mp4

01:38

Description

Build a Powerful Expense Management App with Spring Boot, Spring Security, JPA, MySQL, React (Typescript) and Bootstrap

What You'll Learn?

API Development: Learn how to create RESTful APIs using Spring Boot
React Essentials: Components, Props, States, Hooks etc
Securing the REST APIs with the help of Spring Security
Learn how to authenticate the API request with JWT token
Learn How to connect Spring Boot Application to MySQL database.
Learn How to deploy Spring Boot Application to Production Server
Learn How to Consume the REST APIs in React
Learn How to Create Custom Hooks in React
Learn How to Create Form with Formik in React
Learn How to Validate the Form with Yup in React
Learn How to Create React Context and Share the State globally

Who is this for?

Aspiring Developers: Those looking to start a career in web development.

Experienced Programmers: Developers seeking to enhance their full-stack development skills.

Tech Enthusiasts: Anyone interested in learning how to build real-world applications using modern technologies.

What You Need to Know?

Basic Programming Knowledge: Familiarity with JavaScript and Java is recommended.

Development Environment: Access to a computer with internet connectivity.

More details

Description
Welcome to "Java Full Stack: React and Spring Boot 3 [Expense App]"! This comprehensive course is designed to take you from a beginner to an advanced level in full-stack development using Spring Boot and React. Whether you are an aspiring developer or an experienced programmer looking to enhance your skills, this course will provide you with the knowledge and hands-on experience needed to build robust and scalable web applications.

What You Will Learn:
Spring Boot Fundamentals: Understand the core concepts of Spring Boot, including dependency injection, Spring Boot starters, and Spring Boot Actuator.
React Essentials: Master the basics of React, including components, state, props, and the component lifecycle.
API Development: Learn how to create RESTful APIs using Spring Boot and connect them to your React frontend.
Database Integration: Implement CRUD operations with a MySQL database and use JPA/Hibernate for database interactions.
Real-Time Data Handling: Integrate WebSockets to handle real-time data updates in your application.
Authentication & Security: Implement secure authentication and authorization using Spring Security and JWT.
Expense Manager Project: Apply your knowledge to build a fully functional Expense Manager application, handling real-time expense tracking and reporting.
Course Highlights:
Hands-On Learning: Engage in practical exercises and projects that reinforce theoretical concepts.
Step-by-Step Guidance: Follow along with detailed, easy-to-understand instructions and explanations.
Source Code Access: Get full access to the source code for all projects and exercises.
Industry Best Practices: Learn to apply industry best practices for coding, testing, and deployment.
Community Support: Join a community of like-minded learners to collaborate and share knowledge.
Who Should Enroll:
Aspiring Developers: Those looking to start a career in web development.
Experienced Programmers: Developers seeking to enhance their full-stack development skills.
Tech Enthusiasts: Anyone interested in learning how to build real-world applications using modern technologies.
Prerequisites:
Basic Programming Knowledge: Familiarity with JavaScript and Java is recommended.
Development Environment: Access to a computer with internet connectivity.
Join Us:
Take the next step in your development career by enrolling in "Java Full Stack: React and Spring Boot 3 [Expense App]". Equip yourself with the skills needed to build sophisticated web applications and stand out in the competitive tech landscape. Enroll now and start your journey towards becoming a full-stack developer!
Who this course is for:
Aspiring Developers: Those looking to start a career in web development.
Experienced Programmers: Developers seeking to enhance their full-stack development skills.
Tech Enthusiasts: Anyone interested in learning how to build real-world applications using modern technologies.

User Reviews

Rating

average 0

Total votes0

Focused display

Hello visitors,I am Bushan Sirgur from India, I have completed my Masters in Computer Science. Currently I am working as a Software Engineer in CenturyLink Pvt. Ltd. I have been working in Java Development since from the beginning. I have started my Career as a Intern in a startup, worked on Insurance domain and gain the knowledge on various technologies like Spring MVC, Hibernate, Struts and iBatis. I have written few posts on JavaFX, Spring MVC, Angular and Hibernate. I also own a YouTube channel B2 Tech, over 1000+ subscribers. I also made a video series on JavaFX. I would like to share my knowledge as much as possible with each and everyone out there through videos and blogs.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.