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 clientbutton.
- Enter the information you want for name and description. What tripped me up was the Valid redirect URIs section. Add
- Disable implicit Oauth.
- Open a new tab and enter:
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.
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.
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.
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.
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.
Some new HTML features which help one get away from jQuery and some crufty code:
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
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.