Updated frontend direcotry structure

frontend/src/App.css

@@ -0,0 +1,11 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.card {
+  padding: 2em;
+}
+

frontend/src/App.tsx

@@ -0,0 +1,18 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Home from './pages/Home';
+import './App.css'
+
+function App() {
+  return (
+    <div className="app-shell">
+      <main className="app-main">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+export default App;

frontend/src/api/api.tsx

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import type { Sticky } from '../types/types';
+
+const fetchStickies = async (): Promise<Sticky[]> => {
+  const response = await fetch('http://localhost:3001/v1/notes');
+  if (!response.ok) {
+    throw new Error('Failed to fetch stickies');
+  }
+  return response.json();
+};
+
+export const useGetStickies = () => {
+  return useQuery<Sticky[]>({
+    queryKey: ['stickies'],
+    queryFn: fetchStickies,
+  });
+};

frontend/src/components/button.tsx

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+const Button = () => {
+    return (
+        <button>
+            Click me
+        </button>
+    );
+};
+
+export default Button;

frontend/src/components/stickies.css

@@ -0,0 +1,7 @@
+.stickies-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  padding: 24px;
+}

frontend/src/components/stickies.tsx

@@ -0,0 +1,20 @@
+import { useGetStickies } from '../api/api';
+import Sticky from './sticky';
+import './stickies.css';
+
+const Stickies = () => {
+  const { data, isLoading, error } = useGetStickies();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div className="stickies-grid">
+      {data?.map((sticky) => (
+        <Sticky key={sticky.id} sticky={sticky} />
+      ))}
+    </div>
+  );
+};
+
+export default Stickies;

frontend/src/components/sticky.tsx

@@ -0,0 +1,43 @@
+import type { Sticky as StickyType } from '../types/types';
+
+const COLOR_MAP: Record<string, string> = {
+  yellow: '#fdfd96',
+  blue: '#a2d2ff',
+  green: '#b5ead7',
+  pink: '#ffb7ce',
+  purple: '#cdb4db',
+  orange: '#ffc09f',
+};
+
+type StickyProps = {
+  sticky: StickyType;
+};
+
+const Sticky = ({ sticky }: StickyProps) => {
+  const backgroundColor = COLOR_MAP[sticky.color] || '#fdfd96';
+
+  return (
+    <div
+      style={{
+        backgroundColor,
+        width: '180px',
+        minHeight: '180px',
+        padding: '16px',
+        borderRadius: '2px',
+        boxShadow: '2px 4px 8px rgba(0, 0, 0, 0.15)',
+        fontFamily: "'Patrick Hand', cursive, system-ui",
+        fontSize: '14px',
+        lineHeight: '1.4',
+        color: '#333',
+        display: 'flex',
+        alignItems: 'flex-start',
+        wordBreak: 'break-word',
+        transform: `rotate(${Math.random() * 4 - 2}deg)`,
+      }}
+    >
+      {sticky.text}
+    </div>
+  );
+};
+
+export default Sticky;

frontend/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

frontend/src/main.tsx

@@ -0,0 +1,18 @@
+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'
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </StrictMode>,
+)

frontend/src/pages/Home.tsx

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

frontend/src/types/types.tsx

@@ -0,0 +1,8 @@
+export type Sticky = {
+  id: string;
+  text: string;
+  x: number;
+  y: number;
+  author: string;
+  color: string;
+};