Instagram Clone

Turbo 360

The best way to learn programming (or anything for that matter) is to mimic the experts. In this 3-part Node JS course, we will do exactly that by rebuilding a portion of the Instagram website. During this hands-on workshop, we will build a simple site where users can view the Instagram feeds of various accounts by typing in the username into a search field. We will then connect a separate page for viewing individual posts. Topics include:

  • Node JS & Express
  • Querying the Instagram API and parsing JSON results
  • Templating with Mustache
  • Bootstrap
  • jQuery and AJAX
This workshop is well suited for those who have basic HTML/CSS experience but are not comfortable in a full stack environment. The course is part of the Intro to Development track on Turbo 360 which is focused on beginners with little to no experience.


Requesting and Rendering Instagram Data

Install Packages & Dependencies - 0:35
We start by installing packages like Webpack, Gulp, and the Turbo CLI and confirm that it works on localhost. We then create a free account on Turbo 360 and a corresponding project to host our application. We then do a quick deploy to make sure everything works properly on the staging environment.

Setup Codebase - 3:05
We then create the project locally and execute the install command. We test the project locally by running the dev server and loading the site on localhost:3000. We deploy the app to a staging environment as well to make sure the app looks that same on staging as it does locally.

Setup Project Overview - 7:50
When a project is created with the Turbo CLI, certain pieces and tools are already in place. We briefly review this setup in order to familiarize ourselves with the project architecture. This include Mustache templating for rendering dynamic data, handling routes within a conventional Node/Express application, and and example of dynamic data rendering.

Home Page Layout - 15:02
We begin coding by setting up the home page HTML layout from scratch. This includes using Bootstrap for quick CSS styling which automatically comes installed with the Turbo scaffold. We also quickly review the static asset organization in Turbo projects which follows a conventional architecture for delivering CSS, JS, and image assets. We layout the basic UI using a simple Bootstrap column and grid structure.

Requesting Instagram Data - 21:12
In order to show the Instagram feed for specific users, we need to access the original data. Fortunately, Instagram provides a simple API for retrieving this data which we leverage for our application. First, we import the Superagent NPM library which makes the actual HTTP requests on our behalf then we create a dedicated route for the Instagram requests. We then fetch the data based on a username passed in the URL and parse the JSON response in order to isolate the image feed.

Rendering Instagram Data on UI - 36:30
It is now time to actually render the API data on our main UI by passing it to the Mustache template and adjusting the HTML/CSS to accommodate the data. We loop through the array of posts and render them in our template after parsing out individual attributes from each one. Then we visually adjust the rest of the page to make it look closer to the actual Instagram website user interface. This is primarily done through more Bootstrap column/grid changes in addition to some custom CSS classes.

Organizing the UI and Styling

Minor UI Adjustments - 0:50
In this part of the Node JS course, we do some minor UI adjustments for margins and padding using custom CSS. We also implement Bootstrap classes such as nav bar on top of our Node JS project to closely replicate the actual Instagram UI where users can search for various accounts.

Remove Inline Styles - 8:30
We should make sure to develop good habits and make our coding neat and straightforward. So we need to remove most inline styles by extracting it and create a CSS class inside the head tag. By doing this we can easily track the coding as your Node JS project gets more complicated.

Populate Nav Bar - 14:00
In this section, we add a snapshot the logo image of the Instagram then upload that image to Turbo 360 Storage provider. We then crop and dynamically render the loge images into our HTML/CSS. We also add search input to the nav bar and adjust Bootstrap columns to accommodate the nav bar. This way we’re making our Node JS project better organized and visually appealing.

Error Handling - 29:16
Next, we create an error template for Instagram accounts that do not exist. We use the index Mustache template to create a separate page called error Mustache for rendering error messages. When errors are returned from the Instagram API, we pass the data to the error template which gets rendered to the user.

DRY - 37:27
In most project, duplicate code inevitably comes up. That’s why we need to develop the DRY habit - “Don’t Repeat Yourself”. In this section, we move the CSS from the head tags and place them in separate partials file. After partials are implemented, the remaining code on each template should be unique to that template only.

Individual Post Route - 43:00
Our goal in this part of Node JS course is to route the user to a separate page when you click an image post similar to Instagram UI. To start off, we need to create a new GET route to render individual post. We then send an API request to extract post data from Instagram API JSON response and create an error block to handle error messages if the post is not found. We reuse the error template from earlier (DRY) for rendering error messages. Finally, we create a new template specifically to show the individual post from an Instagram account.

Organize UI for Individual Post Page - 56:02
After creating a new template for an individual post, we organize its UI by using Bootstrap column/grid changes in addition to some custom CSS classes. This way we visually adjust the rest of the page to make it look closer to the actual Instagram website UI for individual post page. Also In this section of Node JS tutorial, we show you how parse the JSON response for each post and decide which attributes to render on the post page.

Cleanup and Refactoring

Minor UI Adjustments - 0:30
In this final part of this Node JS course, we start off by connecting images from main account page to individual post page as hyperlinks. This way we can link the individual image post to a separate page for user viewing.

Organize Post Page UI - 4:45
We then make a few more UI adjustments on the post page using Bootstrap columns and nested rows to arrange the post data. The goal is to make our UI content and structure closely resemble the actual Instagram page UI.

Add User Data to Post Page - 12:45
Next step in this Node JS course is to add the user data to the post page. Unfortunately, the JSON response tied to a specific post does not include the user data. To correct this, we parse out user info from the original Instagram API request and pass that off to the template for rendering.

Render User Info on Post Page - 17:35
After rendering the user info on the post page, we layout the user icon and username using a simple Bootstrap column and grid structure. We also create corresponding CSS classes for user info layout. We then render the post caption and number of comments and likes for each post.

Cleanup, Refactor - 30:55
Now that we are done with our standard UI for our Instagram clone. We need to refactor the coding in index.js route. After the Mustache templates are properly structured. We create a utility file for making HTTP requests and place all Superagent request code in the HTTP utility file we just created. We then replace HTTP requests in index.js with a utility function.

Membership Options