What You'll Build
You will take an application called Photobook from comp to working application. The app has many of the features that you would expect to find in apps today: authentication, data fetching, CRUD actions, automated tests, and more.
Using xstate and react-automata, you will cover all of the important features of statecharts: parallel states, hierarchical states, history states, and guards.

What You'll Learn
In this course, you'll learn how to use state machines and statecharts to better design the state of your applications. Though we make heavy use of React and react-automata, the principles and ideas of this course translate across languages and frameworks.
At the end of this course, you will be able to answer all of the following questions:
- What are state machines and statecharts?
- How can I leverage statecharts to build complex, modern web applications?
- What do statecharts give me that other state management tools do not?
- How can I approach refactoring my applications to use statecharts?
- How do I test statecharts?
Who is this for?
The goal of this course is to take intermediate to advanced JavaScript developers, particularly those interested in React, and give you the knowledge and tools to start using state machines and statecharts to build more predictable applications.
I believe this course will be particularly useful to developers who are:
- Frustrated by the difficulty of maintaining complex state in your applications
- Front-end JavaScript developers looking to level-up
- Backend developers interested in front-end state management
- JavaScript developers looking to advance their careers

Meet Jon Bellah
Jon Bellah is a full-stack developer, writer, and speaker from the beautiful city of Denver, Colorado. He has been building things on the web for more than two decades, and has worked with some of the biggest brands in the world. Jon is currently a front-end engineer at TED.
Course Modules
Introduction
Getting setup
Setting up Firebase
xstate & react-automata
Core Concepts
State machines & statecharts
Hierarchical machines
Parallel machines
Transitions
Actions & guards
History states
Design to Statecharts
Collaborating with designers
Breaking down designs
Authentication
Global authentication states
User registration
User login
Data Fetching
Fetching data
Pagination
Writing Data
Writing data
Animations
Animation with statecharts
Testing
Testing statecharts
Course Package
- All 19 HD videos
- All source code
- Unlimited updates, forever
Frequently Asked Questions
- When was this course recorded?
The latest version of this course was recorded in July and August of 2018.
- How long will I get access?
There is no time limit and no recurring fee.
- Do you offer any student discounts?
Yes! If you're a student, whether at a university, high school, bootcamp, or otherwise, please send me an email with proof that you're a student and I will send you a discount code.
- What if I don't like this course?
Nothing is more important to me than you getting value out of this course. If you're unhappy with the product, please email me and I will refund you.
- Will this course be updated?
Yes! I've already begun planning several new modules. If you purchase this course now, you will receive all the new modules for the base package of the course for free when they are released. Please note, too, that the price of this course will increase as new modules are added.
- You didn't answer my question.
If you have a question that isn't covered in this FAQ, shoot me an email at hello@jonbellah.com.