You are going to create a Mars rover dashboard that consumes the NASA API. Your dashboard will allow the user to select which rover's information they want to view. Once they have selected a rover, they will be able to see the most recent images taken by that rover, as well as important information about the rover and its mission. Your app will make use of all the functional concepts and practices you have learned in this course, and the goal is that you would become very comfortable using pure functions and iterating over, reshaping, and accessing information from complex API responses.
To complete this project, your UI must show the following:
- A gallery of the most recent images sent from each mars rover
- The launch date, landing date, name and status along with any other information about the rover
- A selection bar for the user to choose which rover's information they want to see
To complete this project, your UI must do the following:
- Be responsive. Needs to look good(aka not broken) on phones(max width 768px) and desktop(min-width 991px, max-width 1824px). Tablet view is optional.
- Provide a way to dynamically switch the UI to view one of the three rovers **This can be done using tabs, buttons, or any other UI control
To complete this project, your frontend code must:
- Use only pure functions
- Use at least one Higher Order Function
- Use the array method
map - Use the ImmutableJS library
To complete this project, your backend code must:
- Be built with Node/Express
- Make successful calls to the NASA API
- Use pure functions to do any logic necessary
- Hide any sensetive information from public view (In other words, use your dotenv file)
The NASA API has a lot more data to offer than what we are using here. There's no extra credit in this course, but it could be fun explore their API and see what they have to offer and what strikes your creativity to add into your project. You are not limited to the API calls we require. Look here (https://api.nasa.gov/ at the Browse API's section) to see all that's available.
Some ideas might be to incorporate the Astronomy Photo of the Day into your design, collect weather information on Mars, etc...
Create an image gallery slider, put a full page background image, code some falling asteroids with css animations ... the visual design of this UI is up to you! There is a lot of awesome dashboard design inspiration out there. You have already been given a good start with a mobile-first stylesheet already set up for you.