more

frontend/.env.development

@@ -0,0 +1,2 @@
+VITE_APP_URL=localhost:3000
+VITE_API_BASE=http://localhost:3001

frontend/.env.production

@@ -0,0 +1,2 @@
+VITE_APP_URL=https://example.com
+VITE_API_BASE=https://www.example.com:4000

frontend/src/api/api.ts

@@ -1,7 +1,7 @@
 import { useQuery, useMutation } from '@tanstack/react-query';
 import type { Sticky, Cluster } from '../types/types';
 
-const API_BASE = 'http://localhost:3001/v1/notes';
+const API_BASE = `${import.meta.env.VITE_API_BASE}/v1/notes`;
 
 const fetchStickies = async (): Promise<Sticky[]> => {
   const response = await fetch(API_BASE);

frontend/src/components/stickies.tsx

@@ -7,7 +7,7 @@ import '../styles/stickies.css';
 const Stickies = () => {
   const { data: stickies, isLoading, error } = useGetStickies();
   const { mutate: cluster, data: clusters, isPending } = useClusterStickies();
-
+   console.log('data, error', stickies, error)
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;
 

frontend/src/styles/home.css

@@ -38,4 +38,37 @@
     'wght' 300,
     'GRAD' 0,
     'opsz' 24
+  }
+
+  @media screen and (max-width: 480px) {
+
+   .main-head-subbox-right {
+      display: none;
+    }
+
+    .main-head-subbox-left {
+      display: flex;
+      justify-content: center;
+      margin-left: auto;
+      margin-right: auto;
+      width: 100%;
+    }
+
+   .main-head {
+      font-size: 4rem;
+      color: #6dd6f4;
+      font-family: "Sulphur Point", sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: auto;
+      margin-right: auto;
+      font-weight: 400;
+      letter-spacing: 2px;
+      text-decoration: underline;
+    }
+
+    .material-symbols-outlined {
+      display: none !important;
+    }
   }