Create an Instagram-like App with React, Node.js and Redux

- October 17, 2016


Today, I will demonstrate how to use Filestack’s API to build an application just like Instagram – in which you can upload files, apply image filters, and share your photos with the world.

For all of you familiar with Filestack’s documentation, you must have noticed the extensive list of image filters, which include monochrome, sepia, black and white, blur, oil paint, and more.

If you’re interested in using more image transformations than the filters, be sure to check out my other articles on how to create image collages, and how to use facial detection to create a “Guess Who” game.

Alight, let’s get started building our Instagram-like app!

The App

Let’s first look at the model I build out – Instastack. For this app, I wrote the server API with Node.js while I handle the front-end with React and Redux. As usual you can fork/clone my project from github.

Like Instagram, the UI shows a list of filtered images on each user’s profile. Let’s spy on Han Solo’s profile:

instastack

All of these images have been filtered with Filestack’s API! When you click on any image, you are redirected to another page to see the full size image:

instastack2

The view gives us a better understanding on how the picture has been altered.

On the upload page, we can choose the filter and see the transformation in real-time:

instastack3

Filestack’s Filters

So what are those filters we are talking about? How to use and combine them together?

Here is the list of filters I offer in the upload section to my users:

  • Sharpen
  • Blur
  • Black & White
  • Sepia
  • Pixelate
  • Oil Paint
  • Negative
  • Modulate

Many of them are quite popular in Instagram or in other platforms so Filestack is really great to easily allow you to use them.

Also, despite being a lot, the way to call them to transform a picture is consistent among all of them so let’s see how to apply them:

https://process.filestackapi.com/ + filter=[options]/ + handle

Where filter is simply the name of the filter to apply while handle is the file link to your picture, that is returned along with the CDN url whenever you upload a file with Filestack.

Let’s make it clearer with an example:

My favorite filter is Oil Paint because it’s kinda like an impressionist painting!

Let’s apply it to this breakfast image:

cadxojuumaajaig

The Filestack handle, after uploading the picture, is urjTyRrAQA6sUzK2qIsd so in order to apply the Oil Paint filter the link would be:

https://process.filestackapi.com/oil_paint/urjTyRrAQA6sUzK2qIsd

which will look like this:

cadxojuumaajai2

Easy as pie! To apply other filters you just have to change the filter name.

But that’s not all… In fact these filters come with a few options, though not mandatory.

For example, we can choose the amout of Oil Paint to apply through the amount option which accepts integers from 1 to 10.

Let’s check it out the syntax for Oil Paint with amount equal to 7:

https://process.filestackapi.com/oil_paint=amount:7/urjTyRrAQA6sUzK2qIsd

Or we can also use its abbreviated form:

https://process.filestackapi.com/oil_paint=a:7/urjTyRrAQA6sUzK2qIsd

NB: In the app I did not take advantage of the filters’ options.

Concatenating filters is easy too:

https://process.filestackapi.com/ + filter1/ + filter2/ + ... + filterN/  + handle

Finally, let me show you the upload page behavior when users click on the filters:

screen-recording-2016-10-16-at-09-51-33-pm

As mentioned before, the preview is updated in real-time

Upload a File

As usual, to upload the file I used the function pick from Filestack API, however this time I had to deal with Redux Saga which handles all the asynchronous operations of the app. If you are familiar with it, you must know it works pretty well with promises so, to handle the pick function I return a promise that will resolve when the end of the onSuccess function, or rejected it in case of errors.

Let’s take a look at the code:

const pick = () => {
   return new Promise(function (resolve, reject) {
    filepicker.pick(
      {
        mimetype: 'image/*',
        container: 'modal',
        services: ['COMPUTER', 'FACEBOOK', 'INSTAGRAM', 'URL', 'IMGUR', 'PICASA'],
        openTo: 'COMPUTER'
      },
      function(Blob){
        console.log(JSON.stringify(Blob));
        const handler = Blob.url.substring(Blob.url.lastIndexOf('/') + 1);
        resolve(handler);
      },
      function(FPError){
        console.log(FPError.toString());
        reject(FPError.toString());
      }
    )
  })
}

Once the promise is resolved the redux-saga in charge for it will update the app state with the new picture url which will be later sent to the server.

What about the pick function’s options?

  1. The mimetype only allows pictures to be uploaded.
  2. Container defines the UI of Filestack, in the app case the upload window is a modal.
  3. Services defines the allowed sources devices/services to upload pictures from.
  4. OpenTo defines the first suggested source when the modal opens.

These parameters are super common isn’t it?! I used them already in many other apps!

Once again, you finished the tutorial to use filters, now you just have to try and play with them!

Conclusions

In this article, we have explored how to easily add filters to our image thanks to Filestack’s API. Given the consistent syntax, we just have to concatenate them before the file link handle and add options to setup the filter (…or skip the options if you are satisfied with the default result).

Moreover, I showed you how to return a promise from the pick function which can be used to handle the asynchronous behavior of your app.

Congratulations!