no message

productApp/.env

+PUBLIC_URL=/product-ui
\ No newline at end of file

productApp/Dockerfile

+# Stage 1: Build React app
+FROM node:16-alpine AS build
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve React app with Nginx
+FROM nginx:stable-alpine
+
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy custom nginx config (optional, see below)
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
+

productApp/README.md

+
+# PRODUCT-MANAGEMENT-SYSTEM
+
+## Objective:
+By the end of this session, students will be able to create class and functional components, style components using CSS, and perform CRUD operations in React using MockAPI. The project will be named "product-management-app" and will include pages to register categories and products.
+
+## Agenda:
+### 1. Introduction (10 minutes)
+- Overview of React components: class components vs functional components.
+- Introduction to React's component lifecycle methods.
+- Brief introduction to CSS in React.
+- Introduction to MockAPI for CRUD operations.
+
+### 2. Setting Up the Project (5 minutes)
+- Create a new React project using Create React App.
+- Start the React development server.
+- Brief overview of the project's folder structure.
+
+```bash
+npx create-react-app product-management-app
+cd product-management-app
+npm start
+```
+
+
+
+### 3. Editing App.js (3 minutes)
+- Modify \`App.js\` to include set title project / Hello World! to test this app.js page
+
+```bash
+import React from 'react';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import CategoryFormClass from './components/Category/CategoryFormClass';
+import ProductFormClass from './components/Product/ProductFormClass';
+
+function App() {
+  return (
+    <Router>
+      <div className="App">
+        <h1>Product Management System</h1>
+      </div>
+    </Router>
+  );
+}
+
+export default App;
+```
+### 4. Setting Up the Project Folder Structure / File System (10 minutes) 
+- Create folder and file according to below file structure page
+- Brief overview of the project's folder structure.
+
+```bash
+product-management-app/
+├── public/
+│   ├── index.html
+│   └── ...
+├── src/
+│   ├── components/
+│   │   ├── Category/
+│   │   │   ├── CategoryFormClass.js
+│   │   │   ├── CategoryListClass.js
+│   │   │   ├── CategoryFormFunction.js
+│   │   │   ├── CategoryListFunction.js
+│   │   │   ├── Category.css
+│   │   ├── Product/
+│   │   │   ├── ProductListClass.js
+│   │   │   ├── ProductFormClass.js
+│   │   │   ├── ProductListFunction.js
+│   │   │   ├── ProductFormFunction.js
+│   │   │   ├── Product.css
+│   ├── services/
+│   │   ├── ApiCategory.js
+│   │   ├── ApiProduct.js
+│   ├── App.js
+│   ├── index.js
+│   └── ...
+├── package.json
+└── ...
+```
+
+### 5. Creating Class Components (30 minutes)
+- Deep dive into creating class components.
+- Create `CategoryFormClass.js` and `CategoryListClass.js` as class components.
+- Discuss state management, event handling, and lifecycle methods.
+  
+CategoryFormClass.js 
+
+
+
+##### I: Importing Dependencies
+
+Start by importing React and any necessary services:
+
+```
+import React, { Component } from 'react';
+```
+
+#### II: Defining the Class Component
+
+```
+class CategoryFormClass extends Component {
+    state = {
+        name: '',
+        description: ''
+    };
+    render() {
+        return (
+            "test"
+      );
+    }
+}     
+```
+
+#### III: Exporting the Component
+
+```
+export default CategoryFormClass;
+
+```
+
+#### IV: Handling Input Changes & Submit Function
+```
+handleChange = (event) => {
+  this.setState({ [event.target.name]: event.target.value });
+};
+
+handleSubmit = (event) => {
+    event.preventDefault();
+    const { name, description } = this.state;
+    console.log(this.state);
+    alert(`Category Name: ${name}\nCategory Description: ${description}`);
+
+    this.setState({ name: "", description: "" });
+
+    // Call the addCategory method passed down from CategoryListClass
+    // this.props.addCategory({ name, description }); 
+    // API integration will be handled in the next chapter
+    // await createCategory({ name, description });
+    // this.props.fetchCategories();
+};
+
+```
+```
+//   handleSubmit = (event) => {
+//     event.preventDefault();
+//     const { name, description } = this.state;
+//     console.log(this.state);
+//     alert(`Category Name: ${name}\nCategory Description: ${description}`);
+
+//     this.setState({ name: "", description: "" });
+
+//     // Call the addCategory method passed down from CategoryListClass
+//     this.props.addCategory({ name, description }); 
+
+//     // Call the createCategory function, which uses axios to create a new category
+//     createCategory({ name, description })
+//         .then(response => {
+//             console.log("Category created successfully:", response.data);
+//             // Optionally, you could call fetchCategories here if you want to refresh the category list
+//             // this.props.fetchCategories();
+//         })
+//         .catch(error => {
+//             console.error("There was an error creating the category:", error);
+//         });
+//     };
+```
+#### V: Rendering the Form
+```
+render() {
+  const { name, description } = this.state;
+
+  return (
+    <form onSubmit={this.handleSubmit}>
+      <input
+        type="text"
+        name="name"
+        value={name}
+        onChange={this.handleChange}
+        placeholder="Category Name"
+      />
+      <input
+        type="text"
+        name="description"
+        value={description}
+        onChange={this.handleChange}
+        placeholder="Category Description"
+      />
+      <button type="submit">Add Category</button>
+    </form>
+  );
+}
+
+```
+
+
+<details>
+  <summary>full code</summary>
+
+  ```jsx
+  import React, { Component } from 'react';
+  import { createCategory } from '../../services/ApiCategory';
+
+  class CategoryFormClass extends Component {
+    state = {
+      name: '',
+      description: ''
+    };
+
+    handleChange = (event) => {
+      this.setState({ [event.target.name]: event.target.value });
+    };
+
+    handleSubmit = async (event) => {
+      event.preventDefault();
+      const { name, description } = this.state;
+      await createCategory({ name, description });
+      this.setState({ name: '', description: '' });
+      this.props.fetchCategories();
+    };
+
+    render() {
+      const { name, description } = this.state;
+
+      return (
+        <form onSubmit={this.handleSubmit}>
+          <input
+            type="text"
+            name="name"
+            value={name}
+            onChange={this.handleChange}
+            placeholder="Category Name"
+          />
+          <input
+            type="text"
+            name="description"
+            value={description}
+            onChange={this.handleChange}
+            placeholder="Category Description"
+          />
+          <button type="submit">Add Category</button>
+        </form>
+      );
+    }
+  }
+
+  export default CategoryFormClass;
+```
+</details>
+
+
+CategoryListClass.js
+
+
+#### I: Importing Dependencies
+
+Start by importing React and any necessary services:
+
+```
+import React, { Component } from 'react';
+import './Category.css';
+import CategoryFormClass from './CategoryFormClass';
+// import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+```
+
+#### II: Defining the Class Component and Initial State
+
+
+```
+class CategoryListClass extends Component {
+  state = {
+    categories: [
+      // Hardcoded categories for initial testing
+      { id: 1, name: "Electronics", description: "Devices and gadgets" },
+      { id: 2, name: "Books", description: "Various books and literature" },
+    ],
+    isEditing: false,
+    currentCategory: { id: "", name: "", description: "" },
+  };
+
+  render() {
+    return "test";
+  }
+}
+```
+
+#### III: Lifecycle Method and Fetch Categories
+
+
+```
+componentDidMount() {
+  // this.fetchCategories();
+}
+
+fetchCategories = async () => {
+  // const categories = await getCategories();
+  // this.setState({ categories });
+};
+
+
+```
+
+#### IV: Handling Delete, Edit, and Cancel Edit
+```
+handleDelete = (id) => {
+  const filteredCategories = this.state.categories.filter(category => category.id !== id);
+  this.setState({ categories: filteredCategories });
+  console.log(id);
+  alert(`Deleted Id: ${id}`);
+  // await deleteCategory(id);
+  // this.fetchCategories();
+};
+
+handleEdit = (category) => {
+  this.setState({ isEditing: true, currentCategory: category });
+};
+
+handleCancelEdit = () => {
+  this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+};
+
+```
+#### V: Handling Input Changes and Update and Add using props
+```
+handleChange = (event) => {
+  const { name, value } = event.target;
+  this.setState((prevState) => ({
+    currentCategory: { ...prevState.currentCategory, [name]: value }
+  }));
+};
+
+handleUpdate = (event) => {
+    event.preventDefault();
+
+    const { categories, currentCategory } = this.state;
+
+    const updatedCategories = categories.map((category) =>
+      category.id === currentCategory.id ? { ...currentCategory } : category
+    );
+
+    this.setState({
+      categories: updatedCategories,
+      isEditing: false,
+      currentCategory: { id: "", name: "", description: "" },
+    });
+
+    alert(`Category Name: ${currentCategory.name}\nCategory Description: ${currentCategory.description}`);
+    console.log(this.state);
+    
+    // await updateCategory(currentCategory.id, { name: currentCategory.name, description: currentCategory.description });
+    // this.fetchCategories();
+};
+
+addCategory = (newCategory) => {
+    this.setState((prevState) => ({
+      categories: [...prevState.categories, { id: prevState.categories.length + 1, ...newCategory }],
+    }));
+};
+```
+
+#### VI: Rendering the Component
+
+```
+render() {
+  const { categories, isEditing, currentCategory } = this.state;
+  return (
+    <div>
+      <h2>Categories</h2>
+      {isEditing ? (
+        <form onSubmit={this.handleUpdate}>
+          <input
+            type="text"
+            name="name"
+            value={currentCategory.name}
+            onChange={this.handleChange}
+            placeholder="Category Name"
+          />
+          <input
+            type="text"
+            name="description"
+            value={currentCategory.description}
+            onChange={this.handleChange}
+            placeholder="Category Description"
+          />
+          <button type="submit" className="button button-update">Update</button>
+          <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
+        </form>
+      ) : (
+         <CategoryFormClass addCategory={this.addCategory} />
+        // <CategoryFormClass fetchCategories={this.fetchCategories} />
+      )}
+     <div style={{ display: "inline-block", textAlign: "left", marginTop: "20px"}}>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {categories.map(category => (
+              <tr key={category.id}>
+                <td>{category.id}</td>
+                <td>{category.name}</td>
+                <td>{category.description}</td>
+                <td>
+                  <button className="button button-update" onClick={() => this.handleEdit(category)}>Edit</button>
+                  <button className="button button-delete" onClick={() => this.handleDelete(category.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+```
+
+
+#### VI: Exporting the Component
+
+```
+export default CategoryListClass;
+
+```
+
+
+<details>
+  <summary>full code</summary>
+
+  ```jsx
+  import React, { Component } from 'react';
+// import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+import './Category.css';
+import CategoryFormClass from './CategoryFormClass';
+
+class CategoryListClass extends Component {
+  state = {
+    categories: [
+      { id: 1, name: 'Electronics', description: 'Devices and gadgets' },
+      { id: 2, name: 'Books', description: 'Various books and literature' }
+    ],
+    isEditing: false,
+    currentCategory: { id: '', name: '', description: '' },
+  };
+
+  // componentDidMount() {
+  //   this.fetchCategories();
+  // }
+
+  // fetchCategories = async () => {
+  //   const categories = await getCategories();
+  //   this.setState({ categories });
+  // };
+
+  handleDelete = (id) => {
+    const filteredCategories = this.state.categories.filter(category => category.id !== id);
+    this.setState({ categories: filteredCategories });
+  };
+
+  handleEdit = (category) => {
+    this.setState({ isEditing: true, currentCategory: category });
+  };
+
+  handleCancelEdit = () => {
+    this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+  };
+
+  handleChange = (event) => {
+    const { name, value } = event.target;
+    this.setState((prevState) => ({
+      currentCategory: { ...prevState.currentCategory, [name]: value }
+    }));
+  };
+
+  handleUpdate = (event) => {
+    event.preventDefault();
+    const { categories, currentCategory } = this.state;
+    const updatedCategories = categories.map(category =>
+      category.id === currentCategory.id
+        ? { ...currentCategory }
+        : category
+    );
+    this.setState({ categories: updatedCategories, isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+  };
+
+  render() {
+    const { categories, isEditing, currentCategory } = this.state;
+    return (
+      <div>
+        <h2>Categories</h2>
+        {isEditing ? (
+          <form onSubmit={this.handleUpdate}>
+            <input
+              type="text"
+              name="name"
+              value={currentCategory.name}
+              onChange={this.handleChange}
+              placeholder="Category Name"
+            />
+            <input
+              type="text"
+              name="description"
+              value={currentCategory.description}
+              onChange={this.handleChange}
+              placeholder="Category Description"
+            />
+            <button type="submit" className="button button-update">Update</button>
+            <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
+          </form>
+        ) : (
+          <CategoryFormClass fetchCategories={this.fetchCategories} />
+        )}
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {categories.map(category => (
+              <tr key={category.id}>
+                <td>{category.id}</td>
+                <td>{category.name}</td>
+                <td>{category.description}</td>
+                <td>
+                  <button className="button button-update" onClick={() => this.handleEdit(category)}>Edit</button>
+                  <button className="button button-delete" onClick={() => this.handleDelete(category.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default CategoryListClass;
+
+
+  ```
+</details>
+
+
+### 6. Adding CSS (15 minutes)
+- Demonstrate how to add and apply CSS in React.
+- Style the category and product forms.
+ Category.css *
+```css
+  form {
+     margin: 20px;
+  }
+
+   input {
+    margin-right: 10px;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 18px;
+    text-align: left;
+  }
+  
+  th, td {
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+  }
+  
+  th {
+    background-color: #f4f4f4;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  
+  tr:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .button {
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+  
+  .button-delete {
+    background-color: #ff4d4d;
+  }
+  
+  .button-delete:hover {
+    background-color: #ff1a1a;
+  }
+  
+  .button-update {
+    background-color:blue;
+  }
+  
+  .button-update:hover {
+    background-color: blue;
+  }
+  
+```
+### 7. Integrating MockAPI for CRUD Operations (20 minutes)
+- Set up MockAPI for category and product management.
+- Perform CRUD operations (Create, Read, Update, Delete) using MockAPI.
+- Url Localhost / Mockapi: 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/category';
+- Discuss Axios/ Await Fectch
+- **Install React Router:**
+```bash
+   npm install axios --save
+```
+- ApiCategory.js
+```jsx
+import axios from 'axios';
+
+const apiUrl = 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/category';
+
+export const getCategories = () => {
+  return axios.get(apiUrl)
+    .then((response) => response.data);
+};
+
+export const createCategory = (category) => {
+  return axios.post(apiUrl, category)
+    .then((response) => response.data);
+};
+
+export const deleteCategory = (id) => {
+  return axios.delete(`${apiUrl}/${id}`)
+    .then((response) => response.data);
+};
+
+export const updateCategory = (id, category) => {
+  return axios.put(`${apiUrl}/${id}`, category)
+    .then((response) => response.data);
+};
+
+
+// Example with custom headers
+// export const createCategory = (category, token) => {
+//     return axios.post(apiUrl, category, {
+//       headers: {
+//         Authorization: `Bearer ${token}` // Example of an auth token
+//       }
+//     }).then((response) => response.data);
+//   };
+
+// export const createCategory = (category) =>
+//     fetch(apiUrl, {
+//       method: 'POST',
+//       headers: {
+//         'Content-Type': 'application/json',
+//       },
+//       body: JSON.stringify(category),
+//     }).then((res) => res.json());
+  
+//   export const deleteCategory = (id) =>
+//     fetch(\`\${apiUrl}/\${id}\`, {
+//       method: 'DELETE',
+//     }).then((res) => res.json());
+  
+//   export const updateCategory = (id, category) =>
+//     fetch(\`\${apiUrl}/\${id}\`, {
+//       method: 'PUT',
+//       headers: {
+//         'Content-Type': 'application/json',
+//       },
+//       body: JSON.stringify(category),
+//     }).then((res) => res.json());
+  
+```
+
+
+
+
+### 8. Routing Navigation (15 minutes)
+
+- Discus how React Rauter works
+- Modify \`App.js\` to include a welcome message and links to the category and product registration pages.
+- Step-by-Step Instructions:
+    -  **Install React Router:**
+    -  Run the following command to install React Router:
+   ```bash
+   npm install react-router-dom
+   ```
+
+  - **Modify App.js:**
+   - Replace the content of \`App.js\` with the following code:
+   ```jsx
+  import React from 'react';
+  import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+  import logo from './logo.svg';
+  import './App.css';
+  import CategoryListClass from './components/Category/CategoryListClass';
+  
+  function App() {
+    return (
+      <Router>
+        <div className="App">
+          <h1>Product Management System</h1>
+          <nav>
+            <ul>
+              <li>
+                <Link to="/category">Register Category</Link>
+              </li>
+              <li>
+                <Link to="/product">Register Product</Link>
+              </li>
+            </ul>
+          </nav>
+          <Routes>
+            <Route path="/category" element={<CategoryListClass />} />
+            <Route path="/product" element={<CategoryListClass />} />
+          </Routes>
+        </div>
+      </Router>
+    );
+  }
+  
+  export default App;
+
+   ```
+
+   
+### 9. Design Content Navigation (15 minutes)
+- Modify \`App.js\` to design topbar,sidebar and contentregistration pages.
+- Step-by-Step Instructions:
+    -  **Modify App.js:**
+    -  Replace code to App.js:
+  ```jsx 
+    import logo from './logo.svg';
+    import './App.css';
+    import CategoryListClass from './components/Category/CategoryListClass';
+    import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
+    
+    function App() {
+      return (
+        <Router>
+          <div className="App">
+            <div className="topbar">
+              <h1>Product Management System</h1>
+            </div>
+            <div className="container">
+              <nav className="sidebar">
+                <ul>
+                  <li>
+                    <Link to="/category1">Category</Link>
+                  </li>
+                  <li>
+                    <Link to="/product">Product</Link>
+                  </li>
+                </ul>
+              </nav>
+              <div className="content">
+                <Routes>
+                  <Route path="/category1" element={<CategoryListClass />} />
+                  {/*<Route path="/product" element={<ProductList />} /> */}
+                </Routes>
+              </div>
+            </div>
+          </div>
+        </Router>
+      );
+    }
+    
+    export default App;
+
+
+   ```
+
+
+  - **Modify App.css:**
+   - Add the content of \`App.css\` with the following code:
+   ```css 
+    .App {
+        font-family: sans-serif;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+
+    .topbar {
+        background-color: #f8f9fa;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+    }
+
+    .container {
+        display: flex;
+        flex-grow: 1;
+    }
+
+    .sidebar {
+        width: 200px;
+        background-color: #f8f9fa;
+        padding: 15px;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+        text-align: left;
+    }
+
+    .sidebar ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    .sidebar ul li {
+        margin: 10px 0;
+    }
+
+    .sidebar ul li a {
+        text-decoration: none;
+        color: #007bff;
+        font-weight: bold;
+    }
+
+    .content {
+        flex-grow: 1;
+        padding: 40px;
+    }
+
+   ```
+   
+### 10. Break (5 minutes)
+### 11. Creating Functional Components (30 minutes)
+- Deep dive into creating functional components with hooks.
+- Create `CategoryFormFunction.js` and `CategoryListFunction.js` as functional components.
+- Discuss useState and useEffect hooks.
+CategoryFormFunction.js
+
+#### I: Importing Dependencies
+
+Start by importing React and any necessary services:
+
+```
+import React, { useState } from 'react';
+//import { createCategory } from '../../services/ApiCategory';
+```
+
+#### II: Defining the Functional Component
+
+```
+const CategoryFormFunction = () => {
+  return (
+    "test"
+  );
+};    
+```
+
+#### III: Introducing useState Hook
+```
+const [categoryName, setCategoryName] = useState('');
+const [description, setDescription] = useState('');
+
+```
+
+#### IV: Handling Input Changes & Submit Function
+```
+const handleChange = (event) => {
+  const { name, value } = event.target;
+  if (name === 'name') setCategoryName(value);
+  if (name === 'description') setDescription(value);
+};
+```
+```
+const handleSubmit = (event) => {
+  event.preventDefault();
+
+  // Log the current state values
+  console.log({
+    categoryName: categoryName,
+    description: description,
+  });
+
+  // Display an alert with the submitted category name and description
+  alert(`Category Name: ${categoryName}\nCategory Description: ${description}`);
+
+  // Clear the input fields after submission
+  setCategoryName('');
+  setDescription('');
+
+  // API integration will be handled in the next chapter
+  //await createCategory({ name: categoryName, description });
+  //fetchCategories();
+};
+```
+
+#### V: Rendering the Form
+```
+const CategoryFormFunction = () => {
+  return (
+    <form>
+      <input type="text" name="name" placeholder="Category Name" />
+      <input type="text" name="description" placeholder="Category Description" />
+      <button type="submit">Add Category</button>
+    </form>
+  );
+};
+```
+
+#### VII: Rendering the Form with Function
+
+Start by importing React and any necessary services:
+
+```
+return (
+  <form onSubmit={handleSubmit}>
+    <input
+      type="text"
+      name="name"
+      value={categoryName}
+      onChange={handleChange}
+      placeholder="Category Name"
+    />
+    <input
+      type="text"
+      name="description"
+      value={description}
+      onChange={handleChange}
+      placeholder="Category Description"
+    />
+    <button type="submit">Add Category</button>
+  </form>
+);
+
+
+```
+
+#### VI: Exporting the Component
+
+```
+export default CategoryFormFunction;
+
+```
+
+
+
+<details>
+  <summary>full code</summary>
+
+  ```jsx
+  import React, { useState } from 'react';
+	import { createCategory } from '../../services/ApiCategory';
+
+	const CategoryFormFunction = ({ fetchCategories }) => {
+	  const [categoryName, setCategoryName] = useState('');
+	  const [description, setDescription] = useState('');
+
+	  const handleChange = (event) => {
+		const { name, value } = event.target;
+		if (name === 'name') setCategoryName(value);
+		if (name === 'description') setDescription(value);
+	  };
+
+	  const handleSubmit = async (event) => {
+		event.preventDefault();
+		await createCategory({ name: categoryName, description });
+		setCategoryName('');
+		setDescription('');
+		fetchCategories();
+	  };
+
+	  return (
+		<form onSubmit={handleSubmit}>
+		  <input
+			type="text"
+			name="name"
+			value={categoryName}
+			onChange={handleChange}
+			placeholder="Category Name"
+		  />
+		  <input
+			type="text"
+			name="description"
+			value={description}
+			onChange={handleChange}
+			placeholder="Category Description"
+		  />
+		  <button type="submit">Add Category</button>
+		</form>
+	  );
+	};
+
+	export default CategoryFormFunction;
+
+
+  ```
+</details>
+
+CategoryListFunction.js
+
+
+#### I: Importing Dependencies
+
+Start by importing React and any necessary services:
+
+```
+import React, { useEffect, useState } from 'react';
+import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+import './Category.css';
+import CategoryFormFunction from './CategoryFormFunction';
+
+```
+
+#### II: Defining the Functional Component
+
+```
+const CategoryListFunction = () => {
+  return (
+    "testCategory"
+  );
+
+}   
+```
+
+#### III: Introducing useState Hook
+```
+  const [categories, setCategories] = useState([]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [currentCategory, setCurrentCategory] = useState({ id: '', name: '', description: '' });
+
+```
+#### III: Lifecycle Method and Fetch Categories
+
+
+```
+componentDidMount() {
+  // this.fetchCategories();
+}
+
+fetchCategories = async () => {
+  // const categories = await getCategories();
+  // this.setState({ categories });
+};
+
+
+```
+
+#### IV: Handling Delete, Edit, and Cancel Edit
+```
+  const handleDelete = async (id) => {
+    await deleteCategory(id);
+    fetchCategories(); // Refresh the list after deletion
+  };
+
+  const handleEdit = (category) => {
+    setIsEditing(true);
+    setCurrentCategory(category);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setCurrentCategory({ id: '', name: '', description: '' });
+  };
+
+
+```
+#### V: Handling Input Changes and Update and Add using props
+```
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setCurrentCategory((prevCategory) => ({
+      ...prevCategory,
+      [name]: value,
+    }));
+  };
+
+  const handleUpdate = async (event) => {
+    event.preventDefault();
+    await updateCategory(currentCategory.id, {
+      name: currentCategory.name,
+      description: currentCategory.description,
+    });
+    setIsEditing(false);
+    setCurrentCategory({ id: '', name: '', description: '' });
+    fetchCategories();
+  };
+
+```
+
+#### II: Rendering the Functional Component
+
+```
+  return (
+    <div>
+      <h2>Categories</h2>
+      {isEditing ? (
+        <form onSubmit={handleUpdate}>
+          <input
+            type="text"
+            name="name"
+            value={currentCategory.name}
+            onChange={handleChange}
+            placeholder="Category Name"
+          />
+          <input
+            type="text"
+            name="description"
+            value={currentCategory.description}
+            onChange={handleChange}
+            placeholder="Category Description"
+          />
+          <button type="submit" className="button button-update">
+            Update
+          </button>
+          <button type="button" className="button button-delete" onClick={handleCancelEdit}>
+            Cancel
+          </button>
+        </form>
+      ) : (
+        <CategoryFormFunction fetchCategories={fetchCategories} />
+      )}
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {categories.map((category) => (
+            <tr key={category.id}>
+              <td>{category.id}</td>
+              <td>{category.name}</td>
+              <td>{category.description}</td>
+              <td>
+                <button className="button button-update" onClick={() => handleEdit(category)}>
+                  Edit
+                </button>
+                <button className="button button-delete" onClick={() => handleDelete(category.id)}>
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+ 
+```
+
+<details>
+  <summary>full code</summary>
+    ```jsx
+      import React, { useEffect, useState } from 'react';
+    	import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+    	import './Category.css';
+    	import CategoryFormFunction from './CategoryFormFunction';
+    
+    	const CategoryListFunction = () => {
+    	  const [categories, setCategories] = useState([]);
+    	  const [isEditing, setIsEditing] = useState(false);
+    	  const [currentCategory, setCurrentCategory] = useState({ id: '', name: '', description: '' });
+    
+    	  useEffect(() => {
+    		fetchCategories();
+    	  }, []);
+    
+    	  const fetchCategories = async () => {
+    		const categories = await getCategories();
+    		setCategories(categories);
+    	  };
+    
+    	  const handleDelete = async (id) => {
+    		await deleteCategory(id);
+    		fetchCategories();
+    	  };
+    
+    	  const handleEdit = (category) => {
+    		setIsEditing(true);
+    		setCurrentCategory(category);
+    	  };
+    
+    	  const handleCancelEdit = () => {
+    		setIsEditing(false);
+    		setCurrentCategory({ id: '', name: '', description: '' });
+    	  };
+    
+    	  const handleChange = (event) => {
+    		const { name, value } = event.target;
+    		setCurrentCategory((prevCategory) => ({
+    		  ...prevCategory,
+    		  [name]: value,
+    		}));
+    	  };
+    
+    	  const handleUpdate = async (event) => {
+    		event.preventDefault();
+    		await updateCategory(currentCategory.id, {
+    		  name: currentCategory.name,
+    		  description: currentCategory.description,
+    		});
+    		setIsEditing(false);
+    		setCurrentCategory({ id: '', name: '', description: '' });
+    		fetchCategories();
+    	  };
+    
+    	  return (
+    		<div>
+    		  <h2>Categories</h2>
+    		  {isEditing ? (
+    			<form onSubmit={handleUpdate}>
+    			  <input
+    				type="text"
+    				name="name"
+    				value={currentCategory.name}
+    				onChange={handleChange}
+    				placeholder="Category Name"
+    			  />
+    			  <input
+    				type="text"
+    				name="description"
+    				value={currentCategory.description}
+    				onChange={handleChange}
+    				placeholder="Category Description"
+    			  />
+    			  <button type="submit" className="button button-update">
+    				Update
+    			  </button>
+    			  <button type="button" className="button button-delete" onClick={handleCancelEdit}>
+    				Cancel
+    			  </button>
+    			</form>
+    		  ) : (
+    			<CategoryFormFunction fetchCategories={fetchCategories} />
+    		  )}
+    		  <table>
+    			<thead>
+    			  <tr>
+    				<th>ID</th>
+    				<th>Name</th>
+    				<th>Description</th>
+    				<th>Actions</th>
+    			  </tr>
+    			</thead>
+    			<tbody>
+    			  {categories.map((category) => (
+    				<tr key={category.id}>
+    				  <td>{category.id}</td>
+    				  <td>{category.name}</td>
+    				  <td>{category.description}</td>
+    				  <td>
+    					<button className="button button-update" onClick={() => handleEdit(category)}>
+    					  Edit
+    					</button>
+    					<button className="button button-delete" onClick={() => handleDelete(category.id)}>
+    					  Delete
+    					</button>
+    				  </td>
+    				</tr>
+    			  ))}
+    			</tbody>
+    		  </table>
+    		</div>
+    	  );
+    	};
+  	export default CategoryListFunction;
+  	```
+  </details>
+
+### 12. Task to Create Product Page (60 minutes)
+- Follow category page, task to create product registration page. Can use class / functional component
+- Link forms to MockAPI for data submission.
+- Url localhost / Mockapi: 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/product';
+- Implement similar logic for \`ProductForm.js\` &  \`ProductList.js\`
+Example form and list structure with API integration
+
+```jsx
+import React, { Component } from 'react';
+import ProductForm from './ProductForm';
+import { deleteProduct, updateProduct, getProduct } from '../../services/ApiProduct';
+import './Product.css';
+
+class ProductList extends Component {
+  state = {
+    products: [],
+    isEditing: false,
+    currentProduct: { id: '', name: '', description: '', category: '' },
+  };
+
+  componentDidMount() {
+  }
+
+  render() {   
+  }
+}
+
+export default ProductList;
+```
+
+
+## Conclusion (15 minutes)
+- Recap the key concepts covered.
+- Q&A session to address any doubts or questions.
+- Provide resources for further learning.
+
+## Resources:
+- [React Documentation](https://reactjs.org/docs/getting-started.html)
+- [MockAPI Documentation](https://mockapi.io/docs)
+- [CSS Tricks](https://css-tricks.com/)
+- [React Router Documentation](https://reactrouter.com/web/guides/quick-start)
+
+
+## Prerequisite Topics
+- [Explore project files and folders](https://reactjs.org/docs/getting-started.html)
+- [Write basic JSX elements](https://reactjs.org/docs/introducing-jsx.html)
+- [Practice embedding expressions and adding attributes](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx)
+- [Create functional and class components](https://reactjs.org/docs/components-and-props.html)
+- [Pass data via props and set default props](https://reactjs.org/docs/components-and-props.html#props-are-read-only)
+- [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
+- [Explore basic lifecycle methods in class components](https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class)
+- [Use useState to manage state in functional components](https://reactjs.org/docs/hooks-state.html)
+- [Event Handling](https://reactjs.org/docs/handling-events.html)
+- [Handle button clicks and form submissions](https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers)
+- [Practice passing arguments to event handlers](https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers)
+- [Implement conditional rendering in components](https://reactjs.org/docs/conditional-rendering.html)
+- [Render a list of tasks and add keys to list items](https://reactjs.org/docs/lists-and-keys.html)
+- [Create a form to add new tasks](https://reactjs.org/docs/forms.html)
+- [Manage form input state](https://reactjs.org/docs/forms.html#controlled-components)
+- [Style components using CSS classes and inline styles](https://reactjs.org/docs/faq-styling.html)
+
+
+## Advanced Topics
+- [Building and Using Reusable Component Libraries (axios, sweetalert, formik, bootstrap/tailwind)](https://reactjs.org/docs/reusable-components.html)
+- [Forms and Validation / Error handling](https://reactjs.org/docs/forms.html#controlled-components)
+- [Complex Forms and Validation](https://formik.org/)
+- [Higher-Order Components (HOCs)](https://reactjs.org/docs/higher-order-components.html)
+- [Context API](https://reactjs.org/docs/context.html)
+- [Advanced State Management](https://redux.js.org/)
+- [Side Effects and Data Fetching](https://reactjs.org/docs/hooks-effect.html)
+- [Performance Optimization (React.memo, React.PureComponent, Code Splitting, and Lazy Loading)](https://reactjs.org/docs/optimizing-performance.html)
+- [Advanced Performance Optimization](https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab)
+- [GraphQL](https://graphql.org/)
+- [Server-Side Rendering (SSR) with Next.js](https://nextjs.org/docs)
+- [Animation in React](https://reactcommunity.org/react-transition-group/)
+
+
+
+
+This comprehensive 4-hour training module ensures that students gain an in-depth understanding of React components, styling, and CRUD operations, with ample time for hands-on practice and advanced topics.
+

productApp/nginx.conf

+server {
+    listen 80;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    
+}
\ No newline at end of file

productApp/package.json

+{
+  "name": "product-management-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

productApp/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

productApp/public/manifest.json

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

productApp/public/robots.txt

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

productApp/src/App.css

+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+
+
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.topbar {
+  background-color: #f8f9fa;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+}
+
+.container {
+  display: flex;
+  flex-grow: 1;
+}
+
+.sidebar {
+  width: 200px;
+  background-color: #f8f9fa;
+  padding: 15px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  text-align: left;
+}
+
+.sidebar ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.sidebar ul li {
+  margin: 10px 0;
+}
+
+.sidebar ul li a {
+  text-decoration: none;
+  color: #007bff;
+  font-weight: bold;
+}
+
+.content {
+  flex-grow: 1;
+  padding: 40px;
+}

productApp/src/App.js

+import logo from './logo.svg';
+import './App.css';
+import CategoryListClass from './components/Category/CategoryListClass';
+import CategoryListFunction from './components/Category/CategoryListFunction';
+import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
+import ProductList from './components/Product/ProductList';
+
+function App() {
+  return (
+    <Router basename="/product-ui">
+      <div className="App">
+        <div className="topbar">
+          <h1>Product Management System</h1>
+        </div>
+        <div className="container">
+          <nav className="sidebar">
+            <ul>
+              <li>
+                <Link to="/category1">Category Class</Link>
+              </li>
+              <li>
+                <Link to="/category2">Category Functional</Link>
+              </li>
+              <li>
+                <Link to="/product">Product</Link>
+              </li>
+            </ul>
+          </nav>
+          <div className="content">
+            <Routes>
+              <Route path="/category1" element={<CategoryListClass />} />
+              <Route path="/category2" element={<CategoryListFunction />} />
+              <Route path="/product" element={<ProductList />} />
+            </Routes>
+          </div>
+        </div>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

productApp/src/App.test.js

+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

productApp/src/components/Category/Category.css

+form {
+  margin: 20px;
+}
+
+input {
+ margin-right: 10px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 18px;
+    text-align: left;
+  }
+  
+  th, td {
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+  }
+  
+  th {
+    background-color: #f4f4f4;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  
+  tr:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .button {
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+  
+  .button-delete {
+    background-color: #ff4d4d;
+  }
+  
+  .button-delete:hover {
+    background-color: #ff1a1a;
+  }
+  
+  .button-update {
+    background-color:blue;
+  }
+  
+  .button-update:hover {
+    background-color: blue;
+  }
+  
\ No newline at end of file

productApp/src/components/Category/CategoryFormClass.js

+import React, { Component } from 'react';
+import { createCategory } from '../../services/ApiCategory';
+
+class CategoryFormClass extends Component {
+  state = {
+    name: '',
+    description: ''
+  };
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleSubmit = async (event) => {
+    event.preventDefault();
+    const { name, description } = this.state;
+    await createCategory({ name: name, description });
+    this.setState({ name: '', description: '' });
+    this.props.fetchCategories();
+  };
+
+  render() {
+    const { name, description } = this.state;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input 
+          type="text" 
+          name="name"
+          value={name} 
+          onChange={this.handleChange} 
+          placeholder="Category Name" 
+        />
+        <input 
+          type="text" 
+          name="description"
+          value={description} 
+          onChange={this.handleChange} 
+          placeholder="Category Description" 
+        />
+        <button type="submit">Add Category</button>
+      </form>
+    );
+  }
+}
+
+export default CategoryFormClass;

productApp/src/components/Category/CategoryFormFunction.js

+// CategoryFormFunction.js
+import React, { useState } from 'react';
+import { createCategory } from '../../services/ApiCategory';
+
+const CategoryFormFunction = ({ fetchCategories }) => {
+  const [categoryName, setCategoryName] = useState('');
+  const [description, setDescription] = useState('');
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    if (name === 'name') setCategoryName(value);
+    if (name === 'description') setDescription(value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    await createCategory({ name: categoryName, description });
+    setCategoryName('');
+    setDescription('');
+    fetchCategories();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        name="name"
+        value={categoryName}
+        onChange={handleChange}
+        placeholder="Category Name"
+      />
+      <input
+        type="text"
+        name="description"
+        value={description}
+        onChange={handleChange}
+        placeholder="Category Description"
+      />
+      <button type="submit">Add Category</button>
+    </form>
+  );
+};
+
+export default CategoryFormFunction;

productApp/src/components/Category/CategoryListClass.js

+import React, { Component } from 'react';
+import CategoryFormClass from './CategoryFormClass';
+import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+import './Category.css';
+
+class CategoryListClass extends Component {
+  state = {
+    categories: [],
+    isEditing: false,
+    currentCategory: { id: '', name: '', description: '' },
+  };
+
+  componentDidMount() {
+    this.fetchCategories();
+  }
+
+  fetchCategories = async () => {
+    const categories = await getCategories();
+    this.setState({ categories });
+  };
+
+  handleDelete = async (id) => {
+    await deleteCategory(id);
+    this.fetchCategories();
+  };
+
+  handleEdit = (category) => {
+    this.setState({ isEditing: true, currentCategory: category });
+  };
+
+  handleCancelEdit = () => {
+    this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+  };
+
+  handleChange = (event) => {
+    const { name, value } = event.target;
+    this.setState((prevState) => ({
+      currentCategory: { ...prevState.currentCategory, [name]: value }
+    }));
+  };
+
+  handleUpdate = async (event) => {
+    event.preventDefault();
+    const { currentCategory } = this.state;
+    await updateCategory(currentCategory.id, { name: currentCategory.name, description: currentCategory.description });
+    this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+    this.fetchCategories();
+  };
+
+  render() {
+    const { categories, isEditing, currentCategory } = this.state;
+    return (
+      <div>
+        <h2>Categories</h2>
+        {isEditing ? (
+          <form onSubmit={this.handleUpdate}>
+            <input
+              type="text"
+              name="name"
+              value={currentCategory.name}
+              onChange={this.handleChange}
+              placeholder="Category Name"
+            />
+            <input
+              type="text"
+              name="description"
+              value={currentCategory.description}
+              onChange={this.handleChange}
+              placeholder="Category Description"
+            />
+            <button type="submit" className="button button-update">Update</button>
+            <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
+          </form>
+        ) : (
+          <CategoryFormClass fetchCategories={this.fetchCategories} />
+        )}
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {categories.map(category => (
+              <tr key={category.id}>
+                <td>{category.id}</td>
+                <td>{category.name}</td>
+                <td>{category.description}</td>
+                <td>
+                  <button className="button button-update" onClick={() => this.handleEdit(category)}>Edit</button>
+                  <button className="button button-delete" onClick={() => this.handleDelete(category.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default CategoryListClass;

productApp/src/components/Category/CategoryListFunction.js

+// CategoryListFunction.js
+import React, { useEffect, useState } from 'react';
+import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+import './Category.css';
+import CategoryFormFunction from './CategoryFormFunction';
+
+const CategoryListFunction = () => {
+  const [categories, setCategories] = useState([]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [currentCategory, setCurrentCategory] = useState({ id: '', name: '', description: '' });
+
+  useEffect(() => {
+    fetchCategories();
+  }, []);
+
+  const fetchCategories = async () => {
+    const categories = await getCategories();
+    setCategories(categories);
+  };
+
+  const handleDelete = async (id) => {
+    await deleteCategory(id);
+    fetchCategories();
+  };
+
+  const handleEdit = (category) => {
+    setIsEditing(true);
+    setCurrentCategory(category);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setCurrentCategory({ id: '', name: '', description: '' });
+  };
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setCurrentCategory((prevCategory) => ({
+      ...prevCategory,
+      [name]: value,
+    }));
+  };
+
+  const handleUpdate = async (event) => {
+    event.preventDefault();
+    await updateCategory(currentCategory.id, {
+      name: currentCategory.name,
+      description: currentCategory.description,
+    });
+    setIsEditing(false);
+    setCurrentCategory({ id: '', name: '', description: '' });
+    fetchCategories();
+  };
+
+  return (
+    <div>
+      <h2>Categories</h2>
+      {isEditing ? (
+        <form onSubmit={handleUpdate}>
+          <input
+            type="text"
+            name="name"
+            value={currentCategory.name}
+            onChange={handleChange}
+            placeholder="Category Name"
+          />
+          <input
+            type="text"
+            name="description"
+            value={currentCategory.description}
+            onChange={handleChange}
+            placeholder="Category Description"
+          />
+          <button type="submit" className="button button-update">
+            Update
+          </button>
+          <button type="button" className="button button-delete" onClick={handleCancelEdit}>
+            Cancel
+          </button>
+        </form>
+      ) : (
+        <CategoryFormFunction fetchCategories={fetchCategories} />
+      )}
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {categories.map((category) => (
+            <tr key={category.id}>
+              <td>{category.id}</td>
+              <td>{category.name}</td>
+              <td>{category.description}</td>
+              <td>
+                <button className="button button-update" onClick={() => handleEdit(category)}>
+                  Edit
+                </button>
+                <button className="button button-delete" onClick={() => handleDelete(category.id)}>
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CategoryListFunction;

productApp/src/components/Product/Product.css

+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 18px;
+    text-align: left;
+  }
+  
+  th, td {
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+  }
+  
+  th {
+    background-color: #f4f4f4;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  
+  tr:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .button {
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+  
+  .button-delete {
+    background-color: #ff4d4d;
+  }
+  
+  .button-delete:hover {
+    background-color: #ff1a1a;
+  }
+  
+  .button-update {
+    background-color:blue;
+  }
+  
+  .button-update:hover {
+    background-color: blue;
+  }
+  
\ No newline at end of file

productApp/src/components/Product/ProductForm.js

+import React, { Component } from 'react';
+import { createProduct } from '../../services/ApiProduct';
+import { getCategories } from '../../services/ApiCategory';
+
+class ProductForm extends Component {
+  state = {
+    name: '',
+    description: '',
+    categoryId: '',
+    categories: [],
+  };
+
+  componentDidMount() {
+    this.fetchCategories();
+  }
+
+  fetchCategories = async () => {
+    const categories = await getCategories();
+    this.setState({ categories });
+  };
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleSubmit = async (event) => {
+    event.preventDefault();
+    const { name, description, categoryId } = this.state;
+    await createProduct({ name, description, categoryId });
+    this.setState({ name: '', description: '', categoryId: '' });
+    this.props.fetchProducts();
+  };
+
+  render() {
+    const { name, description, categoryId, categories } = this.state;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input 
+          type="text" 
+          name="name"
+          value={name} 
+          onChange={this.handleChange} 
+          placeholder="Product Name" 
+        />
+        <input 
+          type="text" 
+          name="description"
+          value={description} 
+          onChange={this.handleChange} 
+          placeholder="Product Description" 
+        />
+        <select name="categoryId" value={categoryId} onChange={this.handleChange}>
+          <option value="">Select Category</option>
+          {categories.map(category => (
+            <option key={category.id} value={category.id}>
+              {category.name}
+            </option>
+          ))}
+        </select>
+        <button type="submit">Add Product</button>
+      </form>
+    );
+  }
+}
+
+export default ProductForm;

productApp/src/components/Product/ProductList.js

+import React, { Component } from 'react';
+import ProductForm from './ProductForm';
+import { deleteProduct, updateProduct, getProduct } from '../../services/ApiProduct';
+import './Product.css';
+
+class ProductList extends Component {
+  state = {
+    products: [],
+    isEditing: false,
+    currentProduct: { id: '', name: '', description: '' },
+  };
+
+  componentDidMount() {
+    this.fetchProducts();
+  }
+
+  fetchProducts = async () => {
+    const products = await getProduct();
+    this.setState({ products });
+  };
+
+  handleDelete = async (id) => {
+    await deleteProduct(id);
+    this.fetchProducts();
+  };
+
+  handleEdit = (product) => {
+    this.setState({ isEditing: true, currentProduct: product });
+  };
+
+  handleCancelEdit = () => {
+    this.setState({ isEditing: false, currentProduct: { id: '', name: '', description: '' } });
+  };
+
+  handleChange = (event) => {
+    const { name, value } = event.target;
+    this.setState((prevState) => ({
+      currentProduct: { ...prevState.currentProduct, [name]: value }
+    }));
+  };
+
+  handleUpdate = async (event) => {
+    event.preventDefault();
+    const { currentProduct } = this.state;
+    await updateProduct(currentProduct.id, { name: currentProduct.name, description: currentProduct.description });
+    this.setState({ isEditing: false, currentProduct: { id: '', name: '', description: '' } });
+    this.fetchProducts();
+  };
+
+  render() {
+    const { products, isEditing, currentProduct } = this.state;
+    return (
+      <div>
+        <h2>Products</h2>
+        {isEditing ? (
+          <form onSubmit={this.handleUpdate}>
+            <input
+              type="text"
+              name="name"
+              value={currentProduct.name}
+              onChange={this.handleChange}
+              placeholder="Product Name"
+            />
+            <input
+              type="text"
+              name="description"
+              value={currentProduct.description}
+              onChange={this.handleChange}
+              placeholder="Product Description"
+            />
+            <button type="submit" className="button button-update">Update</button>
+            <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
+          </form>
+        ) : (
+          <ProductForm fetchProducts={this.fetchProducts} />
+        )}
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Category</th>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {products.map(product => (
+              <tr key={product.id}>
+                <td>{product.id}</td>
+                <td>{product.category}</td>
+                <td>{product.name}</td>
+                <td>{product.description}</td>
+                <td>
+                  <button className="button button-update" onClick={() => this.handleEdit(product)}>Edit</button>
+                  <button className="button button-delete" onClick={() => this.handleDelete(product.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default ProductList;

productApp/src/index.css

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

productApp/src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

productApp/src/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file

productApp/src/reportWebVitals.js

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

productApp/src/services/ApiCategory.js

+const apiUrl = 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/category'; // Replace with your MockAPI URL
+
+export const getCategories = async () => {
+  const response = await fetch(`${apiUrl}`);
+  return response.json();
+};
+
+export const getCategoryById = async (id) => {
+  const response = await fetch(`${apiUrl}/${id}`);
+  return response.json();
+};
+
+export const createCategory = async (category) => {
+  await fetch(`${apiUrl}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(category),
+  });
+};
+
+export const updateCategory = async (id, category) => {
+  await fetch(`${apiUrl}/${id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(category),
+  });
+};
+
+export const deleteCategory = async (id) => {
+  await fetch(`${apiUrl}/${id}`, {
+    method: 'DELETE',
+  });
+};

productApp/src/services/ApiProduct.js

+const apiUrl = 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/product'; // Replace with your MockAPI URL
+
+export const getProduct = async () => {
+  const response = await fetch(`${apiUrl}`);
+  return response.json();
+};
+
+export const getProductById = async (id) => {
+  const response = await fetch(`${apiUrl}/${id}`);
+  return response.json();
+};
+
+export const createProduct = async (category) => {
+  await fetch(`${apiUrl}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(category),
+  });
+};
+
+export const updateProduct = async (id, category) => {
+  await fetch(`${apiUrl}/${id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(category),
+  });
+};
+
+export const deleteProduct = async (id) => {
+  await fetch(`${apiUrl}/${id}`, {
+    method: 'DELETE',
+  });
+};

productApp/src/setupTests.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

productSvc/Dockerfile

+# Stage 1: Build the app
+FROM eclipse-temurin:21-jdk-alpine AS builder
+
+WORKDIR /app
+
+# Copy the entire source code to the container
+COPY . .
+
+# Build project without tests, output is in build/libs/
+RUN ./gradlew clean build -x test
+
+# Stage 2: Run the app
+FROM eclipse-temurin:21-jdk-alpine
+
+WORKDIR /app
+
+# Copy any jar from build/libs and rename to app.jar
+COPY --from=builder /app/build/libs/*.jar app.jar
+
+EXPOSE 8080
+
+ENTRYPOINT ["java", "-jar", "app.jar"]

productSvc/New Rich Text Document.rtf

+{\rtf1}
\ No newline at end of file

productSvc/README.md

+# PRODUCT-MANAGEMENT-SERVICE
+
+## Objective:
+
+By the end of this session, students will be able to create a robust Spring Boot backend service for product management with proper entity relationships, RESTful APIs, and CRUD operations. The system will manage categories and products with a many-to-one relationship.
+
+## Technology Stack:
+
+- Java 21+
+- Spring Boot 3.44
+- Spring Data JPA
+- Gradle
+- MySQL
+
+## 1. Introduction (10 minutes)
+
+- Overview of Object-Oriented Programming in Java.
+- Introduction to Java Spring Boot framework.
+- Brief explanation on Spring Boot architectures.
+- Introduction to Swagger UI for API testing.
+
+## 2. Project Setup (15 minutes)
+
+### SQL Setup
+
+- Install MySQL Server by following this url [click here](https://dev.mysql.com/downloads/installer/).
+- After installing the MySQL server, add the path in System Variables.
+  - Copy the path of the MySQL server which will like this `C:\Program Files\MySQL\MySQL Server 8.0\bin` for most cases.
+  - Open Environment Variables.
+  - Click Environment Variables > Under System Variables, find Path > Edit.
+  - Add the copied path of MySQL server.
+  - Click OK to save.
+- Install SQLyog by following this url [click here](https://github.com/webyog/sqlyog-community/wiki/Downloads).
+
+### JDK Setup
+
+- Install Java version 21 by following this link [click here](https://www.oracle.com/java/technologies/javase/jdk21-archive-downloads.html).
+- Upon installing JDK 21, open Environment Variables.
+- Under System Variables, click New.
+  - Variable Name: JAVA_HOME.
+  - Variable Value: C:\Program Files\Java\jdk-21 (or your JDK path)
+  - Click OK to save.
+- Add Java to PATH:
+  - Find Path under System Variables > Click Edit > New.
+  - Add: %JAVA_HOME%\bin
+  - Click OK to save.
+
+### Spring Boot Setup
+
+- Create new project in [Spring initializr](https://start.spring.io/).
+- Choose Java, Gradle, and the spring version 3.44.
+- Create a name for the project.
+- Choose the packaging as Jar and the Java version 21.
+- Choose the needed dependencies:
+  - Spring Web
+  - Spring Data JPA
+  - MySQL Driver
+  - Lombok
+
+### 3. Project Structure
+
+- Most folders will be created by spring initializr.
+- Create folder/packages and files under src\main\java\com\ctsb\my_product_management_svc path according to project structure below.
+- Brief overview of the project's folder structure.
+
+```bash
+my-product-management-svc
+├───.gradle
+├───.idea
+├───build
+├───gradle
+└───src
+    ├───main
+    │   ├───java
+    │   │   └───com
+    │   │       ├───ctsb
+    │   │          └───my_product_management_svc
+    │   │              ├───category
+    │   │              │    ├───Category.java
+    │   │              │    ├───CategoryController.java
+    │   │              │    ├───CategoryDto.java
+    │   │              │    ├───CategoryRepository.java
+    │   │              │    ├───CategoryService.java
+    │   │              ├───config
+    │   │              │    ├───OpenApiConfig.java
+    │   │              │    ├───SwaggerConfig.java
+    │   │              └───product
+    │   │              │    ├───Product.java
+    │   │              │    ├───ProductController.java
+    │   │              │    ├───ProductDto.java
+    │   │              │    ├───ProductRepository.java
+    │   │              │    ├───ProductService.java
+    │   │              │    ├───Status.java
+    │   │
+    │   └───resources
+    │
+    │
+    └───test
+```
+
+### 4. Setting up Database
+
+- In the application.properties file under the resources folder add the database configuration.
+
+```
+spring.datasource.url=jdbc:mysql://127.0.0.1:3306/productmngm?useSSL=false&serverTimezone=UTC
+spring.datasource.username=root
+spring.datasource.password=01234
+spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
+
+spring.jpa.show-sql=true
+spring.jpa.hibernate.ddl-auto=update
+
+```
+
+## Core Implementation:
+
+### 5. Creating Entities (15 minutes)
+
+- Deep dive into creating entities.
+- Create Category.java class under category package.
+- Create Product.java class under product package.
+- Discuss attributes and relationships between entities.
+
+#### Category Entity:
+
+##### i. Importing packages and classes
+
+```
+package com.ctsb.my_product_management_svc.category;
+
+import com.ctsb.my_product_management_svc.product.Product;
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+```
+
+##### ii. Adding annotations
+
+```
+@Getter
+@Setter
+@Entity
+@Table(name = "category")
+```
+
+##### iii. Defining class and fields
+
+```
+public class Category {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "id", nullable = false)
+    private Long id;
+
+    @Column(nullable = false, unique = true)
+    private String name;
+
+    private String description;
+    private Boolean active;
+
+    @CreationTimestamp
+    private LocalDateTime createdAt;
+
+    @UpdateTimestamp
+    private LocalDateTime updatedAt;
+
+}
+```
+
+#### Product Entity:
+
+##### i. Importing packages and classes
+
+```
+package com.ctsb.my_product_management_svc.product;
+
+import com.ctsb.my_product_management_svc.category.Category;
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+import java.time.LocalDateTime;
+```
+
+##### ii. Adding annotations
+
+```
+@Getter
+@Setter
+@Entity
+@Table(name = "product")
+```
+
+##### iii. Defining class and fields
+
+```
+public class Product {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "id", nullable = false)
+    private Long id;
+
+    private String name;
+    private String description;
+    private Double price;
+    private Integer stockCount;
+
+    @Enumerated(EnumType.STRING)
+    private Status status;
+
+    @CreationTimestamp
+    private LocalDateTime createdAt;
+
+    @UpdateTimestamp
+    private LocalDateTime updatedAt;
+}
+```
+
+##### iv. Creating Enum for product entity
+
+```Java
+package com.ctsb.my_product_management_svc.product;
+
+public enum Status {
+    IN_STOCK,
+    OUT_OF_STOCK,
+    DISCONTINUED
+}
+```
+
+##### v. Declaring relationship between category and product
+
+```
+    //Declare one-to-many relationship to product in category
+    @OneToMany(mappedBy = "category", orphanRemoval = true)
+    @JsonIgnore
+    private List<Product> products = new ArrayList<>();
+
+    //Declare many-to-one relationship to category in product
+    @ManyToOne
+    @JoinColumn(name = "category_id", nullable = false)
+    private Category category;
+```
+
+<details>
+<summary>Full code of category entity</summary>
+
+```Java
+package com.ctsb.my_product_management_svc.category;
+
+import com.ctsb.my_product_management_svc.product.Product;
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import jakarta.persistence.\*;
+import lombok.Getter;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+
+@Getter
+@Setter
+@Entity
+@Table(name = "category")
+public class Category {
+@Id
+@GeneratedValue(strategy = GenerationType.IDENTITY)
+@Column(name = "id", nullable = false)
+private Long id;
+
+    @Column(nullable = false, unique = true)
+    private String name;
+
+    private String description;
+    private Boolean active;
+
+    @CreationTimestamp
+    private LocalDateTime createdAt;
+
+    @UpdateTimestamp
+    private LocalDateTime updatedAt;
+
+    @OneToMany(mappedBy = "category", orphanRemoval = true)
+    @JsonIgnore
+    private List<Product> products = new ArrayList<>();
+}
+
+```
+
+</details>
+
+<details>
+<summary>Full code of product entity</summary>
+
+```Java
+package com.ctsb.my_product_management_svc.product;
+
+import com.ctsb.my_product_management_svc.category.Category;
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+import java.time.LocalDateTime;
+
+@Getter
+@Setter
+@Entity
+@Table(name = "product")
+public class Product {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "id", nullable = false)
+    private Long id;
+
+    private String name;
+    private String description;
+    private Double price;
+    private Integer stockCount;
+
+    @Enumerated(EnumType.STRING)
+    private Status status;
+
+    @CreationTimestamp
+    private LocalDateTime createdAt;
+
+    @UpdateTimestamp
+    private LocalDateTime updatedAt;
+
+    @ManyToOne
+    @JoinColumn(name = "category_id", nullable = false)
+    private Category category;
+}
+```
+
+</details>
+
+### 6. Creating Repositories (10 minutes)
+
+- Deep dive into creating repositories.
+- Create CategoryRepository.java interface under category package.
+- Create ProductRepository.java interface under product package.
+- Discuss Spring Data JPA.
+
+#### i. Creating CategoryRepository
+
+```Java
+package com.ctsb.my_product_management_svc.category;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface CategoryRepository extends JpaRepository<Category, Long> {
+}
+```
+
+#### ii. Creating ProductRepository
+
+```Java
+package com.ctsb.my_product_management_svc.product;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface ProductRepository extends JpaRepository<Product, Long> {
+}
+```
+
+### 6. Creating Data Transfer Object(DTO) (10 minutes)
+
+- Deep dive into creating DTOs.
+- Create CategoryDto.java record under category package.
+- Create ProductDto.java record under product package.
+- Discuss on how Dto works.
+
+#### i. Creating CategoryDto
+
+```Java
+package com.ctsb.my_product_management_svc.category;
+
+public record CategoryDto(
+        String name,
+        String description,
+        Boolean active
+) {
+}
+```
+
+#### ii. Creating ProductDto
+
+```Java
+package com.ctsb.my_product_management_svc.product;
+
+public record ProductDto(
+        Long categoryId,
+        String name,
+        String description,
+        Double price,
+        Integer stockCount,
+        Status status
+) {
+}
+
+```
+
+### 7. Creating Service Layer (60 minutes)
+
+- Deep dive into creating service layer.
+- Create CategoryService.java class under category package.
+- Create ProductService.java class under product package.
+- Discuss what is service layer and basic CRUD logics.
+
+#### Category Service
+
+##### i. Importing necessary packages and classes
+
+```
+package com.ctsb.my_product_management_svc.category;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.time.LocalDateTime;
+import java.util.List;
+```
+
+##### ii. Adding necessary annotations
+
+```
+@Service
+@AllArgsConstructor // Lombok annotation for constructor-based dependency injection
+```
+
+##### iii. Calling repository and declare error message
+
+```
+public class CategoryService {
+
+    private final CategoryRepository categoryRepository; // Handles database operations
+    private static final String NOT_FOUND = "Category with %s id is not found!"; // Error message template
+}
+```
+
+##### iv. Creating mapper method for create operation
+
+```
+    // Maps DTO to Entity
+    private Category mapper(CategoryDto categoryDto){
+        var category = new Category();
+        category.setName(categoryDto.name());
+        category.setDescription(categoryDto.description());
+        category.setActive(categoryDto.active());
+        return category;
+    }
+```
+
+##### v. Creating logics for CRUD operations
+
+```
+    // Get all categories
+    public List <Category> findAll(){
+            return categoryRepository.findAll();
+        }
+
+    // Get single category by ID (throws 404 if not found)
+    public Category findById(Long id){
+        return categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+    }
+
+    // Create new category with current timestamp
+    public Category create(CategoryDto categoryDto){
+        Category category = mapper(categoryDto);
+        category.setCreatedAt(LocalDateTime.now());
+        category.setUpdatedAt(null);
+        return categoryRepository.save(category);
+    }
+
+    // Update existing category (partial update)
+    public Category update(Long id, CategoryDto categoryDto){
+
+        // Reuse findById for 404 check
+        Category existingCategory = categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+
+        // Only update non-null fields from DTO
+        if(categoryDto.name() != null){
+            existingCategory.setName(categoryDto.name());
+        }
+        if(categoryDto.description() != null){
+            existingCategory.setDescription(categoryDto.description());
+        }
+        if(categoryDto.active() != null){
+            existingCategory.setActive(categoryDto.active());
+        }
+
+        existingCategory.setUpdatedAt(LocalDateTime.now());
+        return categoryRepository.save(existingCategory);
+    }
+
+     // Delete category by ID (throws 404 if not found)
+    public void delete(Long id){
+
+        // Reuse findById for 404 check
+        Category category = categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        categoryRepository.deleteById(id);
+    }
+```
+
+<details>
+
+<summary> Full code of Category Service </summary>
+
+```Java
+package com.ctsb.my_product_management_svc.category;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.web.server.ResponseStatusException;
+import java.time.LocalDateTime;
+import java.util.List;
+
+@Service
+@AllArgsConstructor
+public class CategoryService {
+
+    private final CategoryRepository categoryRepository;
+    private static final String NOT_FOUND = "Category with %s id is not found!";
+
+    public List <Category> findAll(){
+        return categoryRepository.findAll();
+    }
+
+    public Category findById(Long id){
+        return categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+    }
+
+    public Category create(CategoryDto categoryDto){
+        Category category = mapper(categoryDto);
+        category.setCreatedAt(LocalDateTime.now());
+        category.setUpdatedAt(null);
+        return categoryRepository.save(category);
+    }
+
+    public Category update(Long id, CategoryDto categoryDto){
+        Category existingCategory = categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        if(categoryDto.name() != null){
+            existingCategory.setName(categoryDto.name());
+        }
+        if(categoryDto.description() != null){
+            existingCategory.setDescription(categoryDto.description());
+        }
+        if(categoryDto.active() != null){
+            existingCategory.setActive(categoryDto.active());
+        }
+        existingCategory.setUpdatedAt(LocalDateTime.now());
+        return categoryRepository.save(existingCategory);
+    }
+
+    public void delete(Long id){
+        Category category = categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        categoryRepository.deleteById(id);
+    }
+
+    private Category mapper(CategoryDto categoryDto){
+        var category = new Category();
+        category.setName(categoryDto.name());
+        category.setDescription(categoryDto.description());
+        category.setActive(categoryDto.active());
+        return category;
+    }
+}
+
+```
+
+</details>
+
+#### Product Service
+
+##### i. Importing necessary packages and classes
+
+```
+package com.ctsb.my_product_management_svc.product;
+
+import com.ctsb.my_product_management_svc.category.Category;
+import com.ctsb.my_product_management_svc.category.CategoryRepository;
+import lombok.AllArgsConstructor;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.web.server.ResponseStatusException;
+import java.time.LocalDateTime;
+import java.util.List;
+```
+
+##### ii. Adding necessary annotations
+
+```
+@Service
+@AllArgsConstructor
+```
+
+##### iii. Calling repository and declare error message
+
+```
+public class ProductService {
+
+    private final ProductRepository productRepository;  // Handles product database operations
+    private final CategoryRepository categoryRepository;    // Handles category lookups
+    private static final String NOT_FOUND = "Product with %s id is not found!"; // Error message template
+}
+```
+
+##### iv. Creating mapper method for create operation
+
+```
+     // Maps DTO to Product entity (without category)
+    private Product mapper(ProductDto productDto){
+        var product = new Product();
+        product.setName(productDto.name());
+        product.setDescription(productDto.description());
+        product.setPrice(productDto.price());
+        product.setStockCount(productDto.stockCount());
+        product.setStatus(productDto.status());
+        return product;
+    }
+```
+
+##### v. Creating logics for CRUD operations
+
+```
+    // Get all products
+    public List<Product> findAll(){
+        return productRepository.findAll();
+    }
+
+    // Get single product by ID (throws 404 if not found)
+    public Product findById(Long id){
+        return productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+    }
+
+    // Create new product with category association
+    public Product create(ProductDto productDto){
+
+        // Verify category exists
+        Category category = categoryRepository.findById(productDto.categoryId()).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND,"Category not found!")
+        );
+        Product product = mapper(productDto);
+        product.setCategory(category);  // Set category relationship
+        product.setCreatedAt(LocalDateTime.now());
+        product.setUpdatedAt(null);
+        return productRepository.save(product);
+    }
+
+     // Update existing product (partial update)
+    public Product update(Long id, ProductDto productDto){
+
+        // Verify product exists
+        Product existingProduct = productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+
+        // Verify new category exists if being updated
+        Category category = categoryRepository.findById(productDto.categoryId()).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Category not found!")
+        );
+
+        // Update only non-null fields from DTO
+        if(productDto.categoryId() != null){
+            existingProduct.setCategory(category);
+        }
+        if(productDto.name() != null){
+            existingProduct.setName(productDto.name());
+        }
+        if(productDto.description() != null){
+            existingProduct.setDescription(productDto.description());
+        }
+        if(productDto.price() != null){
+            existingProduct.setPrice(productDto.price());
+        }
+        if(productDto.stockCount() != null){
+            existingProduct.setStockCount(productDto.stockCount());
+        }
+        if(productDto.status() != null){
+            existingProduct.setStatus(productDto.status());
+        }
+        if(existingProduct.getCreatedAt() != null){
+            existingProduct.setCreatedAt(LocalDateTime.now());
+        }
+        existingProduct.setUpdatedAt(LocalDateTime.now());
+        return productRepository.save(existingProduct);
+    }
+
+    // Delete product by ID (throws 404 if not found)
+    public void delete(Long id){
+
+        // Verify exists before delete
+        Product product = productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        productRepository.deleteById(id);
+    }
+```
+
+<details>
+
+<summary> Full code of Product Service </summary>
+
+```Java
+package com.ctsb.my_product_management_svc.product;
+
+import com.ctsb.my_product_management_svc.category.Category;
+import com.ctsb.my_product_management_svc.category.CategoryRepository;
+import lombok.AllArgsConstructor;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.web.server.ResponseStatusException;
+import java.time.LocalDateTime;
+import java.util.List;
+
+@Service
+@AllArgsConstructor
+public class ProductService {
+
+    private final ProductRepository productRepository;
+    private final CategoryRepository categoryRepository;
+    private static final String NOT_FOUND = "Product with %s id is not found!";
+
+    public List<Product> findAll(){
+        return productRepository.findAll();
+    }
+
+    public Product findById(Long id){
+        return productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+    }
+
+    public Product create(ProductDto productDto){
+        Category category = categoryRepository.findById(productDto.categoryId()).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND,"Category not found!")
+        );
+        Product product = mapper(productDto);
+        product.setCategory(category);
+        product.setCreatedAt(LocalDateTime.now());
+        product.setUpdatedAt(null);
+        return productRepository.save(product);
+    }
+
+    public Product update(Long id, ProductDto productDto){
+        Product existingProduct = productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        Category category = categoryRepository.findById(productDto.categoryId()).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Category not found!")
+        );
+        if(productDto.categoryId() != null){
+            existingProduct.setCategory(category);
+        }
+        if(productDto.name() != null){
+            existingProduct.setName(productDto.name());
+        }
+        if(productDto.description() != null){
+            existingProduct.setDescription(productDto.description());
+        }
+        if(productDto.price() != null){
+            existingProduct.setPrice(productDto.price());
+        }
+        if(productDto.stockCount() != null){
+            existingProduct.setStockCount(productDto.stockCount());
+        }
+        if(productDto.status() != null){
+            existingProduct.setStatus(productDto.status());
+        }
+        if(existingProduct.getCreatedAt() != null){
+            existingProduct.setCreatedAt(LocalDateTime.now());
+        }
+        existingProduct.setUpdatedAt(LocalDateTime.now());
+        return productRepository.save(existingProduct);
+    }
+
+    public void delete(Long id){
+        Product product = productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        productRepository.deleteById(id);
+    }
+
+    private Product mapper(ProductDto productDto){
+        var product = new Product();
+        product.setName(productDto.name());
+        product.setDescription(productDto.description());
+        product.setPrice(productDto.price());
+        product.setStockCount(productDto.stockCount());
+        product.setStatus(productDto.status());
+        return product;
+    }
+}
+
+```
+
+</details>
+
+### 8. Creating Controller Layer (45 minutes)
+
+- Deep dive into creating controller layer.
+- Create CategoryController.java class under category package.
+- Create ProductController.java class under product package.
+- Discuss what is controller layer and RESTful APIs.
+
+#### Category Controller
+
+##### i. Importing necessary packages and classes
+
+```
+package com.ctsb.my_product_management_svc.category;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import java.util.List;
+```
+
+##### ii. Adding necessary annotations
+
+```
+@RestController
+@RequestMapping("/categories")  // Base path for all endpoints in this controller
+@AllArgsConstructor
+```
+
+##### iii. Calling category service class
+
+```
+public class CategoryController {
+
+    private final CategoryService categoryService;  // Handles business logic
+}
+```
+
+##### iv. Creating endpoints for logic in service layer
+
+```
+    // GET endpoint to retrieve all categories
+    @GetMapping("/find")
+    public ResponseEntity<List<Category>> findAll(){
+        List<Category> categories = categoryService.findAll();
+        return ResponseEntity.ok(categories);
+    }
+
+    // GET endpoint to retrieve a single category by ID
+    @GetMapping("/find/{id}")
+    public ResponseEntity<Category>findById(@PathVariable Long id){
+        Category category = categoryService.findById(id);
+        return ResponseEntity.ok(category);
+    }
+
+    // POST endpoint to create a new category
+    @PostMapping("/add")
+    public ResponseEntity<Category> create(@RequestBody CategoryDto categoryDto){
+        Category category = categoryService.create(categoryDto);
+        return ResponseEntity.ok(category);
+    }
+
+    // PUT endpoint to update an existing category
+    @PutMapping("/update/{id}")
+    public ResponseEntity<Category> update(@PathVariable Long id, @RequestBody CategoryDto categoryDto){
+        Category category = categoryService.update(id, categoryDto);
+        return ResponseEntity.ok(category);
+    }
+
+    // DELETE endpoint to remove a category
+    @DeleteMapping("/delete/{id}")
+   public ResponseEntity<String> delete(@PathVariable Long id){
+        categoryService.delete(id);
+        return ResponseEntity.ok("Category deleted!");
+    }
+```
+
+<details>
+
+<summary> Full code for Category Controller </summary>
+
+```Java
+package com.ctsb.my_product_management_svc.category;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import java.util.List;
+
+@RestController
+@RequestMapping("/categories")
+@AllArgsConstructor
+public class CategoryController {
+
+    private final CategoryService categoryService;
+
+    @GetMapping("/find")
+    public ResponseEntity<List<Category>> findAll(){
+        List<Category> categories = categoryService.findAll();
+        return ResponseEntity.ok(categories);
+    }
+
+    @GetMapping("/find/{id}")
+    public ResponseEntity<Category>findById(@PathVariable Long id){
+        Category category = categoryService.findById(id);
+        return ResponseEntity.ok(category);
+    }
+
+    @PostMapping("/add")
+    public ResponseEntity<Category> create(@RequestBody CategoryDto categoryDto){
+        Category category = categoryService.create(categoryDto);
+        return ResponseEntity.ok(category);
+    }
+
+    @PutMapping("/update/{id}")
+    public ResponseEntity<Category> update(@PathVariable Long id, @RequestBody CategoryDto categoryDto){
+        Category category = categoryService.update(id, categoryDto);
+        return ResponseEntity.ok(category);
+    }
+
+    @DeleteMapping("/delete/{id}")
+   public ResponseEntity<String> delete(@PathVariable Long id){
+        categoryService.delete(id);
+        return ResponseEntity.ok("Category deleted!");
+    }
+}
+
+```
+
+</details>
+
+#### Product Controller
+
+##### i. Importing necessary packages and classes
+
+```
+package com.ctsb.my_product_management_svc.product;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import java.util.List;
+```
+
+##### ii. Adding necessary annotations
+
+```
+@RestController
+@RequestMapping("/products")
+@AllArgsConstructor
+```
+
+##### iii. Calling product service class
+
+```
+public class ProductController {
+
+    private final ProductService productService;    // Handles business logic
+}
+```
+
+##### iv. Creating endpoints for logic in service layer
+
+```
+    // GET endpoint to retrieve all products
+    @GetMapping("/find")
+    public ResponseEntity<List<Product>> findAll(){
+        List<Product> products = productService.findAll();
+        return ResponseEntity.ok(products);
+    }
+
+    // GET endpoint to retrieve a single product by ID
+    @GetMapping("/find/{id}")
+    public ResponseEntity<Product> findById(@PathVariable Long id){
+        Product product = productService.findById(id);
+        return ResponseEntity.ok(product);
+    }
+
+     // Post endpoint to create a new product
+    @PostMapping("/add")
+    public ResponseEntity<Product> create(@RequestBody ProductDto productDto){
+        Product product = productService.create(productDto);
+        return ResponseEntity.ok(product);
+    }
+
+    // PUT endpoint to update an existing product
+    @PutMapping("/update/{id}")
+    public ResponseEntity<Product> update(
+            @PathVariable Long id,
+            @RequestBody ProductDto productDto
+    ){
+        Product product = productService.update(id,productDto);
+        return ResponseEntity.ok(product);
+    }
+
+    // DELETE endpoint to remove a product
+    @DeleteMapping("/delete/{id}")
+    public ResponseEntity<String> delete(@PathVariable Long id){
+        productService.delete(id);
+        return ResponseEntity.ok("Product deleted!");
+    }
+```
+
+<details>
+
+<summary> Full code for Product Controller </summary>
+
+```Java
+package com.ctsb.my_product_management_svc.product;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import java.util.List;
+
+@RestController
+@RequestMapping("/products")
+@AllArgsConstructor
+public class ProductController {
+
+    private final ProductService productService;
+
+    @GetMapping("/find")
+    public ResponseEntity<List<Product>> findAll(){
+        List<Product> products = productService.findAll();
+        return ResponseEntity.ok(products);
+    }
+
+    @GetMapping("/find/{id}")
+    public ResponseEntity<Product> findById(@PathVariable Long id){
+        Product product = productService.findById(id);
+        return ResponseEntity.ok(product);
+    }
+
+    @PostMapping("/add")
+    public ResponseEntity<Product> create(@RequestBody ProductDto productDto){
+        Product product = productService.create(productDto);
+        return ResponseEntity.ok(product);
+    }
+
+    @PutMapping("/update/{id}")
+    public ResponseEntity<Product> update(
+            @PathVariable Long id,
+            @RequestBody ProductDto productDto
+    ){
+        Product product = productService.update(id,productDto);
+        return ResponseEntity.ok(product);
+    }
+
+    @DeleteMapping("/delete/{id}")
+    public ResponseEntity<String> delete(@PathVariable Long id){
+        productService.delete(id);
+        return ResponseEntity.ok("Product deleted!");
+    }
+}
+
+```
+
+</details>
+
+### 9. OpenApi Configuration (30 minutes)
+
+- Deep dive into OpenApi condiguration and documentation.
+- Create OpenApiConfig.java class under config package.
+- Create SwaggerConfig.java class under config package.
+- Discuss what is OpenApi and Swagger UI.
+
+#### Adding Dependency
+
+- Add OpenApi dependency in build.gradle file.
+- Build the project file.
+
+```
+dependencies {
+	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
+	implementation 'org.springframework.boot:spring-boot-starter-web'
+	implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.8.5' // Add this dependency
+	compileOnly 'org.projectlombok:lombok'
+	runtimeOnly 'com.mysql:mysql-connector-j'
+	annotationProcessor 'org.projectlombok:lombok'
+	testImplementation 'org.springframework.boot:spring-boot-starter-test'
+	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
+}
+```
+
+#### Setting up OpenApiConfig file
+
+##### i. Packages and classes
+
+```
+package com.ctsb.my_product_management_svc.config;
+
+import io.swagger.v3.oas.annotations.OpenAPIDefinition;
+import io.swagger.v3.oas.annotations.enums.SecuritySchemeType;
+import io.swagger.v3.oas.annotations.info.Contact;
+import io.swagger.v3.oas.annotations.info.Info;
+import io.swagger.v3.oas.annotations.info.License;
+import io.swagger.v3.oas.annotations.security.SecurityRequirement;
+import io.swagger.v3.oas.annotations.security.SecurityScheme;
+```
+
+##### ii. OpenApi Definition
+
+```
+@OpenAPIDefinition(
+        info = @Info(
+                                                                                        // Contact information for support
+                contact = @Contact(
+                        name = "Thaswin Muralikaran",
+                        email = "thaswin@cybersolution.com.my",
+                        url = "https://cybersolution.com.my/"
+                ),
+                                                                                        //Detailed API description
+                description = "OpenApi documentation for Product Management System",
+                title = "OpenApi specification - Product Management Service",
+                version = "1.0",                                                        //Versioning information
+                license = @License(
+                                                                                        //Licensing details
+                        name = "Cybersolution Technologies Sdn Bhd",
+                        url = "https://cybersolution.com.my/"
+                ),
+                termsOfService = "Terms of service"
+        ),
+        security = {                                                                     // Applies security to all endpoints
+                @SecurityRequirement(
+                        name = "bearerAuth"
+                )
+        }
+)
+```
+
+##### iii. Security Configuration
+
+```
+@SecurityScheme(
+        name = "bearerAuth",                                // Name referenced in SecurityRequirement
+        description = "Input JWT token for authentication",
+        type = SecuritySchemeType.HTTP,                     // Uses HTTP authentication
+        scheme = "bearer",                                  // Bearer token scheme
+        bearerFormat = "JWT"                                // Specifies JWT token format
+)
+```
+
+##### iii. OpenApi config class
+
+```
+public class OpenApiConfig {
+    // Configuration-only class - no methods needed
+    // Spring will automatically pick up these annotations
+}
+```
+
+<details>
+
+<summary> Full code of OpenApi configuration </summary>
+
+```Java
+package com.ctsb.my_product_management_svc.config;
+
+import io.swagger.v3.oas.annotations.OpenAPIDefinition;
+import io.swagger.v3.oas.annotations.enums.SecuritySchemeType;
+import io.swagger.v3.oas.annotations.info.Contact;
+import io.swagger.v3.oas.annotations.info.Info;
+import io.swagger.v3.oas.annotations.info.License;
+import io.swagger.v3.oas.annotations.security.SecurityRequirement;
+import io.swagger.v3.oas.annotations.security.SecurityScheme;
+
+@OpenAPIDefinition(
+        info = @Info(
+                contact = @Contact(
+                        name = "Thaswin Muralikaran",
+                        email = "thaswin@cybersolution.com.my",
+                        url = "https://cybersolution.com.my/"
+                ),
+                description = "OpenApi documentation for Product Management System",
+                title = "OpenApi specification - Product Management Service",
+                version = "1.0",
+                license = @License(
+                        name = "Cybersolution Technologies Sdn Bhd",
+                        url = "https://cybersolution.com.my/"
+                ),
+                termsOfService = "Terms of service"
+        ),
+        security = {
+                @SecurityRequirement(
+                        name = "bearerAuth"
+                )
+        }
+)
+@SecurityScheme(
+        name = "bearerAuth",
+        description = "Input JWT token for authentication",
+        type = SecuritySchemeType.HTTP,
+        scheme = "bearer",
+        bearerFormat = "JWT"
+)
+public class OpenApiConfig {
+}
+
+```
+
+</details>
+
+#### Setting up SwaggerConfig file
+
+```Java
+package com.ctsb.my_product_management_svc.config;
+
+import io.swagger.v3.oas.models.OpenAPI;
+import io.swagger.v3.oas.models.info.Info;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration                   // Marks this as a Spring configuration class
+public class SwaggerConfig {
+
+     /*
+     * Creates and configures the OpenAPI documentation bean
+     * @return Configured OpenAPI instance with basic API info
+     */
+
+    @Bean
+    public OpenAPI customOpenApi(){
+        return new OpenAPI().info(new Info()
+        .title("Product Management API")        // Sets the API title
+        .version("1.0"));                        // Sets the API version
+    }
+}
+
+```
+
+#### Swagger UI
+
+- Upon completing the OpenApi Configuration the API endpoints can be tested.
+- The API endpoints will be tested here.
+- Below shows the interface of Swagger, endpoints, and the response from a GET endpoint.
+
+![User Interface of Swagger](swaggerUI.png)
+
+![API Endpoints](endpoints.png)
+
+![GET Response](response.png)
+
+## 10. Conclusion (15 minutes)
+
+- Recap the key concepts covered.
+- Q&A session to address any doubts or questions.
+
+## Resources:
+
+- [Spring Initializr](https://start.spring.io/)
+- [MySQL Workbench](https://dev.mysql.com/downloads/workbench/)
+- [OpenApi Specification](https://swagger.io/specification/)
+
+This 3.5-hour intensive module provides students with complete mastery of Spring Boot backend development, including entity relationships, RESTful API design, and CRUD operations implementation, with dedicated hands-on experience and coverage of advanced techniques.

productSvc/build.gradle

+plugins {
+	id 'java'
+	id 'org.springframework.boot' version '3.4.4'
+	id 'io.spring.dependency-management' version '1.1.7'
+}
+
+group = 'com.example'
+version = '0.0.1-SNAPSHOT'
+
+java {
+	toolchain {
+		languageVersion = JavaLanguageVersion.of(21)
+	}
+}
+
+configurations {
+	compileOnly {
+		extendsFrom annotationProcessor
+	}
+}
+
+repositories {
+	mavenCentral()
+}
+
+dependencies {
+	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
+	implementation 'org.springframework.boot:spring-boot-starter-web'
+	implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.8.5'
+	compileOnly 'org.projectlombok:lombok'
+	runtimeOnly 'com.mysql:mysql-connector-j'
+	annotationProcessor 'org.projectlombok:lombok'
+	testImplementation 'org.springframework.boot:spring-boot-starter-test'
+	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
+}
+
+tasks.named('test') {
+	useJUnitPlatform()
+}
+
+
+jar {
+    enabled = false
+}
\ No newline at end of file

productSvc/gradle/wrapper/gradle-wrapper.properties

+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

productSvc/gradlew

+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

productSvc/gradlew.bat

+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

productSvc/settings.gradle

+rootProject.name = 'my-product-management-svc'

productSvc/src/main/java/com/ctsb/my_product_management_svc/MyProductManagementSvcApplication.java

+package com.ctsb.my_product_management_svc;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class MyProductManagementSvcApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(MyProductManagementSvcApplication.class, args);
+	}
+
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/category/Category.java

+package com.ctsb.my_product_management_svc.category;
+
+import com.ctsb.my_product_management_svc.product.Product;
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+
+@Getter
+@Setter
+@Entity
+@Table(name = "category")
+public class Category {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "id", nullable = false)
+    private Long id;
+
+    @Column(nullable = false, unique = true)
+    private String name;
+
+    private String description;
+    private Boolean active;
+
+    @CreationTimestamp
+    private LocalDateTime createdAt;
+
+    @UpdateTimestamp
+    private LocalDateTime updatedAt;
+
+    @OneToMany(mappedBy = "category", orphanRemoval = true)
+    @JsonIgnore
+    private List<Product> products = new ArrayList<>();
+}
\ No newline at end of file

productSvc/src/main/java/com/ctsb/my_product_management_svc/category/CategoryController.java

+package com.ctsb.my_product_management_svc.category;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import java.util.List;
+
+@RestController
+@RequestMapping("/categories")
+@AllArgsConstructor
+public class CategoryController {
+
+    private final CategoryService categoryService;
+
+    @GetMapping("/find")
+    public ResponseEntity<List<Category>> findAll(){
+        List<Category> categories = categoryService.findAll();
+        return ResponseEntity.ok(categories);
+    }
+
+    @GetMapping("/find/{id}")
+    public ResponseEntity<Category>findById(@PathVariable Long id){
+        Category category = categoryService.findById(id);
+        return ResponseEntity.ok(category);
+    }
+
+    @PostMapping("/add")
+    public ResponseEntity<Category> create(@RequestBody CategoryDto categoryDto){
+        Category category = categoryService.create(categoryDto);
+        return ResponseEntity.ok(category);
+    }
+
+    @PutMapping("/update/{id}")
+    public ResponseEntity<Category> update(@PathVariable Long id, @RequestBody CategoryDto categoryDto){
+        Category category = categoryService.update(id, categoryDto);
+        return ResponseEntity.ok(category);
+    }
+
+    @DeleteMapping("/delete/{id}")
+   public ResponseEntity<String> delete(@PathVariable Long id){
+        categoryService.delete(id);
+        return ResponseEntity.ok("Category deleted!");
+    }
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/category/CategoryDto.java

+package com.ctsb.my_product_management_svc.category;
+
+public record CategoryDto(
+        String name,
+        String description,
+        Boolean active
+) {
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/category/CategoryRepository.java

+package com.ctsb.my_product_management_svc.category;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface CategoryRepository extends JpaRepository<Category, Long> {
+}
\ No newline at end of file

productSvc/src/main/java/com/ctsb/my_product_management_svc/category/CategoryService.java

+package com.ctsb.my_product_management_svc.category;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.web.server.ResponseStatusException;
+import java.time.LocalDateTime;
+import java.util.List;
+
+@Service
+@AllArgsConstructor
+public class CategoryService {
+
+    private final CategoryRepository categoryRepository;
+    private static final String NOT_FOUND = "Category with %s id is not found!";
+
+    public List <Category> findAll(){
+        return categoryRepository.findAll();
+    }
+
+    public Category findById(Long id){
+        return categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+    }
+
+    public Category create(CategoryDto categoryDto){
+        Category category = mapper(categoryDto);
+        category.setCreatedAt(LocalDateTime.now());
+        category.setUpdatedAt(null);
+        return categoryRepository.save(category);
+    }
+
+    public Category update(Long id, CategoryDto categoryDto){
+        Category existingCategory = categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        if(categoryDto.name() != null){
+            existingCategory.setName(categoryDto.name());
+        }
+        if(categoryDto.description() != null){
+            existingCategory.setDescription(categoryDto.description());
+        }
+        if(categoryDto.active() != null){
+            existingCategory.setActive(categoryDto.active());
+        }
+        existingCategory.setUpdatedAt(LocalDateTime.now());
+        return categoryRepository.save(existingCategory);
+    }
+
+    public void delete(Long id){
+        Category category = categoryRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        categoryRepository.deleteById(id);
+    }
+
+    private Category mapper(CategoryDto categoryDto){
+        var category = new Category();
+        category.setName(categoryDto.name());
+        category.setDescription(categoryDto.description());
+        category.setActive(categoryDto.active());
+        return category;
+    }
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/config/OpenApiConfig.java

+package com.ctsb.my_product_management_svc.config;
+
+import io.swagger.v3.oas.annotations.OpenAPIDefinition;
+import io.swagger.v3.oas.annotations.enums.SecuritySchemeType;
+import io.swagger.v3.oas.annotations.info.Contact;
+import io.swagger.v3.oas.annotations.info.Info;
+import io.swagger.v3.oas.annotations.info.License;
+import io.swagger.v3.oas.annotations.security.SecurityRequirement;
+import io.swagger.v3.oas.annotations.security.SecurityScheme;
+
+@OpenAPIDefinition(
+        info = @Info(
+                contact = @Contact(
+                        name = "Thaswin Muralikaran",
+                        email = "thaswin@cybersolution.com.my",
+                        url = "https://cybersolution.com.my/"
+                ),
+                description = "OpenApi documentation for Product Management System",
+                title = "OpenApi specification - Product Management Service",
+                version = "1.0",
+                license = @License(
+                        name = "Cybersolution Technologies Sdn Bhd",
+                        url = "https://cybersolution.com.my/"
+                ),
+                termsOfService = "Terms of service"
+        ),
+        security = {
+                @SecurityRequirement(
+                        name = "bearerAuth"
+                )
+        }
+)
+@SecurityScheme(
+        name = "bearerAuth",
+        description = "Input JWT token for authentication",
+        type = SecuritySchemeType.HTTP,
+        scheme = "bearer",
+        bearerFormat = "JWT"
+)
+public class OpenApiConfig {
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/config/SwaggerConfig.java

+package com.ctsb.my_product_management_svc.config;
+
+import io.swagger.v3.oas.models.OpenAPI;
+import io.swagger.v3.oas.models.info.Info;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+public class SwaggerConfig {
+
+    @Bean
+    public OpenAPI customOpenApi(){
+        return new OpenAPI().info(new Info().title("Product Management API").version("1.0"));
+    }
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/product/Product.java

+package com.ctsb.my_product_management_svc.product;
+
+import com.ctsb.my_product_management_svc.category.Category;
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+import java.time.LocalDateTime;
+
+@Getter
+@Setter
+@Entity
+@Table(name = "product")
+public class Product {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "id", nullable = false)
+    private Long id;
+
+    private String name;
+    private String description;
+    private Double price;
+    private Integer stockCount;
+
+    @Enumerated(EnumType.STRING)
+    private Status status;
+
+    @CreationTimestamp
+    private LocalDateTime createdAt;
+
+    @UpdateTimestamp
+    private LocalDateTime updatedAt;
+
+    @ManyToOne
+    @JoinColumn(name = "category_id", nullable = false)
+    @JsonIgnore
+    private Category category;
+
+}
\ No newline at end of file

productSvc/src/main/java/com/ctsb/my_product_management_svc/product/ProductController.java

+package com.ctsb.my_product_management_svc.product;
+
+import lombok.AllArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import java.util.List;
+
+@RestController
+@RequestMapping("/products")
+@AllArgsConstructor
+public class ProductController {
+
+    private final ProductService productService;
+
+    @GetMapping("/find")
+    public ResponseEntity<List<Product>> findAll(){
+        List<Product> products = productService.findAll();
+        return ResponseEntity.ok(products);
+    }
+
+    @GetMapping("/find/{id}")
+    public ResponseEntity<Product> findById(@PathVariable Long id){
+        Product product = productService.findById(id);
+        return ResponseEntity.ok(product);
+    }
+
+    @PostMapping("/add")
+    public ResponseEntity<Product> create(@RequestBody ProductDto productDto){
+        Product product = productService.create(productDto);
+        return ResponseEntity.ok(product);
+    }
+
+    @PutMapping("/update/{id}")
+    public ResponseEntity<Product> update(
+            @PathVariable Long id,
+            @RequestBody ProductDto productDto
+    ){
+        Product product = productService.update(id,productDto);
+        return ResponseEntity.ok(product);
+    }
+
+    @DeleteMapping("/delete/{id}")
+    public ResponseEntity<String> delete(@PathVariable Long id){
+        productService.delete(id);
+        return ResponseEntity.ok("Product deleted!");
+    }
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/product/ProductDto.java

+package com.ctsb.my_product_management_svc.product;
+
+public record ProductDto(
+        Long categoryId,
+        String name,
+        String description,
+        Double price,
+        Integer stockCount,
+        Status status
+) {
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/product/ProductRepository.java

+package com.ctsb.my_product_management_svc.product;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface ProductRepository extends JpaRepository<Product, Long> {
+}
\ No newline at end of file

productSvc/src/main/java/com/ctsb/my_product_management_svc/product/ProductService.java

+package com.ctsb.my_product_management_svc.product;
+
+import com.ctsb.my_product_management_svc.category.Category;
+import com.ctsb.my_product_management_svc.category.CategoryRepository;
+import lombok.AllArgsConstructor;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.web.server.ResponseStatusException;
+import java.time.LocalDateTime;
+import java.util.List;
+
+@Service
+@AllArgsConstructor
+public class ProductService {
+
+    private final ProductRepository productRepository;
+    private final CategoryRepository categoryRepository;
+    private static final String NOT_FOUND = "Product with %s id is not found!";
+
+    public List<Product> findAll(){
+        return productRepository.findAll();
+    }
+
+    public Product findById(Long id){
+        return productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+    }
+
+    public Product create(ProductDto productDto){
+        Category category = categoryRepository.findById(productDto.categoryId()).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND,"Category not found!")
+        );
+        Product product = mapper(productDto);
+        product.setCategory(category);
+        product.setCreatedAt(LocalDateTime.now());
+        product.setUpdatedAt(null);
+        return productRepository.save(product);
+    }
+
+    public Product update(Long id, ProductDto productDto){
+        Product existingProduct = productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        Category category = categoryRepository.findById(productDto.categoryId()).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Category not found!")
+        );
+        if(productDto.categoryId() != null){
+            existingProduct.setCategory(category);
+        }
+        if(productDto.name() != null){
+            existingProduct.setName(productDto.name());
+        }
+        if(productDto.description() != null){
+            existingProduct.setDescription(productDto.description());
+        }
+        if(productDto.price() != null){
+            existingProduct.setPrice(productDto.price());
+        }
+        if(productDto.stockCount() != null){
+            existingProduct.setStockCount(productDto.stockCount());
+        }
+        if(productDto.status() != null){
+            existingProduct.setStatus(productDto.status());
+        }
+        if(existingProduct.getCreatedAt() != null){
+            existingProduct.setCreatedAt(LocalDateTime.now());
+        }
+        existingProduct.setUpdatedAt(LocalDateTime.now());
+        return productRepository.save(existingProduct);
+    }
+
+    public void delete(Long id){
+        Product product = productRepository.findById(id).orElseThrow(
+                () -> new ResponseStatusException(HttpStatus.NOT_FOUND, String.format(NOT_FOUND,id))
+        );
+        productRepository.deleteById(id);
+    }
+
+    private Product mapper(ProductDto productDto){
+        var product = new Product();
+        product.setName(productDto.name());
+        product.setDescription(productDto.description());
+        product.setPrice(productDto.price());
+        product.setStockCount(productDto.stockCount());
+        product.setStatus(productDto.status());
+        return product;
+    }
+}

productSvc/src/main/java/com/ctsb/my_product_management_svc/product/Status.java

+package com.ctsb.my_product_management_svc.product;
+
+public enum Status {
+    IN_STOCK,
+    OUT_OF_STOCK,
+    DISCONTINUED
+}

productSvc/src/main/resources/application.properties

+spring.application.name=my-product-management-svc
+server.port=${APP_INTERNAL_PORT:8025}
+server.servlet.context-path=/product-service
+
+spring.datasource.url=jdbc:mysql://${DB_ADDRESS:127.0.0.1}:${DB_PORT:3306}/${DB_NAME:productmngm}?useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
+spring.datasource.username=${DB_USERNAME:root}
+spring.datasource.password=${DB_PASSWORD:01234}
+spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
+
+spring.jpa.show-sql=true
+spring.jpa.hibernate.ddl-auto=update
+
+springdoc.swagger-ui.path=/swagger-ui.html
+springdoc.api-docs.path=/v3/api-docs

productSvc/src/test/java/com/ctsb/my_product_management_svc/MyProductManagementSvcApplicationTests.java

+package com.ctsb.my_product_management_svc;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+class MyProductManagementSvcApplicationTests {
+
+	@Test
+	void contextLoads() {
+	}
+
+}