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

Full Stack Spring Boot & React

Full Stack Spring Boot & React

Sources: Amigoscode (Nelson Djalo)
Netflix recently switched their entire backend to Spring Boot 2. It was a no brainer really. Spring Boot 2 is the best framework to build applications. Weather you build a small...
10 hours 1 minute 23 seconds
React Redux Ecommerce - Master MERN Stack Web Development

React Redux Ecommerce - Master MERN Stack Web Development

Sources: udemy
Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB. This project will have almost all the features you wa...
43 hours 9 minutes 35 seconds
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2

Sources: Kent C. Dodds
Ready for the React 19 revolution? The most in-demand JavaScript framework has received a major update! You are already familiar with React, but in React 19 the
26 hours 51 minutes 3 seconds
React Front To Back 2022

React Front To Back 2022

Sources: udemy, Brad Traversy
This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills. The first project (Feedback App) is st...
19 hours 57 minutes 45 seconds
React Chrome Extension boilerplate | Shipped

React Chrome Extension boilerplate | Shipped

Sources: Luca Restagno (shipped.club)
Launch your Chrome Extension in hours, not weeks. The boilerplate for busy makers, to launch your React Chrome Extensions fast. ou don't need to reinvent the wheel and code ever...