Express.js Tutorial: Instagram Gallery Example App with Storify API

Courses on Node.js, React
and JavaScript
Become an expert with my comprehensive
Node.js, React.js and JavaScript courses.
Learn Full Stack Javascript →


Note: This text is a part of Express.js Guide: The Comprehensive Book on Express.js.

An example of an Express.js app using Storify API as a data source is a continuation of introduction to Express.js tutorials.

Other posts include topics such as:

Instagram Gallery

Storify runs on Node.js and Express.js, therefore why not use these technologies to write an application that demonstrates how to build apps that rely on third-party APIs and HTTP requests to them?

The Instagram Gallery app will fetch story object and display title, description, and a gallery of the elements/images like this:

Express.js Tutorial: Instagram Gallery Example App with Storify API

Express.js Tutorial: Instagram Gallery Example App with Storify API

A File Structure

  • index.js
  • package.json
  • views/index.html
  • css/bootstrap-responsive.min.css
  • css/flatly-bootstrap.min.css

GitHub is at github.com/storify/sfy-gallery.

Dependencies

  • express: 3.2.5
  • superagent: 0.14.6
  • consolidate: 0.9.1
  • handlebars: 1.0.12

package.json:

{
  "name": "sfy-demo",
  "version": "0.0.0",
  "description": "Simple Node.js demo app on top of Storify API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "express": "3.2.5",
    "superagent": "0.14.6",
    "consolidate": "0.9.1",
    "handlebars": "1.0.12"
  },
  "repository": "",
  "author": "Azat Mardanov",
  "license": "BSD"
}

Node.js Server

Require dependencies:

var express = require('express');
var superagent = require('superagent');
var consolidate = require('consolidate');

var app = express();

Configure template engine:


app.engine('html', consolidate.handlebars);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

Set up a static folder middleware:

app.use(express.static(__dirname + '/public'));

var user = 'azat_co';
var story_slug = 'kazan';

Paste your values, i.e., Storify API key, username and _token:


var api_key = "";
var username = "";
var _token = "";

app.get('/',function(req, res){

Fetch elements from Storify API:

Sidenote: If you like this post and interested in a corporate on-site JavaScript, Node.js and React.js training to boost productivity of your team, then contact NodeProgram.com.

  superagent.get("http://api.storify.com/v1/stories/" + user + "/" + story_slug)
    .query({api_key: api_key,
      username: username,
      _token: _token})
    .set({  Accept: 'application/json' })
    .end(function(e, storifyResponse){
      if (e) next(e);

Render the template with the story object which is in the HTTP response body’s content property:

      return res.render('index', storifyResponse.body.content);      
    })

})

app.listen(3001);

Handlebars Template

The views/index.html file content:

[Sidenote]

Reading blog posts is good, but watching video courses is even better because they are more engaging.

A lot of developers complained that there is a lack of affordable quality video material on Node. It's distracting to watch to YouTube videos and insane to pay $500 for a Node video course!

Go check out Node University which has FREE video courses on Node: node.university.

[End of sidenote]

<!DOCTYPE html lang="en">
<html>
  <head>
    <link type="text/css" href="css/flatly-bootstrap.min.css" rel="stylesheet" />
    <link type="text/css" href="css/bootstrap-responsive.min.css" rel="stylesheet"/>
  </head>

  <body class="container">
    <div class="row">
      <h1>{{title}}<small> by {{author.name}}</small></h1>
      <p>{{description}}</p>
    </div>
    <div class="row">
      <ul class="thumbnails">
      {{#each elements}}
        <li class="span3"><a class="thumbnail" href="{{permalink}}" target="_blank"><img src="{{data.image.src}}" title="{{data.image.caption}}" /></a></li>
      {{/each}}
      </ul>
    </div>
  </body>

</html>

Conclusion

Storify API allows developers to retrieve and manipulate stories and elements within the stories. The full description is available at dev.storify.com.

Try it Yourself!

https://gist.github.com/azat-co/5725820

Courses on Node.js,
React and JavaScript
Become an expert with my comprehensive
Node.js, React.js and JavaScript courses.
Learn Full Stack Javascript →

--
Azat Mardan
Azat Mardan avatar
https://www.linkedin.com/in/azatm
To contact Azat, the main author of this blog, submit the contact form.

Also, make sure to get 3 amazing resources to FREE when you sign up for the newsletter.
Simple.
Easy.
No commitment.

2 thoughts on “Express.js Tutorial: Instagram Gallery Example App with Storify API

  1. Pingback: Some tutorials for chat. | Some Programming Thoughts

  2. Pingback: /dev | MEAN 2

Leave a Reply

Your email address will not be published. Required fields are marked *