Day 3 almost 80% work of the second component is completed and fetched content from NASA API 🌠 and more stuff dohackathon
Tags: dohackathon, react, webdev, showdev
Published: 2021-01-03 15:38:20

Hackathon Journey
hello all 😊👋
In this Day 3(note day3 is just for the name I am working on this stuff since 1 2 weeks) article of the digital Ocean hackathon, I am going to write about how I did things and which things I completed till today so let's jump into the article now.

If you are following this series then you are knowing the first component of this project is ready if you're not following the series then somewhere below you can find the series thing you can check out. 
Today I am going to tell you about the second component as the previous component I solved a major issue related to the **react-router** thing 
here stack overflow link {% stackoverflow 65449405 %} or else you can also check {% link https://dev.to/krishnakakade/d2-the-first-component-of-spacetravel-is-ready-and-fixed-one-headache-issue-n5d %}

and after giving Space.js file after clicking on that now in space component I fetched information from **NASA APOD(astronomy picture of the day)**specific API [nasa APOD API](https://api.nasa.gov/)
look how I did it **space.js**
```js
import React from "react";
import styles from "./Space.module.css";

import {useState,useEffect} from "react";
function Space() {
  const [photoData,setPhotoData]=useState(null);
  useEffect(()=>{
fetchPhoto();
async function fetchPhoto(){
  const res = await fetch(`https://api.nasa.gov/planetary/apod?api_key=`);
  const data=await res.json();
  setPhotoData(data);
  console.log(data);
}
  },[]); //empty array for running only once then empty array for that 
 

  if (!photoData) return <div />;
  
  return (
    <>
    <div className={styles.space}>
      {photoData.media_type === "image" ? (
        <img 
          src={photoData.url}
          alt={photoData.title}
          className={styles.space}
        />
      ) : (
        <iframe
          title="space-video"
          src={photoData.url}
          frameBorder="0"
          gesture="media"
          allow="encrypted-media"
          allowFullScreen
          className={styles.space}
        />
      )}
      <div>
        <h1>{photoData.title}</h1>
        <p className={styles.space.date}>{photoData.date}</p>
        <p className={styles.space.explanation}>{photoData.explanation}</p>
      </div>
      
    </div>
    </>
  );
}
export default Space;
```
**css modules is good option when we work with reactjs**
**Space.module.css**
```js


.space {
  display: flex;
  padding: 40px;
  margin: 0 auto;
  max-height: 100%;
  width: auto;

}

.space img {
  width: 80%;
  margin-right: 50px;
  object-fit: contain;
  max-height: 80vh;

}

.space h1 {
  margin-top: 0;
  margin-bottom: 0;
}

.space date {
  margin-top: 0;
  margin-bottom: 30px;
}

.space explanation {
  color: #bbb;
}

@media (max-width: 1280px) {
  .space {
    display: block;
  }

  .space img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    
  }
}

```
**And now I will show how the second component of an app look like**

![App second componet](https://dev-to-uploads.s3.amazonaws.com/i/zk4q9ty5jsdi0e9z94g0.png)

and now what is remaining in the second component that I will show below 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wxfs1hiv49v1gn9c4oxg.png)
the next thing I working on that {% stackoverflow 65549451 %}
and for text to speech thing one my college friend/brother [Onkar Khedkar](https://www.linkedin.com/in/onkar-khedkar-767476148/) is working on that part because he skilled in that domain and after completing this component one about component will come and after that **spacetravel** will be deployed and made public.
thank you for reading have a nice day all.😊
![GIF](https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif)