(WIP)made env to frontend for live deployment... working on making a quiz on frontend.

frontend/.env.sample

@@ -0,0 +1 @@
+VITE_REACT_APP_SERVER=<"Your Server (or server's localhost in development)">

frontend/.gitignore

@@ -0,0 +1 @@
+.env

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.11.5",
         "@mui/material": "^5.15.18",
         "axios": "^1.6.8",
+        "dotenv": "^16.4.5",
         "konva": "^9.3.8",
         "nvm": "^0.0.4",
         "react": "^18.2.0",
@@ -2511,6 +2512,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",

frontend/package.json

@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.18",
     "axios": "^1.6.8",
+    "dotenv": "^16.4.5",
     "konva": "^9.3.8",
     "nvm": "^0.0.4",
     "react": "^18.2.0",

frontend/src/components/navbar.jsx

@@ -11,6 +11,7 @@ function NavBar() {
                 <li><Link to='about/'><p className='text-2xl text-white hover:text-red-900'>About</p></Link></li>
                 <li><Link to='effects/'><p className='text-2xl text-white hover:text-red-900'>Effects</p></Link></li>
                 <li><Link to='defenses/'><p className='text-2xl text-white hover:text-red-900'>Defenses</p></Link></li>
+                {/* <li><Link to='quiz/'><p className='text-2xl text-white hover:text-red-900'>Quiz</p></Link></li> */}
             </ul>
         </div>
       </>

frontend/src/pages/quiz.jsx

@@ -0,0 +1,49 @@
+import { useState } from "react"
+import axios from 'axios';
+import { Button } from "@mui/material";
+
+const Quiz = () => {
+  const [clicked, setClicked] = useState(false)
+  const [quiz,setQuiz] = useState(null)
+
+  const handleQuiz = async() => {
+    setClicked(true)
+    try{
+      const newQuiz = await axios(`${import.meta.env.VITE_REACT_APP_SERVER}/api/openai/`)
+      console.log("newQuiz.data :",newQuiz.data)
+      setQuiz(newQuiz.data)
+  }
+    catch {
+      alert("Could not make quiz. Try again")
+    } finally {
+    setClicked(false)  
+    }
+  }
+
+  return (
+    <>
+      <div className='text-white text-center flex flex-col w-1/2'>
+          <div className='m-4'>
+          <p className='text-2xl underline mb-2'>Test Your Knowledge?</p>
+          <p>Deep impact is a web-app designed to give users insight into potential danger of asteroid impact. Using the NASA NeoWs API we have created a simulation tool to visualize incoming asteroids and various methods of asteroid deflection.</p>
+          </div>
+          <div className='m-4'>
+            <Button variant="danger" onClick={handleQuiz}>Start Quiz</Button>
+          <p className='text-2xl underline mb-2'>Our Team</p>
+          {/* <ul>
+            <li>Daniel Smith-dePaz</li>
+            <li>Jordan Yamada</li>
+            <li>Pierre Bell</li>
+            <li>Michael Roy</li>
+            <li>Mickey Shoenberger</li>
+            <li>Jordan Edgington</li>
+          </ul> */}
+          </div>
+          <p className='italic m-4'>The Sky Is Falling!</p>
+          <p className='m-4'>To see learn more about Deep Impact, checkout our <a href='https://github.com/Team-Deep-Impact/Deep-Impact' className='underline hover:text-red-900'>GitHub</a>.</p>
+      </div>
+    </>
+  )
+}
+
+export default Quiz

frontend/src/pages/scenario.jsx

@@ -39,7 +39,7 @@ function Scenario() {
   useEffect(() => {
     const fetchAsteroids = async (self, request) => {
       try {
-        const response = await axios.get(`http://localhost:8000/api/sentry/`);
+        const response = await axios.get(`${import.meta.env.VITE_REACT_APP_SERVER}/api/sentry/`);
         asteroidsData.current = response.data.near_earth_objects;
         setAsteroidData(0); // Set initial asteroid
       } catch (error) {

frontend/src/router.jsx

@@ -6,6 +6,7 @@ import Scenario from "./pages/scenario";
 import About from "./pages/about";
 import Effects from "./pages/effects";
 import Defenses from "./pages/defenses";
+import Quiz from "./pages/quiz";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -30,6 +31,10 @@ const router = createBrowserRouter([
       {
         path: 'defenses/',
         element: <Defenses />
+      },
+      {
+        path: 'quiz/',
+        element: <Quiz />
       }
     ],
   },