An Instagram-powered web app in 50 lines code with Angular JS

In about 15 minutes, you can build this:

The finished product.

The only skills you need to build this are using the keyboard, clicking the mouse, and maybe some copying and pasting. I hope you learn some HTML, CSS, and Javascript along the way.

Setting up your environment

Here’s what you’ll need to get started:

• A web browser (I’m using Chrome)
• A text editor (I’m using the Sublime Text 3)
• A terminal. Don’t be intimidated if you’ve never used it before. We will use a few basic commands to download some files that will help you build this web app. If you’re using a Mac, press Command (⌘) + Space and type “Terminal” without the quotes. Then press enter.

You should see something like this:

An empty terminal window. May cause endorphin boost.

Yours might have a white background with black text, but you can customize its appearance in the Preference pane (⌘ + comma).

Wait, what are we actually building again?

Oh yea, I should explain that.

Instagram has a robust API that lets you interact with most of its data. In this example, we’ll be using the /media/popular endpoint to display popular photos on a web page.

The idea came from watching my fianceé feverishly refresh the “Explore” tab on the Instagram mobile app. I ingest Instagram on the web, so I wanted a way to do the same. Also, the Instagram website doesn’t have this kind of page.

In a future tutorial, I’ll evolve this web app to include pages for venues on Instagram with music connected to content.

Let’s start building.

Installing dependencies

The first thing you need to build Instaspot is Git. If you don’t already have it installed, follow the instructions to install it here: http://git-scm.com/download/.

Next is Node.js. Navigate your web browser to http://nodejs.org/download/. Find the proper installer file, download it, and install it. For Mac users, try this.

Once Git and Node are installed, open your terminal and type:

sudo npm -g install bower

You’ll have to type in your Mac password to make it work. This will install Bower, which helps you include certain Javascript libraries to make this app work. One more thing to install; a local development server that will host your files:

sudo npm -g install serve

Okay, now we’re ready to start coding.

The markup

A website is composed of HTML (the structure of the content), CSS (the styling and design of the content), and Javascript (the behavior of the content).

Let’s start with some simple HTML to get us started. We’ll use the terminal to create folders and files. Type this:

mkdir -p ~/Code/instaspot && cd $_

This will create an “instaspot” folder inside a “Code” folder in your (~/) home directory, then put you in that directory. This is just how I organize my code, but you can literally create a new folder anywhere on your computer. To open the new folder in Finder, type:

open .

Once inside your new folder, we’ll create our HTML file, index.html:

The building blocks for our HTML.

Instead of typing these 19 lines of HTML, feel free to copy and paste from my gist here. When you open index.html in Chrome, it should look like this:

Showing some dummy data to get us started.

Right now it looks like some unformatted HTML with one hard-coded sample image from Instagram. That’s okay, we’re going to make it sparkle shortly.

The Javascript

You will notice at the bottom of our HTML page that we are including some <script> tags. Lines 16 and 17 right before the </body> tag:

<script src="bower_components/angular/angular.js"></script>
<script src="js/application.js"></script>

Here we are including Google’s Javascript framework, Angular JS, and our own application.js file.

Back in the terminal, type:

bower install angular

This will download the Angular JS files and put them in a folder called “bower_components”.

Angular will help us pull data from the Instagram API into our web app.

Now let’s build our Javascript file. Make a folder called js and inside it, create a file called application.js. Here is what it looks like:

These 23 lines of Javascript will get the job done.

Copy and paste the file from my gist, and then let’s examine this code.

Lines 1 and 23 wrap all of our code in a function. This is good practice.

Line 2 is my Instagram client_id. You’ll need to login to Instagram and create a “client” in their system here. Insert your client_id in line 2.

In line 3, we are initializing our app called “instaspot”.

In line 4, we are creating a “factory” (which does some stuff and returns some data) called “InstagramAPI” which uses Angular’s built-in $http property.

Lines 6–13 are a method called “fetchPopular” that will hit the Instagram API and get some data back. We construct an “endpoint” variable that should return 99 items (although Instagram only returns about 30–40 items right now).

Lines 17–22 create a “controller” called “ShowImages” that will interact with our HTML. We create an empty object called “data” that we pump the API response into. This is all the JS we need.

Now we should update our HTML to interact with the Javascript.

Connect the behavior with the markup

Update line 2 of our index.html file to include “ng-app”:

<html ng-app="instaspot">

This line of code talks to the Javascript file and tells Angular to pay attention to anything inside this code block.

Line 10 should updated to look like this:

<section ng-controller="ShowImages as images">

Now anything inside this <section> element will access data inside our “ShowImages” controller (line 17 of our application.js file).

Finally, we’ll update lines 11–14 to dynamically pull content from the API response:

<div class="spot" ng-repeat="p in pics">
  <p><a href="http://instagram.com/{{p.user.username}}" target="_blank">{{p.user.username}}</a></p>
  <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a>
</div>

A few things to note here:

• We are using “ng-repeat” to loop through the array of content that comes back from the Instagram API. “pics” corresponds to line 20 from our application.js file.
• We’re displaying the username and image and linking to Instagram’s website in a blank tab.
• The image tag uses ng-src instead of src so it will render the content before the HTML loads.

Here is the final HTML file without styling:

Here is the gist.

Now when you refresh your browser, it should look like this:

Pulling dynamic content from Instagram. Try hitting refresh for new pics.

If you did everything correctly, you should see real data from Instagram.

Remember when we installed that thing called “serve” a few minutes ago? It will setup a development server that makes it easier to send and receive requests from other URLs. Let’s use that now.

In your terminal, open a new tab (⌘ + t) and type:

serve 6789

Our local development server at port 6789.

Now navigate your browser to the address http://0.0.0.0:6789:

Using our development server, locally.

This is an optional step, but when interacting with data from URLs other than your own, you might run into CORS issues. This gets around that.

Okay, let’s add some CSS to make it look pretty.

The final piece: CSS

In our index.html file, let’s add some styling:

Google Fonts and 8 lines of CSS makes Instaspot attract eyeballs.

Here we import Karma and Lato from the Google Fonts library, and float each .spot element left so it looks nice. If you refresh, it should look like this:

The final HTML file looks like this.

Now you have a local web app that displays the most popular photos from Instagram, and it only took about 50 lines of code to create.

Conclusion

As I learn more about Angular, I’ll expand the functionality of Instaspot. I want to build the site to let a user discover venues and all of the Instagram photos from a venue and even let users add music to a venue page.

You can see a live demo of the current version of the app here. You can find the full source code here.

I hope you learned some new coding skills by reading this. Please let me know if you have any questions, or if something isn’t working properly.