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.