Overview

In this 4-part series, we build a photo sharing app with geo-searching capability. Users can upload photos and search for nearby photos by moving a map (Google Maps) around. The following tools and libraries are used in this project:

Who This is For

It is best if you have a background in Javascript and some knowledge in web programming. You should understand the general principles of a REST API as well as core React concepts such as life cycle methods and one way data flow. This series moves quickly and covers a lot of material in 4 videos so complete beginners would not be best suited for it.

Units

Setting up Node, React & Redux

In this session, we set up the API and connect it to a React front end with Redux store. We query the API from the React components to ensure the connection is successful.

Google Map

In this session, we set up the Google Map for the navigational UI of the site. We track the map's current position and use that to determine where the user wants to view photos.

Uploading Images, User Registration & Login

With the map integration complete, we move on to uploading images to Cloudinary. Then we set up the user registration and login flow so that every post is tied to a specific user.

Geo Spatial Queries, Theme Integration, Deployment

Finally, we prepare geo spatial requests so that users can view posts that are nearby a specified location. Afterward, we integrate an HTML theme (from html5up.net) to create nice-looking UI and then deploy the project to Heroku.

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