Shopify App Development

Tags: Shopify

Learn Shopify App Development with React, Node.js, Koa, GraphQL, Apollo, Next.js, Polaris, Shopify ScriptTag API

Last updated 2022-01-10 | 3.8

- Developing principles for using React and Node for Shopify Apps
- Shopify App Development using React
- Node
- GraphQL
- Developing principles for using Node for Shopify Apps

What you'll learn

Developing principles for using React and Node for Shopify Apps
Shopify App Development using React
Node
GraphQL
Developing principles for using Node for Shopify Apps

* Requirements

* Knowledge of JavaScript or another programming language
* Interest in learning about the Shopify Platform

Description

This is the first course of it's kind on the internet! Learn how to make professional applications for the Shopify Platform using React, Node, Koa, GraphQL, Apollo, and the Shopify ScriptTag API.


In this course we will using data from the Shopify Admin and injecting it into the Storefront using the Shopify ScriptTag API.


This course is made as an extension to the Shopify React + Node tutorial available in the Shopify documentation. We will be diving deeper into the documentation where I will be explaining the concepts in more detail and additionally showing how to use the Shopify ScriptTag API to create a concept application that is able to inject custom code into the front-end of a store.



Average annual earnings for the top 25% of Shopify app developers is $272,000 (source: Shopify developers website)


Who this course is for:

  • JavaScript, React, or Node JS Developers
  • Beginner Developers looking to learn about Shopify App Development
  • People curious how Shopify Apps are made

Course content

11 sections • 32 lectures

Building App Scaffold using Next.js and React Preview 07:16

For the first half of the course, we will be following the official Shopify Documentation tutorial on setting up a React and Node Application. After which we will take things into our own hands and modify the server and add awesome functionality to our app!

Adding scripts to run Application Preview 02:28

Embedding app using Ngrok and OAuth Preview 09:29

Restarting Ngrok & localhost Preview 03:04

Shopify Updates Preview 00:13

Install required NPM packages Preview 01:51

Setting up Node.js (Koa) Server Preview 06:45

Authenticating and Testing App Preview 03:20

Shopify Updates Preview 00:13

Shopify Polaris Overview Preview 04:45

Install Polaris Preview 00:28

Setting up an EmptyState with React and Polaris Preview 07:50

Don't forget to do npm install @shopify/polaris

Products Button Setup Preview 13:33

Importing Koa Shopify GraphQL Proxy Preview 02:47

Overview of the Shopify GraphiQL App Preview 11:52

Save Product ID's Preview 04:01

Creating Query using GraphiQL Preview 05:29

Quick Apollo Overview and Installation Preview 02:21

Building out the ProductList Preview 08:30

Polaris for ProductList Preview 06:55

Introduction to Script Tags (Updated) Preview 21:14

Creating, Displaying, and Deleting Script Tags Preview 19:27

Adding Polaris to Script Page Preview 15:00

Displaying data from Server to front-end of store Preview 14:50

Creating POST endpoint Preview 10:52

Adding a POST endpoint to our API

Sending data from Shopify Admin to API endpoint Preview 09:01

Fetching data from Shopify Admin Preview 06:43

Overview of the Application Preview 07:11

Displaying Products on Storefront using jQuery Preview 21:14

Next steps in your Shopify Journey Preview 07:25