kaohman / nasa-apod

An astronomy photo of the day app

NASA Astronomy Photo of the Day

This app displays beautiful astronomy photos for the current day and month from the NASA APOD API. SEE IT LIVE

Set-Up

• Get a NASA API key here: https://api.nasa.gov/index.html#apply-for-an-api-key
• Add your unique api key and an environment variable in an .env.development file
• Clone this repo: git clone https://github.com/kaohman/bike-see.git
• Run npm install from root directory
• Run npm run serve and visit localhost:8080 in your browser

Deployed Website

https://nasa-apod-ohman.herokuapp.com/

Background/About

This was my first time creating a Vue app. Users can view today's astronomy photo from NASA along with details about the photo and past photos for the month. The app uses responsive design to be both mobile and desktop friendly. The goal of the project was a practice take home code challenge using a new framework (Vue). View original assigment here.

Screenshots

Home page:

All month page:

Primary Technologies Used

• Vue
• HTML
• CSS
• NASA API

Enhancements

• Include functionality to view older photos
• Incorporate Vue Router to dynamically change the URL path and allow users to share a specific photo
• Add Vuex for state management

Contributors

Karin Ohman

Wireframes

nasa-apod's Issues

Add Vuex for state management

Create Main Component

Should use conditional rendering to show ApodContainer or ApodDetails based on Vue Router path. Child of App.

Testing?

User should be able to toggle between images from the previous/next day

Set up vue router

Add additional photo functionality before current month

Responsive design

Down to 320px

Deploy app on Heroku

Create ApodContainer Component

• Should make a fetch call to GET all APODs for the current month
• Should create Apod components based on results of that fetch call

Create ApodDetails Component

• Should make a GET fetch for single desired APOD
• If a date is passed, fetch that image, otherwise get today's image
• Should display full image and details in a caption

User should be able to view today's image on home screen

Create READ_ME

Create Header Component

Should include title and Vue Router links to 'today' and 'all month' pages.

User should be able to click on an image in the "all month" container and view that specific image details

User should be able to all images for the month on the "all month" page

Create Apod Component

Should display preview of APOD image and should be a link to apod/:id route that will display full page image and caption when clicked