updated api and components

backend/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "Server part of final project",
   "scripts": {
-    "start": "nodemon server.js --exec babel-node",
+    "start": "node server.js --exec babel-node",
     "dev": "nodemon server.js --exec babel-node",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

frontend/api.js

@@ -0,0 +1 @@
+export const apiUrl = import.meta.env.VITE_API_URL || "http://localhost:8080";

frontend/src/App.jsx

@@ -1,15 +1,33 @@
-import { Routes, Route, Link } from 'react-router-dom'
-import { About } from './pages/AboutPage'
-import { FriendFeed } from './pages/FriendFeedPage'
-import { Home } from './pages/HomePage'
-import { Quests } from './pages/QuestPage'
-import { Rewards } from './pages/RewardPage'
-import { UserProfile } from './pages/UserProfilePage'
-import { Login } from './pages/LoginPage'
-import { GlobalStyle } from './styles/GlobalStyles'
-import { Signup } from './pages/SignupPage'
+import { Routes, Route, Link } from "react-router-dom";
+import { About } from "./pages/AboutPage";
+import { FriendFeed } from "./pages/FriendFeedPage";
+import { Home } from "./pages/HomePage";
+import { Quests } from "./pages/QuestPage";
+import { Rewards } from "./pages/RewardPage";
+import { UserProfile } from "./pages/UserProfilePage";
+import { Login } from "./pages/LoginPage";
+import { GlobalStyle } from "./styles/GlobalStyles";
+import { Signup } from "./pages/SignupPage";
+import { useEffect, useState } from "react";
+import { apiUrl } from "../api";
 
 export const App = () => {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+        console.log("API Response:", data);
+        setData(data);
+      } catch (err) {
+        console.error("Error:", err);
+      }
+    };
+
+    fetchData();
+  }, []);
 
   return (
     <>
@@ -27,4 +45,3 @@ export const App = () => {
     </>
   );
 };
-

frontend/src/components/QuestList.jsx

@@ -1,6 +1,3 @@
 export const QuestList = () => {
-  return (
-    // FIXME map through quests and list them
-    <p>List of quests</p>
-  )
-}
+  return <p>quest list</p>;
+};

frontend/src/pages/HomePage.jsx

@@ -1,8 +1,9 @@
-import { Navbar } from '../components/Navbar'
-import { Header } from '../components/Header'
-import styled from 'styled-components'
-import { CreateQuest } from '../components/CreateQuest'
-import { QuestLibrary } from '../components/QuestLibrary'
+import { Navbar } from "../components/Navbar";
+import { Header } from "../components/Header";
+import styled from "styled-components";
+import { CreateQuest } from "../components/CreateQuest";
+import { QuestLibrary } from "../components/QuestLibrary";
+import { apiUrl } from "../../api";
 
 export const Home = () => {
   return (
@@ -18,14 +19,14 @@ export const Home = () => {
       </Div>
       <QuestLibrary />
     </>
-  )
-}
+  );
+};
 
 const Div = styled.div`
   display: flex;
   background-color: var(--accent-color);
   margin: 10px;
   justify-content: center;
-`
+`;
 
-// TODO: This is home page for logged out user. Decide what to keep there. Simplify? 
+// TODO: This is home page for logged out user. Decide what to keep there. Simplify?

frontend/src/pages/UserProfilePage.jsx

@@ -1,12 +1,12 @@
-import { Navbar } from '../components/Navbar'
-import { Header } from '../components/Header'
-import styled from 'styled-components'
-import { CreateQuest } from '../components/CreateQuest'
-import { QuestLibrary } from '../components/QuestLibrary'
-import { Avatar } from '../components/Avatar'
-import { Strike } from '../components/StrikeDisplay'
-import { Link } from 'react-router-dom'
-import { QuestList } from '../components/QuestList'
+import { Navbar } from "../components/Navbar";
+import { Header } from "../components/Header";
+import styled from "styled-components";
+import { CreateQuest } from "../components/CreateQuest";
+import { QuestLibrary } from "../components/QuestLibrary";
+import { Avatar } from "../components/Avatar";
+import { Strike } from "../components/StrikeDisplay";
+import { Link } from "react-router-dom";
+import { QuestList } from "../components/QuestList";
 
 export const UserProfile = () => {
   return (
@@ -24,12 +24,12 @@ export const UserProfile = () => {
       <QuestLibrary />
       {/* NOTE: hide add quest + list of quests by default? Only show when user clicks button?  */}
     </>
-  )
-}
+  );
+};
 
 const Div = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-`
+`;