Intro to Shopify App Development with React, Node & GraphQL

4h 10s
English
Paid

Course 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.

Read more about the course

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.

Requirements:

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

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

What you'll learn:

  • Developing principles for using React for Shopify Apps
  • Shopify App Development using React, Node, GraphQL
  • Developing principles for using Node for Shopify Apps

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 32 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Intro to Shopify App Development with React, Node & GraphQL

0:00
/
#1: What we'll be building

All Course Lessons (32)

#Lesson TitleDurationAccess
1
What we'll be building Demo
02:18
2
Introduction
06:51
3
Building App Scaffold using Next.js and React
07:17
4
Adding scripts to run Application
02:29
5
Embedding app using Ngrok and OAuth
09:30
6
Restarting Ngrok & localhost
03:05
7
Install required NPM packages
01:52
8
Setting up Node.js (Koa) Server
06:46
9
Authenticating and Testing App
03:21
10
Shopify Polaris Overview
04:46
11
Install Polaris
00:29
12
Setting up an EmptyState with React and Polaris
07:38
13
Products Button Setup
13:34
14
Importing Koa Shopify GraphQL Proxy
02:48
15
Overview of the Shopify GraphiQL App
11:53
16
Save Product ID's
04:02
17
Creating Query using GraphiQL
05:30
18
Quick Apollo Overview and Installation
02:07
19
Building out the ProductList
08:31
20
Polaris for ProductList
06:56
21
Introduction to Script Tags
16:26
22
Creating, Displaying, and Deleting Script Tags
18:20
23
Creating Fixed
01:16
24
Adding Polaris to Script Page
14:20
25
Create Function Fixed 2
00:42
26
Displaying data from Server to front-end of store
14:51
27
Creating POST endpoint
10:53
28
Sending data from Shopify Admin to API endpoint
09:02
29
Fetching data from Shopify Admin
06:44
30
Overview of the Application
07:12
31
Displaying Products on Storefront using jQuery
21:15
32
Next steps in your Shopify Journey
07:26

Unlock unlimited learning

Get instant access to all 31 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Stripe Payments JavaScript Course

Stripe Payments JavaScript Course

Sources: fireship.io
The Stripe Payments JavaScript Course is a project-based guide to building fullstack payment solutions on the web with Node.js and React. The goal is to provide a solid foundati...
1 hour 29 minutes 26 seconds
Build a Slack Chat App with React, Redux, and Firebase

Build a Slack Chat App with React, Redux, and Firebase

Sources: udemy
Throughout this course, we'll be building a live chat app for developers called DevChat, where users will be able to create channels, to send messages to other users on those ch...
5 hours 55 minutes 18 seconds
Working with React and Go (Golang)

Working with React and Go (Golang)

Sources: udemy
React and Go are something of a match made in heaven. React is the world's most popular JavaScript library for building Single Page Applications, and Go is uniquely well-suited ...
24 hours 48 minutes 43 seconds
Redux

Redux

Sources: ui.dev (ex. Tyler McGinnis)
There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by buildin...
7 hours 13 minutes 23 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platform

Sources: udemy
Master the Art of Building Real World SEO Web Applications using MERN (Mongo Express React Node) Stack. Become a true Web Developer with this Ultimate Project b
20 hours 25 minutes 13 seconds