Photo Rover - Flatiron School Final Project

App Overview

Source Code

Photo Rover is a web app that uses NASA's Mars Rover Photos API to receive a daily-updating collection of photos from Mars. The photos are taken by NASA's Curiosity rover. A lot of photos feature Martian geology. The rover is also fond of selfies.

In Photo Rover, a user can view pictures of Mars by selecting a specific Earth date. If they like a photo, they can save it to their library. A link to their saved photo is persisted in a SQLite database.

The app uses a React/Redux frontend, Redux Thunk to send asynchronous API calls, and a Ruby on Rails JSON API backend to handle user accounts and their respective actions.

App Execution Flow (Initial Photo Retrieval)

• In the React frontend, we start in index.js, where the Redux store is configured, and App.js is rendered.
• In App.js, all the routes are set up with React Router. When App.js mounts, an action is dispatched to receive photos of Mars from yesterday. The action sends a GET request to NASA's database. The action uses fetch and waits for a resolved promise to send to the reducer.
• The reducer takes the list of photo objects from the action and stores them in state. Each photo object has its own link to retrieve itself from the Internet.
• App.js then receives the updated state that contains the photo objects. It renders PhotosList.js and sends it props containing the photo objects.
• PhotosList.js receives the props and iterates through them, passing each photo object to the Photo.js component.
• Photo.js takes the photo object it received from props and passes the image URL from the object to an HTML img element. This causes the photo to render on the web DOM.
• The photo is rendered with a button that, upon being clicked by a logged-in user, will cause that photo to be associated with that user. The user can retrieve that photo by going to their Saved Photos library and clicking "Refresh Saved Photos".