Spacestagram

Shopify Front End Developer Intern Challenge - Summer 2022

Click HERE to view the project spec
Click HERE to view the deployed site

Abstract
Tech Used
Installation and Set-Up
Features
See the Site in Action
Future Goals
Created By

Abstract

This website takes data from the NASA Astronomy Photo of the Day API, and formats it into fun and informative photocards. Each photocard includes an image or video clip, title, date of posting, a description, and a "Like" button.


An Example Photocard

Tech Used

JavaScript
HTML
CSS
Mocha Testing Framework, Chai Assertion Library, and JSDOM Library for Test Driven Development
NASA APOD API
Project Structure Organized with GitHub Project Board

Installation and Set-Up

To install this project, please see below:

1. Clone down this Repository using `git clone`
2. Next, `cd` into the cloned repository and `npm install` to install library dependancies
3. Finally, run `npm start` and open up localhost at the port indicated to view the webpage

Alternatively, you can access the deployed site here: https://rjur11.github.io/Spacestagram/

Features

Each photocard is populated from NASA's APOD API and includes an image or short video clip, title and date, description, and a "Like" button
A user can like/unlike their favorite photocards
100% Lighthouse Accessibility Audit Score
- Fully tabbable
- Semantic HTML
Stretch Feature: Infinite Scrolling functionality with a space-themed animated loader

See the Site in Action!

The user will be greeted with an initial group of three randomly populated photocards that can be navigated by scroll wheel on a mouse, or by tabbing through each card. Once the user reaches the end of the first three cards, an animated loader will appear, prompting the user to wait a second or two while more photocards populate.

Uh oh! Sometimes images from the API will be broken. Alt text is provided to describe what the missing image conveys.

If a user finds a photocard that they really love, they can click the "Like" button associated with the photocard. However, if they change their mind, they can always go back and "Unlike" any cards that were previously liked.

Future Goals

Create an "on page load" screen that lets a user know when API rendering is taking a little longer than expected

Created By:

Rana Jurjus

rjur11 / Spacestagram