Completed the project

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.3.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0"

src/App.css

@@ -7,12 +7,6 @@
   pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -28,11 +22,17 @@
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.nasa-photo-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.explanation {
+  max-width: 70%;
 }
+
+img {
+  max-width: 75%;
+  object-fit: cover;
+}

src/App.js

@@ -1,15 +1,23 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
 import "./App.css";
 
+import NasaPhoto from "./Components/NasaPhoto";
+
 function App() {
-  return (
-    <div className="App">
-      <p>
-        Read through the instructions in the README.md file to build your NASA
-        app! Have fun <span role="img" aria-label='go!'>🚀</span>!
-      </p>
-    </div>
-  );
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    axios
+      .get("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
+      .then((res) => {
+        setData(res.data);
+      })
+      .catch((err) => console.error(err));
+  }, []);
+
+  return <div className="App">{data && <NasaPhoto photo={data} />}</div>;
 }
 
 export default App;

src/Components/NasaPhoto.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const NasaPhoto = (props) => {
+  return (
+    <div className="nasa-photo-wrapper">
+      <h3>{props.photo.title}</h3>
+      <p>{props.photo.date}</p>
+      <img src={props.photo.hdurl} />
+      <p className="explanation">{props.photo.explanation}</p>
+    </div>
+  );
+};
+
+export default NasaPhoto;