dakshub / spacestagram

A web application to like/unlike images from NASA's Image API

Spacestagram

A web application to like/unlike images from NASA's Image API. Check it out!

Built with

• React
  • Libraries - Shopify Polaris, Polaris Icons, Axios, Framer Motion, React Router
• Vercel

Features

Main page

Images returned from the API are shown here. Each image result lists a title, date of capture (earth_date) and a button to “like” that image. Each image can be “liked”, and a user is able to undo their “like”.

Accessibility

100% accessibility score on Lighthouse.

Home page

Begin button redirects user to /images where images from NASA's image API are shown.

Loading state

Skeleton page shown until images are fetched.

Load more images

Ability to load more images from the API.

Shareable links

Ability to copy each image's URL.

Error handling

Save likes

Using localStorage to save likes if the user leaves or reloads the page.

In addition, the like action is animated and the application has responsive web design!

Run project locally

1. Get a free API key from https://api.nasa.gov
2. Clone this repository using git clone https://github.com/dakshub/spacestagram.git
3. Create an .env file in the base directory and a variable named REACT_APP_API_URL=https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2022-1-1&api_key=key where key is your api_key from step 1
4. Run npm start and the application should be available on localhost:3000

Future enhancements

I would start off by adding tests to make the code more robust. Filtering API results and storing them to reduce API calls would be really helpful. LocalStorage is not scalable, so I'll create a database and link it with backend service to store user likes.