Build an example app
In this tutorial series, you'll build on a Node app that you created using Shopify CLI. You'll end up with a working example app that enables merchants to create QR codes for certain products and track the number of scans for each QR code. QR codes can include certain discounts, and can link to either the online store product page or directly to checkout with the product added to the cart.
About the QR code example app
Anchor link to section titled "About the QR code example app"We've designed the QR code example app to demonstrate some of the patterns, components, and features that are common in Shopify apps. The QR code app addresses a real-world merchant need and integrates seamlessly with the Shopify admin user interface. Merchants can create, view, edit, and delete QR codes using the app.
Component libraries
Anchor link to section titled "Component libraries"The app uses the Shopify App Bridge and Polaris component libraries. App Bridge enables apps to communicate with the Shopify admin. App Bridge also renders important UI elements for your app, outside of the app iframe. Polaris components are a collection of interface elements that can be reused across the Shopify system.
Download the example app
Anchor link to section titled "Download the example app"To view all of the code used for the QR code example app, you can download the source code from GitHub. To learn about the code step-by-step, we recommend following the tutorial series.
Tutorial series
Anchor link to section titled "Tutorial series"You can follow the tutorial series to build the QR code example app.
As you work through the tutorial series, you'll create some files and add the code step-by-step. You'll create the frontend and UI first, followed by the backend functions. The last step is to connect the frontend to the backend to make it all work.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial series, you'll learn how to do the following tasks:
- Create a UI using App Bridge and Polaris.
- Build the API layer of your app.
- Integrate an SQLite database.
Requirements
Anchor link to section titled "Requirements"- Follow the Create an app tutorial to initialize a new app that uses the Node app template.
- Install a code editor on your computer, such as VSCode or Atom.
- Build the frontend of the QR code example app.