A multipage React app that retrieves data from external APIs Live: Space Page
Images
Homepage - NASA astronomy picture of the day :
News - astro science news articals :
People in Space :
The site utilises three open-APIs and React-Router-DOM. Casual science fans can view the latest astro science news articals, get updates on which astronauts are currently in space & see the NASA astronomy picture of the day.
Using React & React-Router-DOM for the first time, we built a multipage website. Axios requests are how we retrieve datasets from various APIs, storing them in stateful variables and displaying the data with React components. Using SASS we styled the site with what little time we had.
- Git & Github for version control - our first time practacing remote collaboration in this way, good experience.
We had very little time, our approach was simply to jump in at the deep end as soon as we had identified some open APIs that would lend themself to a theme. The first step was to build the simplest component, a container which would display the NASA astronomy picture of the day - once we were able to retrieve the data, save the relevant piece to a stateful variable and display it in the container, the ball was rolling. – It was then just a case of following that same process for the other components we wanted to include. With the bulk of the work done we just had to test and style the site which took maybe 25% of the time allocated to the project.
- Axios requests
- Working with open APIs
- React.js – useEffect and useState
- React-Router-DOM
- Netlify deployment
- Though it sounds simple, the media type of NASAs astronomy image of the day varies, meaning your request is sometimes returning an image and sometimes returning a video - this complicates things a little bit.
- Using Git and Github collaboratively for the first time, learning to use branches properly, merging at the right time and so on.
- Deployment also presents some challenges.