Frontend

frontend/.env

@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:9090

frontend/package.json

@@ -12,6 +12,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.7",
     "@types/react-dom": "^19.1.6",
+    "axios": "^1.10.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
@@ -42,7 +43,7 @@
       "last 1 safari version"
     ]
   },
-   "jest": {
+  "jest": {
     "collectCoverageFrom": [
       "src/**/*.tsx"
     ],
@@ -55,5 +56,10 @@
       "html",
       "text"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.tsx

@@ -1,25 +1,10 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import ProductListPage from './pages/ProductListPage';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <ProductListPage></ProductListPage>
   );
 }
 

frontend/src/components/PaginationControls.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+interface Props {
+    filters: any;
+    setFilters: (filters: any) => void;
+    total: number;
+}
+
+const PaginationControls: React.FC<Props> = ({filters, setFilters, total}) => {
+    const page = filters.page || 0;
+    const size = filters.size || 10;
+    const totalPages = Math.ceil(total / size);
+
+    const goToPage = (newPage: number) => {
+        setFilters({...filters, page: newPage});
+    };
+
+    return (
+        <div className="flex justify-between items-center mt-4">
+            <button className="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
+            onClick={() => goToPage(page -1)}
+            disabled={page <=0}>
+                Return
+            </button>
+            <span className="text-sm">
+                Page <strong>{page + 1} of <strong>{totalPages}</strong></strong>
+            </span>
+            <button
+            className="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
+            onClick={() => goToPage(page + 1)}
+            disabled={page + 1 >= totalPages}>
+                Next
+            </button>
+        </div>
+    );
+};
+
+export default PaginationControls;

frontend/src/components/ProductFilters.tsx

@@ -0,0 +1,86 @@
+import React, {useState, useEffect, useCallback} from "react";
+import { getCategories } from "../services/productService";
+
+interface Props {
+    filters: any;
+    setFilters: (filters: any) => void;
+}
+
+const ProductFilters: React.FC<Props> = ({filters, setFilters}) => {
+    const [name, setName] = useState(filters.name || "");
+    const [category, setCategory] = useState<string[]>(filters.category || []);
+    const [availability, setAvailability] = useState(filters.availability || "");
+
+    const [allCategories, setAllCategories] = useState<string[]> ([]);
+
+    useEffect(() => {
+        getCategories().then(setAllCategories).catch(err => {
+            console.error("Error getting categories");
+            setAllCategories([]);
+        });
+    }, []);
+
+    const handleApply = useCallback( () => {
+            setFilters((prevFilters: any) =>({
+            ...prevFilters,
+            name,
+            category,
+            availability: availability === "" ? "" : availability === "in",
+            page: 0,
+        }));
+    }, [setFilters, name, category, availability]);
+
+    const toggleCategory = (value: string) => {
+        setCategory(prev =>
+            prev.includes(value)
+            ? prev.filter(c => c !== value)
+            : [...prev, value]
+        );
+    };
+
+    useEffect(() => {
+        handleApply();
+    }, [handleApply]);
+
+    return (
+        <div className="mb-4 p-4 bg-gray-100 rounded space-y-3">
+            <div>
+                <label className="block text-sm font-semibold">Search by name:</label>
+                <input type="text"
+                value={name}
+                onChange={e => setName(e.target.value)}
+                className="w-full p-2 border rounded"
+                placeholder="Product name..." />
+            </div>
+
+            <div>
+                <label className="block text-sm font-semibold">Filter by category</label>
+                <div className="glex flex-wrap gap-2 mt-1">
+                    {allCategories.map(cat => (
+                        <label key={cat} className="text-sm">
+                            <input type="checkbox"
+                            checked={category.includes(cat)}
+                            onChange={() => toggleCategory(cat)}
+                            className="mr-1" />
+                            {cat}
+                        </label>
+                    ))}
+                </div>
+            </div>
+
+            <div>
+                <label className="block text-sm font-semibold">Availability:</label>
+                <select 
+                value={availability}
+                onChange={e => setAvailability(e.target.value)}
+                className="w-full p-2 border rounded">
+                    <option value="">All</option>
+                    <option value="in">In stock</option>
+                    <option value="out">Out of stock</option>
+                </select>
+            </div>
+        </div>
+    );
+};
+
+export default ProductFilters