PREMIUM ACCESS: as a premium member, you have full access to this tutorial.

In this 4-part workshop, we create a simple React & Redux application where users can find random items for sale by navigating a map. We use Google Maps as well as Turbo 360 for the hosting environment. In addition, we create a very basic REST API for handling data on the backend with a Node/Express web app. This workshop is well suited for those who are new to React/Redux but are not complete beginners - you should have a basic understanding of Javascript to follow along.

Setting Up Access Files In part one, we set up the project by installing a theme and optimizing the asset delivery with SASS, and Gulp. We then deploy to staging to make sure it works on a live hosting environment and begin the process of converting HTML to React components. We use this Gist file for our Map component: MAP GIST FILE

React Redux Configuration Access Files In part 2 of the series, we set up the React and Redux architecture for the project. We create container components for searching on the map as well as for rendering results in the main content area. We then connect user interactivity by adding items for sale in a given area on the map.

Connecting to Backend Access Files In the third session, we connect our app to a live backend in order to store items for sale and register users. This enables anyone to post items based on the map's current location. We also add image upload to add preview images to items for sale. This is all handled through the Redux architecture using asynchronous actions.