Shopify Booking Appointment Application

The staff use another application outside shopify: Booking Shopify External App

What is this and who is it for 🤷‍♀️

Frontend consulting is what I do! Angular and React, and this is a showcase product I made in my spare time. It is an excellent example of a modern, real-world React codebase and it integrate with the Shopify Admin, uses Shopify Polaris UI Framework, and extensions that are built into the Shopify theme.

There are numerous showcase/example React projects available, but the majority of them are far too simple. I like to think that this codebase is complex enough to provide valuable insights to React developers of all skill levels while remaining relatively simple to understand.

Features

A proven, scalable, and simple project structure
Only functional components with hooks, written in modern React.
A variety of custom light-weight UI components, such as a calendar, modal, and various form elements, among others.
Simple local React state management without the use of redux, mobx, or anything else.

Getting started

The project includes Shopify Extension and the Shopify Application.

You must run the ./shopify-extension-app application when testing the extension, it will build the react application and move the files automatically to the ./extension/book-appointment-ext, for the extension to work, you also must run the root project.

Run shopify-extension-app

npm start

and then you must run the root project

npm run dev

For the extension to be able to request the apis in your shopify storefront, you must update the api url in the: ./extensions/book-appointment-ext/product.liquid

{%- assign api = 'https://5fba75380ffd.eu.ngrok.io' -%}

This is because the ngrok create new url everytime it boots up the shopify application.

If you want to test the extension in the shopify-extension-app you must update the api url in the: ./shopify-extension-app/public/index.html

Shopify.api = "https://5284fdeca23c.eu.ngrok.io";

The structur of this project is follows:

Shopify Application ./shopify-embed-app

Shopify Extension (react) ./shopify-extension-app

Application screens

Widget screen

Tech Stack

The following Shopify tools complement these third-party tools to ease app development:

Shopify Extension (react)

./shopify-extension-app

easepick Date picker - tiny size, no dependencies.
emotion Emotion is a library designed for writing css styles with JavaScript.
shopify/react-form Manage React forms tersely and safely-typed with no magic using React hooks.
react-to-webcomponent Converts React components to custom elements!

Shopify Application (express + react)

./shopify-embed-app

Backend

Jest Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
MongoDB MongoDB is a source-available cross-platform document-oriented database program.)
Shopify API library adds OAuth to the Express backend. This lets users install the app and grant scope permissions.
Express builds the backend.
express-validator Validates express requests query, body etc.

Frontend

Vite builds the React frontend.
React Router is used for routing. We wrap this with file-based routing.
Date-fns Date manipulation.
ReactQuery React Hooks for Data Fetching
TypeScript TypeScript is JavaScript with syntax for types.
Fullcalendar-react Fullcalendar for appointments
App Bridge React adds authentication to API requests in the frontend and renders components outside of the App’s iFrame.
Polaris React is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
Custom hooks make authenticated requests to the Admin API.
File-based routing makes creating new pages easier.

Requirements

You must download and install Node.js if you don't already have it.
You must create a Shopify partner account if you don’t have one.
You must create a development store if you don’t have one.

Local Development

The Shopify CLI connects to an app in your Partners dashboard. It provides environment variables, runs commands in parallel, and updates application URLs for easier development.

You can develop locally using your preferred package manager. Run one of the following commands from the root of your app.

npm run dev

Open the URL generated in your console. Once you grant permission to the app, you can start development.

Deployment

To push the update extension changes?

npm run deploy -- --reset

To push the shopify appl changes?

git push heroku main

or setup heroku for CLI github.

Build

The frontend is a single page app. It requires the following keys:

{
  "HOST": "https://book-appointment-shopify-app.herokuapp.com",
  "MONGODB_URI": "mongodb+srv://book-appointment-app",
  "NODE_OPTIONS": "--max_old_space_size=2560",
  "SCOPES": "unauthenticated_read_product_listings,read_products,read_orders,read_customers",
  "SHOPIFY_API_KEY": "XXX",
  "SHOPIFY_API_SECRET": "XXX",
  "SMSDK_SECRET": "XXX",
  "TZ": "UTC",
}

To build the frontend app:

cd shopify-embed-app/frontend/ && SHOPIFY_API_KEY=REPLACE_ME npm run build

License

MIT

abdullaharik/booking-shopify-embed-app