In this workshop, we leverage the Instagram and Foursquare APIs to create basic sites with dynamic data. The site renders an Instagram feed based on the username entered in the query string. It also uses Foursquare data to return nearby venues based on a search parameter such as "coffee" or "jewelry". This is a good demo for beginners with little web development experience. We explore the basics of templating engines, routing, parsing JSON, and more. Finally, we deploy our projects to the Turbo 360 hosting environment to make sure it works live.
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.
Portfolio Site with Node JS & Express fullstack
React w Node & Express Server fullstack
Basic Node JS and Express node
Creating a REST API node
Mongo DB node
React Native Tutorial - Yelp Clone react native
React Native Tutorial - Messaging App react native
React Native - Instagram react native
Chat Site - Reddit Clone fullstack