FCC Speedrun #1 — Image Search API
This is my first blog post ever. I’m a bit overwhelmed with cohorts, slack, speedrun, finding a job, and the rest of life, so it doesn’t have code snippets or really any helpful tips. Sorry about that — but, I promise to get better.
Completed: The API challenges for the FCC backend certification. I actually started them a while ago, but found myself distracted by the beta curriculum. I thought the beta would be released before I could finish the back end, so I switched to that path…but the nagging feeling of leaving the original certification incomplete brought me back.
So. I used a single repo on www.gomix.com for these challenges, which ended up becoming www.glitch.com somewhere along the way. There’s an express server, a mongoDB instance hosted on mLab and some html/css files. It’s as simple a setup as possible. Today, I completed the Image Search Abstraction Layer challenge and the URL Shortener challenge. You can see the project here: https://dg-api.glitch.me/image.html and the repo here: https://glitch.com/edit/#!/dg-api
Image Search Abstraction Layer
As usual, to get started I hit up Google for Image Search APIs. The first to come back was Google’s own API, but I quickly learned it was deprecated. Next up was the Bing Image Search — this looked promising, and in fact the example app from FCC used this service — but alas, it was converted to a paid service in Dec. 2016. More Googling led me to the Pixabay API and finally we were in business. The API required a free sign-up to get a key, which was then stored in the .env file of my Glitch repo.
There were 3 user stories to fulfill:
1. Create an endpoint to return images based on a search term
2. Allow user to give a page offset for deeper search
3. Create an endpoint that shows recent searches
First and second user story was accomplished by creating a single route in my server to handle
/api/image?q=”search”&offset=#
I parse the request.query and make sure a search was submitted. The offset number is defaulted to 1 and limited to 25 because Pixabay will return 500 results. Next I build a URL to hit the Pixabay API and use the “request” npm package to GET it. The results are passed back to the original response object. Meanwhile, the search term is added to a collection in mongoDB.
The third user story necessitated another route in express:
/api/image/recent.
It simply returns the results of a mongoDB find call with a limit of 10 documents, sorted by modified date descending.
All in all the hardest part was finding an image search API I could connect to. The mongoDB save/find pattern was already established through the other API projects, so configuration was already in place. I struggled a bit with the pagination process — a combination of poor documentation of the Pixabay API and overthinking on my part. I thought their API was returning all results, so I was trying to paginate their response, when in reality they were only sending one batch to me.
Next up: the backend projects. Wish me luck!
