Youstagram

Adding to stuff you’ve built is the name of the game here. A while ago I did a tutorial on flex-box, css, media queries and some vanilla javascript. I learned a whole bunch but I wanted to take it to the next level. Instead of using static images I wanted to pull in actual Instagram images. Not that pictures of Otters aren’t awesome and all, but did you set that pretzel?

Okay so I’m going to jump into what I actually learned in a minute, but first I want to get to configuring the Instagram API out of the way first because that was kinda a pain and I hope you’re playing with the project right now trying to get it to run on your local machine with your own photos.

  • Go to https://www.instagram.com/developer/ and click the Register your application button .
  • Click the register new client button.
  • Enter the information you want for name and description. What tripped me up was the Valid redirect URIs section. Add http://localhost .
  • Disable implicit Oauth.
  • Open a new tab and enter:
https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]&redirect_uri=http://localhost&response_type=token

You should get a response with an access_token in the query string. After that you should be good to go. Just plug in your access token, secret and client id into the config object.

Now that we took care of that let’s get to the meat and potatoes of this thing.

Backend

To be perfectly honest. It doesn’t really do anything too complex, it just does it’s job. We set up a fairly standard development environment. Additionally we didn’t really need the Instagram driver, but it was nice not having to append strings to URL’s and all of that jazz.

We have one route in this application that maps to / (home) this route then injects Instagram’s response data into the route. We pass that data to a res.render() method that’ll inject and map the data to our index.ejs template where we’ll manipulate the data on the front-end.

Our index.ejs template takes our content and loops over it passing all of the data needed to populate the front-end. There’s also a couple of partials that keep everything together nicely.

The hardest part of this whole section was figuring out how to get the Instagram API authentication working.

Front-End

I’m not going to lie. The front-end to this project was significantly more fun (and will continue to be so in the future). The front-end styles are all held in the public directory. This is a special home that or app knows is for static files.

CSS

The layout heavily depends on flex-box and was built with mobile first in mind. Flex-box is basically magic. You know what, it is. I was super intimidated my flex-box before this project. 20/20 hind sight it fixes so many of the problems we faced with layouts in the past. Centering elements is super simple now-a-days.

Another CSS feature I got some exposure to was transitions. They take over for a lot of features that jQuery used to do in terms of animations. You can make elements grow, shrink and move over any period of time. The native tools CSS gives you as a developer is pretty incredible.

Javascript

Some new HTML features which help one get away from jQuery and some crufty code:

  • the data- HTML attribute. You can now query the DOM with a data value and update it’s data.
  • Event delegation, how to loop through the DOM and add event listeners to specific elements.

That’s it for now. There’s going to some more features in the near future. Building any application from scratch from top to bottom gives you a unique perspective into how things work.

Want follow me as I build other cool internet stuff. Hit the follow button :D

Deployment

This project is hosted on Heroku. I haven’t hosted a project on Heroku in quite a bit of time. But, it was super easy to figure out after reading through their getting started docs for uploading an express app.

Show your support

Clapping shows how much you appreciated Benjamin Schachter’s story.