Implement Hobby List Feature in React Frontend and Spring Backend

react-frontend/src/components/HobbyList.js

@@ -0,0 +1,37 @@
+javascript
+import React, { useEffect, useState } from 'react';
+import { fetchHobbies } from '../api/hobbyApi'; // Assuming there's a fetch function
+
+const HobbyList = () => {
+  const [hobbies, setHobbies] = useState([]);
+  const [isLoading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const loadHobbies = async () => {
+      try {
+        const data = await fetchHobbies();
+        setHobbies(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadHobbies();
+  }, []);
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <ul>
+      {hobbies.map((hobby) => (
+        <li key={hobby.id}>{hobby.name}</li>
+      ))}
+    </ul>
+  );
+};
+
+export default HobbyList;

spring-backend/src/main/java/com/example/hobby/Hobby.java

@@ -0,0 +1,20 @@
+java
+package com.example.hobby;
+
+public class Hobby {
+    private int id;
+    private String name;
+
+    public Hobby(int id, String name) {
+        this.id = id;
+        this.name = name;
+    }
+
+    public int getId() {
+        return id;
+    }
+
+    public String getName() {
+        return name;
+    }
+}

spring-backend/src/main/java/com/example/hobby/HobbyController.java

@@ -0,0 +1,19 @@
+java
+package com.example.hobby;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RestController;
+import java.util.List;
+
+@RestController
+public class HobbyController {
+
+    @Autowired
+    private HobbyService hobbyService;
+
+    @GetMapping("/api/hobbies")
+    public List<Hobby> getAllHobbies() {
+        return hobbyService.getAllHobbies();
+    }
+}

spring-backend/src/main/java/com/example/hobby/HobbyService.java

@@ -0,0 +1,19 @@
+java
+package com.example.hobby;
+
+import org.springframework.stereotype.Service;
+import java.util.List;
+
+@Service
+public class HobbyService {
+
+    // Assuming a repository or direct data source is available
+    public List<Hobby> getAllHobbies() {
+        // Retrieve data from data source, e.g., database or static list
+        return List.of(
+            new Hobby(1, "Painting"),
+            new Hobby(2, "Drawing"),
+            new Hobby(3, "Sculpting")
+        );
+    }
+}