In order to open up image select options, I decided to use the Unsplash API. As an Unsplash contributor 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 and security 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:
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).
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 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, which I found quite straightforward.
Then I created a custom service in Feathers called Unsplash. It would implement the find() service method 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).
Once this returns, the response is forwarded to the frontend to confirm the request is successful.
That's it for the server!
Onto deployment.
Top comments (0)