skip to Main Content

WordFlix – Single Page App tutorial: Intro

Post Series: WordFlix – Super Powered Single Page App Tutorial

This tutorial series was created specifically for my workshop at WordCamp Orange County 2017.

What we’re building

In this series, we will be building a Single Page App WordFlix which is a Super Hero Movie app.

The final product will have a Home page, a Movie List page where movies are displayed with their poster and title and can be paginated through, and a Movie Detail page where details of the movie are displayed.

Throughout the project we will look at basics of component-based single page application development, basic state management, composing components, styling components, routing and populating data via GraphQL.

Here’s an animated GIF of our final product:

Making the most out of this tutorial

To get the most out of this tutorial, it’s recommended to have the following:

Essential Pre-Requisites:

  • Local by Flywheel downloaded and installed
    •  This Local by Flywheel site instance downloaded and imported into Local by Flywheel (there is a user created already so you can login: demo/demo)
      • This will ensure that we’re all using the same environment so there are no “gotchas.” If you really know what you’re doing, you can extract the necessary files from the site instance and use your own preferred local WordPress environment, but do so at your own risk of not being in sync with the tutorial.
  • Node/NPM installed on your machine (tested with Node v7.7.2 and NPM v4.1.2)

Nice to have Pre-Requisites:

How the tutorial will work

I will be assuming you’re working off this Local by Flywheel instance which has each of the 12 steps of the project installed as a theme, starting with step 0, working through step 11.

Each tutorial post will start at the state the coinciding theme starts at.

So, you could start with the theme named “_0” and follow all the steps and you should end at the finished product, but if you do get lost at any point, you should be able to start with the next theme matching the step you’re on and work from there again.

Additionally, there is a public Github repo with a branch starting at each step of the tutorial.

Leave a Reply

Share This
Back To Top