Overview

In this series, we create a simple app that queries the Foursquare API for nearby venues based on a zip code and category entered by the user. This project has no server (Node JS) integration and is therefore a good starting point to learn React/Redux only. This is a simple project that shows how to integrate Redux and process data from API requests.

Who

This tutorial is well suited for beginners who have basic Javascript experience but little to no knowledge of React and Redux. If you are a complete beginner with no coding experience at all, this is too advanced and we suggest learning the basics of Javascript and object oriented programming (tutorials on that will be posted soon)..

What You Will Learn

This tutorial uses:
  • React
  • Webpack
  • Babel
  • ES6
  • Redux
  • Foursquare API

Units

Setting Up

In this video, we set up the project for React using ES6, Webpack, and Babel. We create a simple React component and transpile it to ES5 using Babel. Then we render it on a basic html index page to confirm that the set up was successful.

Search and Results Components

We start building out the actual UI components to support a search bar and results page. The search component, called Nav.js will include a text field where the user enters a zip code. The results component, called Venues.js will render the actual search results from the Foursquare API.

Tracking User Input

We begin the app logic with the Nav component - we track the values typed into the input filed using component state and respond to the button click with a method. This prepares the app flow to request the Foursquare API next.

Making API Requests

In this video we finally make an API request to Foursquare. In order to do so, we incorporate a library called Superagent and perform the request then parse then results in the console.

Redux

In order to pass the data from Foursquare to other components, we need Redux. In this video, we create the basic set up for Redux integration and add it to the project.

Updating From Redux

In this video, we connect the Venues component to the Redux store and render the results from Foursquare in a simple list.

Design and UI

In this video, we add Bootstrap to create a better looking design and UI for the site. In addition, we add a search filter to the nav bar which enhances the search capability of the app - user's can search for food venues, coffee shops, fitness places, etc.

Subscribe

Click the button below to subscribe to this tutorial.
Premium members can subscribe for free.

Online Membership

Can't make it to our live courses? Join our online membership for video tutorials, code samples and access to our Slack Channel.

Basic

Free
  • Access to Free Tutorials
  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
Join

Premium

$14.99/mo
  • Access to ALL Tutorials
  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
  • Discounts on Live Courses
  • Cross-Premium Membership to Turbo