Update README.md

README.md

@@ -83,8 +83,8 @@ my-product-management-system/
 - Create `CategoryFormClass.js` and `CategoryListClass.js` as class components.
 - Discuss state management, event handling, and lifecycle methods.
  CategoryFormClass.js 
-```bash
 
+```jsx
 import React, { Component } from 'react';
 import { createCategory } from '../../services/ApiCategory';
 
@@ -133,7 +133,9 @@ class CategoryFormClass extends Component {
 
 export default CategoryFormClass;
 ```
+
 CategoryListClass.js
+
 ```jsx
 
 import React, { Component } from 'react';
@@ -247,7 +249,9 @@ export default CategoryListClass;
 - Deep dive into creating functional components with hooks.
 - Create `CategoryFormFunction.js` and `CategoryListFunction.js` as functional components.
 - Discuss useState and useEffect hooks.
+
 CategoryFormFunction.js
+
 ```jsx
 import React, { useState } from 'react';
 import { createCategory } from '../../services/ApiCategory';
@@ -293,7 +297,9 @@ const CategoryFormFunction = ({ fetchCategories }) => {
 
 export default CategoryFormFunction;
 ```
+
 CategoryListFunction.js
+
 ```jsx
 import React, { useEffect, useState } from 'react';
 import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
@@ -414,7 +420,8 @@ export default CategoryListFunction;
 ### 6. Adding CSS (15 minutes)
 - Demonstrate how to add and apply CSS in React.
 - Style the category and product forms.
- Category.css *
+ Category.css 
+
 ```css
   form {
      margin: 20px;
@@ -471,18 +478,19 @@ export default CategoryListFunction;
   .button-update:hover {
     background-color: blue;
   }
-  
 ```
 
 
 ### 7. Break (5 minutes)
 
-### 8. Integrating MockAPI for CRUD Operations (60 minutes)
+### 8. Integrating MockAPI for CRUD Operations (30 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
+
 ApiCategory.js
+
 ```jsx
 const apiUrl = 'https://mockapi.io/endpoint';
 
@@ -517,7 +525,8 @@ export const updateCategory = (id, category) =>
 - 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';
@@ -553,12 +562,16 @@ export default ProductList;
 - 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:
+    -  Replace the content of App.js with the following code:
+   
+   
    ```jsx
    import React from 'react';
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
@@ -599,20 +612,48 @@ export default ProductList;
 - Step-by-Step Instructions:
     -  **Modify App.js:**
     -  Replace code to App.js:
+  
     ```jsx 
-    .App {
-        font-family: sans-serif;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-    }
     
+        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 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>
+          );
+        }
     ```
 
 
    - **Modify App.css:**
    - Add the content of \`App.css\` with the following code:
+   
    ```css 
         .App {
             font-family: sans-serif;
@@ -712,5 +753,5 @@ export default ProductList;
 
 
 
-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.
+This comprehensive 3-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.