/book-appointment-app

book-appointment-app

Primary LanguageTypeScriptMIT LicenseMIT

Book Appointment Shopify Application

Getting started

The structur of this project is follows:

  • web/ include the express application and the frontend
  • web/frontend the shopify react appllication
  • web/libs all the api routes is in the libs folder.
  • web/database mongoose related stuff (mongodb)
  • extensions the widget that is rendered in the shopify liquid store

Application screens

alt text

alt text

alt text

Widget screen

alt text

alt text

Tech Stack

This extensions combines a number of third party open-source tools:

  • easepick Date picker - tiny size, no dependencies

This template combines a number of third party open-source tools:

  • 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.)
  • Express builds the backend.
  • Vite builds the React frontend.
  • React Router is used for routing. We wrap this with file-based routing.
  • Date-fns Date manipulation.
  • useSWR React Hooks for Data Fetching
  • TypeScript TypeScript is JavaScript with syntax for types.
  • Fullcalendar-react Fullcalendar for appointments

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

  • Shopify API library adds OAuth to the Express backend. This lets users install the app and grant scope permissions.
  • 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

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

Installing the template

This template can be installed using your preferred package manager:

Using yarn:

yarn create @shopify/app

Using npx:

npm init @shopify/app@latest

Using pnpm:

pnpm create @shopify/app@latest

This will clone the template and install the required dependencies.

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.

Using yarn:

yarn dev

Using npm:

npm run dev

Using pnpm:

pnpm run dev

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

Deployment

Build

The frontend is a single page app. It requires the SHOPIFY_API_KEY, which you can find on the page for your app in your partners dashboard. Paste your app’s key in the command for the package manager of your choice:

Using yarn:

cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME yarn build

Using npm:

cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME npm run build

Using pnpm:

cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME pnpm run build

You do not need to build the backend.

Hosting

When you're ready to set up your app in production, you can follow our deployment documentation to host your app on a cloud provider like Heroku or Fly.io.

When you reach the step for setting up environment variables, you also need to set the variable NODE_ENV=production.

Some things to watch out for

Using express.json middleware

If you use the express.json() middleware in your app and if you use Shopify.Webhooks.Registry.process() to process webhooks API calls from Shopify (which we recommend), the webhook processing must occur before calling app.use(express.json()). See the API documentation for more details.

Developer resources