React & Redux Example App Tutorials

2 min read
Nick P.
Nick P.
Published May 26, 2016 Updated November 8, 2019

Introduction

Ever wanted to build a photo sharing social network exclusively for cabins? Made with React and Redux? Yes, of course? Well, you have come to the right place.

Cabin, the React & Redux Example App and Tutorial Series is perfect for those:

  • New to React and/or Redux
  • Who want to see the structure of a full stack JavaScript application
  • Want to see ES2015/ES6/ES7 code in action with the help of Babel
  • Looking for scalability, power, and ease-of-use with services like imgix, Algolia, Mapbox, Keen, and Stream
  • Really like cabins, and want to create an app dedicated to awesome photos of them

"This is not only a great React & Redux Tutorial series, the end result is a bonafied Instagram killer."- Anonymous.

Why You Should Sign Up For This Series

There is a huge difference between simple boilerplate code tutorials, and creating a full-fledged, production-ready application.

Let's face it - so many React tutorials out there are showing off the same simple boilerplate code they probably found on the last React tutorial you completed.

The Cabin series aims to be different. The intention is still to teach you the basic ideas of React/Redux, but also how you might integrate them into a full-fledged application. Our goal is to explain the fundamentals, but also give you a look at a complete project that implements React and Redux.

As Tyler McGinnis has written, "React isn’t difficult to learn; putting all of the pieces together to build a full web application in React is." We are here to help you see all those pieces.

You will also be hard pressed to find another tutorial series stepping into the next generation of ECMAScript - and throughout our application you will see our code taking advantage of ES2015/ES6/ES7.

This series is also about showcasing the integrations of platforms that provide developers with features that are powerful, responsive, and scalable. For example, Mapbox for maps, Keen for analytics, or Algolia for search.

Topics Covered

Over the course of the Tutorial, we will be covering a lot - breaking down our full-fledged photo sharing app into easy-to-digest sections that focus on one main area. Take a look:

1 Getting Started

  • Full-Stack Node & React Application Structure
  • Webpack Overview & Basics

2. React

  • History & Philosophy of React
  • JSX Overview & Basics
  • React Components, In-Depth

3. Redux

  • Redux Overview
  • State Versus DOM Manipulation
  • Redux Fundamentals
  • Reducers & Actions

And, the series continues with the service integrations to power the features of our app:

  • 4. Stream
  • 5. Algolia
  • 6. Imgix
  • 7. Keen
  • 8. Mapbox
  • 9. DigitalOcean
  • 10. Unit Testing & Documentation (Bonus)

Get the First Four Tutorial Posts

The next step, if you haven't already, is sign up for post updates. We will send you an update as soon as the first tutorials are available. In addition to the tutorial and project code, we are also including Sketch files for designers.

decorative lines
Integrating Video With Your App?
We've built an audio and video solution just for you. Launch in days with our new APIs & SDKs!
Check out the BETA!