Install Packages & Dependencies - 0:35
We start by installing the Turbo CLI package and confirm that it works on localhost. We then do a quick deploy to make sure everything works properly on the staging environment. Create a corresponding project on Turbo 360 called API Demo.
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 and begin coding.
Project Overview – 9:55
In this section we explore the directory structure on the Node JS project and the basics of Mustache templating. We also show how to parse JSON objects and do render dynamic data, handle routes within a conventional Node/Express application, and show an example of dynamic data rendering.
Render Instagram Data – 19:00
The next step on this API Demo is to create a Mustache template for the Instagram feed. We show you how actually to 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 then import the Superagent NPM library that makes the actual HTTP requests on our behalf and create a dedicated route for the Instagram requests.
We also fetch data based on a username passed in the URL and parse the JSON response in order to isolate the Instagram feed. Now we loop through the array of posts and render them in our template after parsing out individual attributes.
Rendering Instagram Data on UI - 57:30
In this part of the Node JS course, we make some minor UI adjustments for margins and padding using custom CSS. We also implement Bootstrap classes to layout the basic UI’s column and grid structure.
Render FourSquare Data – 1:00:32
Now that we are done with API basics in Instagram, we move to the Foursquare API. Just like we did before with Instagram we create a Mustache template dedicated to Foursquare. Same as we did with Instagram, we then import the Superagent NPM library and create a dedicated route for the Foursquare requests.
Rendering FourSquare Data on UI – 1:30:52
In this last part of the Node JS course, we do some minor UI editing using custom CSS. We implement Bootstrap classes to make the layout a little visually appealing.