Garage Sale App

Turbo 360

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

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

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

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.

Contacting Sellers

To finish the project, we connect email notifications such that item sellers will be contacted when a user wants to purchase an item. Users enter a message into a dropdown modal which then gets sent to the seller via email. We then deploy the project on to the live staging environment and to make sure everything works on live hosting.

Membership Options