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

سرفصل های دوره

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

1. Introduction

1. Project Walkthrough

2. Setup the Development Environment

1. Install Required Softwares [Part 01]

2. Install Required Softwares [Part 02]

3. Setup the Project for Frontend and Backend

1. Create Spring Boot Project

2. Understand the Spring Boot Project Structure

3. Create React Starter Project

4. Understand the React Project Structure

5. Create Github Repository

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

1. Create a New Branch in Github

2. Development Steps Part 1

3. Development Steps Part 2

4. Development Steps Part 3

5. Development Steps Part 4

6. Create GET API endpoint

7. Add the Lombok Dependency

8. Create Request and Response Objects

9. Create DTO object

10. Add MySQL and JPA dependency

11. Configure the Datasource

12. Create JPA Entity

13. Create JPA Repository

14. Configure Model Mapper

15. Create Service and its Implementation

16. Update the Controller

17. Test the API endpoint

18. Add Javadocs

19. Add Loggers to the API

20. Commit and Push the Changes

21. Fixing the Cross Origin Error

22. Commit the Latest Changes

5. Feature 01 Read Expenses from Database (Frontend)

1. Create a New Branch

2. Development Steps

3. Create a New Dashboard Component

4. Display the Expenses in HTML Table

5. Create an Interface for Expense

6. Use Expense Interface to Define the Expenses Array

7. Create a Reusable Component ExpenseList

8. Pass Expenses List as a Prop

9. Configure Axios Library

10. Call the Backend API

11. Update React State

12. Show Loader and Error Messages

13. Create a Service

14. Create a Custom Hook

15. Commit and Push the Changes

6. Feature 02 Integrate Bootstrap Library (Frontend)

1. Development Steps

2. Install Bootstrap

3. Add the Basic Style

4. Redesign the ExpenseList Component

5. Display the Expenses in New Design

6. Create a Navbar Component

7. Apply Basic Style to Navbar Component

8. Apply Design for Mobile View

9. Install React Icons Library

10. Add the Application Logo

11. Commit and Push the Changes

7. Feature 03 Implement Routing in React (Frontend)

1. Create a New Branch

2. Development Steps

3. Install React Router Dom Library

4. Create Functional Components for Different Pages

5. Configure Route for Different Pages

6. Use NavLink to Navigate Different Pages

7. Fixing the Errors

8. Review and Commit the Changes

8. Feature 04 Displaying the Dashboard Status (Frontend)

1. Create a New Branch

2. Development Steps

3. Create New DashboardStatus Component

4. Create Basic Content for Dashboard Status

5. Create Date Util to Format Date

6. Create Currency Util to Format Currency

7. Using the Util Classes

8. Format the Date in ExpensesList Component

9. Calculate the Total Expenses Amount

10. Review and Commit the Changes

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

1. Create New Branch

2. Development Steps

3. Create New API endpoint

4. Create JPA Finder Method

5. Create Service Method

6. Call the Service Method

7. Test the API endpoint

8. Handle the Exception

9. Create an Error Object

10. Create a Custom Exception

11. Test the API Endpoint

12. Add Java Docs and Logs

13. Review and Push the Changes

10. Feature 05 Show the Expense Details (Frontend)

1. Create New Branch

2. Development Steps

3. Make the Expenses Clickable

4. Create Basic HTML Table

5. Create Action Buttons

6. Create Service Method

7. Call Service Method

8. Create States and Update

9. Update the HTML Table

10. Handle the Error

11. Create Custom Hook

12. Test the Edge Case Scenarios

13. Review and Commit the Changes

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

1. Create New Branch

2. Development Steps

3. Create API endpoint

4. Create Service Method

5. Call the Service Method

6. Refactor the Code

7. Review and Push the Changes

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

1. Create New Branch

2. Development Steps

3. Create Reusable Component for Confirm Dialog

4. Test the Confirm Dialog

5. Add the Click Events

6. Create Service Method

7. Call the Service Method

8. Add the Navigation

9. Test the Failure Scenarios

10. Review and Push the Changes

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

1. Create New Branch

2. Development Steps

3. Create New API endpoint

4. Add Hibernate Validator Dependency

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

6. Add More Validations

7. Show Validation Messages in Response

8. Save the Expense Details into Database

9. Test the API

10. Add Java docs and Logs

11. Review and Push the Changes

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

1. Create New Branch

2. Development Steps

3. Create Textbox for Expense Name

4. Create Complete Form

5. Add Validation Error Messages

6. Install Formik and Use it

7. Install Yup Library

8. Add Validations Using Yup

9. Create Reusable Dropdown

10. Read Categories from Constants

11. Test the Reusable Component

12. Create Service Method

13. Call the Service Method

14. Test the Development

15. Review and Commit the Changes

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

1. Create New Branch

2. Development Steps

3. Create New API endpoint

4. Create Service Method

5. Call Service Method

6. Test the Development

7. Review and Commit the Changes

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

1. Create New Branch

2. Development Steps

3. Create New Route to Edit Expense

4. Get the Existing Expense

5. Display the Expense Values in Form

6. Update the Service Method

7. Test the Development

8. Review and Commit the Changes

9. Organise the APIs in Postman

17. Take Break and Have Fun

1. Organize APIs in Postman

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

1. Create New Branch

2. Development Steps 01

3. Development Steps 02

4. Create New API Endpoint

5. Test the API

6. Create IO Object for Profile

7. Create IO Object for Profile Response

8. Add Hibernate Validators

9. Test the Validation

10. Create DTO Object

11. Create JPA Entity

12. Create JPA Repository

13. Create Profile Service

14. Call Service Method and Test API

15. Add Javadocs

16. Review and Commit the Changes

19. Feature 09 Implement Register Flow (Frontend)

1. Create New Branch

2. Development Steps

3. Render HTML Textbox

4. Complete the Register Form

5. Create Validation Schema

6. Create Interface For Profile

7. Use useFormik Hook

8. Read the Validation Messages from Schema

9. Create Service Method

10. Call Service Method and Test the Flow

11. Create New Custom Hook

12. Review and Commit the Changes

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

1. Create New Branch

2. Development Steps 01

3. Development Steps 02

4. Development Steps 03

5. Configure Cors Globally

6. Add Spring Security Dependency

7. Test the APIs

8. Configure Spring Security

9. Create Custom User Details Service

10. Configure Spring Beans

11. Encrypt the Password

12. Create Auth Request

13. Create Auth Response

14. Create Login API endpoint

15. Test the API

16. Add Necessary Dependencies

17. Create Util Method

18. Test the Login API

19. Create Custom Filter

20. Create Helper Methods

21. Create More Helper Methods

22. Set the Security Context Holder

23. Register Custom Filter

24. Test the Complete Login Flow

25. Review and Commit the Changes

26. Test the Edge Case Scenarios

27. Handle the Exceptions for Bad Credentials

28. Create New Custom Exception

29. Test the Exceptions

30. Review and Commit the Changes

21. Feature 10 Allow User to Login

1. Create New Branch

2. Development Steps [Part 1]

3. Create Login Form

4. Add Validations

5. Create Interface

6. Create Service Method

7. Create Custom Login Hook

8. Store the Token in Local Storage

9. Test the Failure Scenarios

10. Development Steps [Part 2]

11. Create Axios Interceptors

12. Development Steps [Part 3]

13. Create React Context

14. Create Custom Context Provider

15. Pass Global State to Children

16. Get the User Object from Local Storage

17. Create Custom Hook for Auth Context

18. Development Steps [Part 4]

19. Create Logout Button

20. Update the State

21. Protect the Routes

22. Review and Commit the Changes

22. Feature 11 Create Signout API (Backend)

1. Create New Branch

2. Development Steps

3. Create Service

4. Create Signout API

5. Test the Logout API

6. Review and Commit the Changes

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

1. Create New Branch

2. Development Steps

3. Create Service Method

4. Create Custom Hook for Signout

5. Test the Implmentation

6. Review and Commit the Changes

24. Take Break From Coding and Enjoy Sometime

1. Postman Advance Features - 01

2. Postman Advance Features - 02

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

1. Create New Branch

2. Development Steps

3. Update JPA Entity

4. Create Service Method

5. Call the Service Method

6. Update the Read Expenses API

7. Update All the APIs

8. Test All the APIs

9. Review and Commit the Changes

10. Test From UI

26. Miscellaneous Updates

1. Create New Branch

2. Display the Logged In User Email Address

3. Add Reset Button To All the Forms

4. Add New Validation Rule For Expense Date

5. Add Background Image to Login and Register Page

6. Make Expense Amount Type as String

7. Review and Commit the Changes

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy