Connect Spring Boot Backend with Angular Frontend and Implement Add MysteryObject Functionality

[mustafa-bektas]

Create a connection between the existing Spring Boot backend and the Angular frontend to allow users to add new MysteryObject entries to the database. This includes implementing REST APIs in Spring Boot for CRUD operations and building an Angular form to submit data to the backend.

---

Task Breakdown:

1. Spring Boot Backend (API Layer):

• Create a MysteryObjectRepository:

  • Use Spring Data JPA to define a repository interface for performing database operations on the MysteryObject entity.

• Enable Cross-Origin Resource Sharing (CORS):

  • Use the @CrossOrigin annotation on the repository to allow the Angular frontend to access the Spring Boot backend.

2. Angular Frontend (Form and Service Layer):

• Create a MysteryObjectService:

  • Implement an Angular service that uses HttpClient to communicate with the Spring Boot API.
  • Include methods for:
  • createMysteryObject: Sends a POST request to create a new MysteryObject.
  • getAllMysteryObjects: Retrieves all MysteryObjects (optional for later listing).

• Create a Model for MysteryObject:

  • Define the MysteryObject TypeScript interface to match the entity structure in the backend (including fields like description, color, shape, condition, etc.).

• Create a MysteryObjectFormComponent:

  • Build a form in Angular using two-way data binding (ngModel) to capture data for a new MysteryObject.
  • Fields to include:
  • Text inputs for fields like description, color, shape, etc.
  • A dropdown/select for the condition enum (NEW, LIKE_NEW, USED, DAMAGED, ANTIQUE).
  • Add a "Submit" button to trigger the creation of the MysteryObject.