App Development Tutorials

Build a Shopify App from scratch!

Last updated by Red Cap Tom on June 24, 2020 at 12:31 +0300

What is this?

This is no longer maintained

This tutorial series was cowardly abandoned by its creator mid-way due to (exciting!) circumstances. While I can't promise I'll ever finish it, I hope you found some of it useful. If you really-really-really-really want me to finish it, nag me at hey@redcaptom.com.

I am in the process of creating a video series (accompanied by a blog post series) on how to create a modern, JavaScript-only Shopify App from scratch - even if you're not up to speed on all the different JS frameworks out there. Shopify really went out of their way to make developing an App as easy as possible, but there are some kinks in the road if you're not deeply versed in the JS ecosystem, and know all the schticks.

I should preface by saying that you should have some programming knowledge before attempting to go through the series. Specifically, if you have never written a line of HTML or CSS, you'd have trouble keeping up. But if you know how a website is constructed, and have done a bit of JS in the past (or have gone through the tutorials I recommend along the way), you should be fine - I attempt to break the “complicated” bits into smaller, digestible chunks and

One comment on my format: You'll note that the series is filled with what I call Sidesteps. These are mini-tangents where I go down some path to explain something that is not obvious to non-JS developers - mainly some of the frameworks involved or some difficult to grasp programming concept. While you don't have to watch them if you don't want to, I think they provide extra value even for more experienced developers.

Dig in!

Alright, you have been warned. Here goes nothing:

The Playlist (videos)

If you want to get a quick overview of the whole thing, take a peek here.

One by one (blog posts)

Otherwise, below and in the navigation menu you will find all the currently available videos in blog post form:

1. [*Part 01 - What? Why? Where?*](./part-01-introduction) 2. [*Part 02 - Idea Generation*](./part-02-idea-generation) 3. [*Part 03 - Tools*](./part-03-tools) 4. [*Part 04 - Tech Stack*](./part-04-tech-stack) 5. [*Part 05 - Mock It Up!*](./part-05-mockup-1) 6. [*Part 06 - Mock It Up! #2*](./part-05-mockup-2) 7. [*Part 07 - React Sidestep #1 - Intro*](./part-08-react-sidestep-1) 8. [*Part 08 - React Sidestep #2 - Functional Components*](./part-08-react-sidestep-2) 9. [*Part 09 - React Sidestep #3 - Class Components*](./part-09-react-sidestep-3)

  1. Part 10 - Shopify Polaris