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

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) {