building out frontend UI for stickies

frontend/resias/src/components/stickies.tsx

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+
+const fetchStickies = async () => {
+    const response = await fetch('https://<backend-url>/v1/stickies');
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  };
+
+  const Stickies = () => {
+    const { data, isLoading, error } = useQuery({
+        queryKey: ['stickies'],
+        queryFn: fetchStickies,
+    });
+
+    if (isLoading) return <div>Loading...</div>;
+    if (error) return <div>Error: {error.message}</div>;
+
+    return <div>{data.map((sticky: any) => <div key={sticky.id}>{sticky.text}</div>)}</div>;
+  };
+
+  export default Stickies;

frontend/resias/src/main.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css'
 import App from './App.tsx'
 
@@ -9,7 +10,9 @@ const queryClient = new QueryClient();
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
         <App />
+      </BrowserRouter>
     </QueryClientProvider>
   </StrictMode>,
 )

frontend/resias/src/pages/Home.tsx

@@ -1,9 +1,10 @@
-
+import Stickies from '../components/stickies';
 
 const Home = () => {
     return (
         <div>
-            <h1>Home</h1>
+            <h1>Resias - </h1>
+            <Stickies />
         </div>
     );
 };