DO Hackathon: Blokii Image Maker - The Unsplash API & Feathers Server
Tags: dohackathon, webdev, feathersjs, unsplash
Published: 2021-01-10 17:50:12

In order to open up image select options, I decided to use the [Unsplash API](https://unsplash.com/developers). As an [Unsplash contributor](https://unsplash.com/@meditatingdragon) and user, I was confident this would open up creative possibilities for users and provide more unique images as new images become available.

The API has requirements for [attribution](https://unsplash.com/documentation#guidelines--crediting) and [security](https://unsplash.com/documentation#public-authentication) that required I develop a server proxy for any Unsplash API requests. 

### The User Interface
Due to the attribution requirements, I had to design the user interface with this in mind. I developed the **UnsplashCard** that would be responsible for most of this, displaying a single image with the necessary metadata - this primarily included displaying the right image url and contributor information (name, location, etc.) with the image. 

I created a simple hover effect that would show all this at once:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cv51texvwlg69rb49ywk.png)

The information would link to the user's profile and open a new page if clicked. Once I had the UnsplashCard component complete, I could list a bunch of results from the API.

I used a popup dialog to display results, mostly to keep things simple (I could keep the dialog in the same page and not have to make too many new views/layouts).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s8pumsc4w7z531w7cvhh.png)

To keep track of the image selected by the user, I stored this information in the vuex state. Once the user selected the image, I would send a download request to the proxy server so it could relay that to Unsplash and properly track the images selected by users as required for API usage. 

### The FeathersJS Server

To proxy the Unsplash API requests, I created a simple [FeathersJS](https://docs.feathersjs.com/guides/) project. If I wanted to develop user accounts down the road, Feathers provides that out-of-the-box. 

I added the `unsplash-js` library following the [Unsplash documentation](https://github.com/unsplash/unsplash-js), which I found quite straightforward. 

Then I created a custom service in Feathers called Unsplash. It would implement the [find() service method](https://docs.feathersjs.com/api/services.html#find-params) and use the provided params to make an API request.

To use the Unsplash API, I had to create a developer account and generate an access key for the application. I stored this as an environment variable for security purposes.

#### Find Service Method
The find service method would handle two kinds of request: a search request and a download request. 

To implement the search request, I defaulted some variables, such as how to order the search results. I think ideally, this is probably something the user should be able to select. Right now, it defaults to `latest`, which I've found doesn't always yield the best results 😅. I mapped other variables to the pagination component options provided by Quasar so I could have pagination of results. 

Once the results return, I forward that back to the frontend to be displayed in the Unsplash Dialog.

The download request is passed as an action parameter (`action: trackPhoto`). If the request is to send a download request to Unsplash, it does so using the download_location param saved when the user selected the image (as detailed [here](https://github.com/unsplash/unsplash-js#photostrackdownloadarguments-additionalfetchoptions)).

Once this returns, the response is forwarded to the frontend to confirm the request is successful.

That's it for the server! 

Onto deployment.