Build a Shopify App with React Router Shopify Analytics Dashboard App
Build a complete Shopify Analytics Dashboard App using the Shopify React Router template in this step-by-step tutorial.
In this video, I’ll show you how to set up your Shopify app, create a new analytics route, fetch data using GraphQL, calculate sales and orders for the last 30 days, show customers count, top-selling products, and also display 7-day daily sales with a custom chart.
This tutorial covers everything from installing the app, writing the loader function, making GraphQL queries, preparing charts, setting scopes, and fixing common Shopify API permission issues—perfect for beginners and developers looking to build real Shopify apps.
What You’ll Learn
How to create a Shopify React Router App
How to build a custom analytics dashboard page
How to use GraphQL Admin API for fetching orders and customers
Fetch last 30-day sales, orders, and customers
Build a 7-day daily sales chart
Calculate top selling products
Handle app scopes, permissions & API access errors
How to deploy settings and test analytics updates
How to install your app on a client store
00:00 — What we are building (Analytics Dashboard overview)
00:34 — Starting the project with shopify app init
01:14 — Choosing React Router template & JavaScript
01:48 — Selecting organization & creating the new app
02:30 — Naming the app and installing dependencies
03:14 — Opening the project in VS Code
03:52 — Running the app with shopify app dev
04:29 — Opening GraphQL & viewing the app homepage
05:24 — Editing the homepage text
06:21 — Creating a new analytics route
07:28 — Importing React Router hooks & helpers
08:33 — Adding authenticate, App Bridge & useEffect
09:39 — Creating the date formatter helper function
10:47 — Creating the loader function
11:42 — Getting today's date, last 30 days & last 7 days
12:51 — Building Q30 and Q7 GraphQL queries
13:56 — Writing the GraphQL query for orders & counts
14:51 — Processing response JSON
15:31 — Calculating sales, orders, and totals
16:17 — Generating last 7-day daily sales buckets
17:08 — Finding top-selling products from 30-day orders
17:45 — Returning data to the frontend
18:44 — Writing frontend logic, helpers & refresh button
19:45 — Fixing “access denied” by adding scopes
20:40 — Fixing Admin API approval errors
21:46 — Completing API access request setup
22:40 — Testing analytics updates with new orders
23:29 — Installing the app on a client store
24:58 — Final dashboard preview & closing notes
#Shopify #ShopifyApp #ShopifyDevelopers #ShopifyTutorial
#ReactRouter #GraphQL #ShopifyAppDev #ShopifyAnalytics
#WebDevelopment #ecommerce #coding #javascript
Please connect with Me:
Please hire me on Upwork: https://www.upwork.com/freelancers/fa...
Please hire me on Fiverr: https://www.fiverr.com/fayyaz_raza