Shopify Front End Developer Internship Challenge

Overview

Spacestagram is a React web application designed to pull images from NASA's APOD API. It allows users to browse through a variety of interesting space photography and favourite the images to view later. This site was built for the Shopify Front-End Intern Challenge.

You can visit the site here.

Table of Contents

• Tech
  
• Developing
  
• Technical Decisions
  
• Demos
  

Tech

Front-End

• React
• TailwindCSS

Developing

For more details and troubleshooting see:

• Create-React-App
• Using TailwindCSS with React

First, install the necessary packages via:

# install npm packages 
npm i

Next, setup a .env file and put in the APOD API url. You can sign up for an API key here.

# api url with key in the query param
REACT_APP_API=url_string

Now you can spin up the frontend. Default port is 3000 for a create-react-app project.

# start react app
npm start

Technical Decisions

Why is there no database?

In spirit of the challenge, I decided to use localStorage to keep things strictly on the front end. When a user favourites an image, it is stored on their browser and is accessible after they refresh the page. If I had to implement persistence via a database, I would opt for MongoDB or PostgreSQL.

Why isn't there centralized state management?

Due to the small scope of this project, I decided to not use any centralized state management at all. This decision was made after consulting with this Redux FAQ.

Demo GIFs