Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamalsoueidan/booking-shopify-embed-app
Shopify Booking Appointment renderers inside the shopify admin area. Must be installed in the store to run.
https://github.com/jamalsoueidan/booking-shopify-embed-app
express javascript nextjs nodejs react reactjs shopify shopify-app shopify-extensions typescript
Last synced: 11 days ago
JSON representation
Shopify Booking Appointment renderers inside the shopify admin area. Must be installed in the store to run.
- Host: GitHub
- URL: https://github.com/jamalsoueidan/booking-shopify-embed-app
- Owner: jamalsoueidan
- License: mit
- Created: 2022-10-09T01:44:16.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-10T14:43:22.000Z (over 1 year ago)
- Last Synced: 2023-03-10T19:29:45.859Z (over 1 year ago)
- Topics: express, javascript, nextjs, nodejs, react, reactjs, shopify, shopify-app, shopify-extensions, typescript
- Language: TypeScript
- Homepage:
- Size: 8.61 MB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
Shopify Booking Appointment Application
The staff use another application outside shopify: [Booking Shopify External App](https://github.com/jamalsoueidan/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
```shell
npm start
```
and then you must run the root project
```shell
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
```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
```javascript
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](https://easepick.com) Date picker - tiny size, no dependencies.
- [emotion](https://emotion.sh/docs/introduction) Emotion is a library designed for writing css styles with JavaScript.
- [shopify/react-form](https://www.npmjs.com/package/@shopify/react-form) Manage React forms tersely and safely-typed with no magic using React hooks.
- [react-to-webcomponent](https://www.npmjs.com/package/react-to-webcomponent) Converts React components to custom elements!
### Shopify Application (express + react)
./shopify-embed-app
Backend
- [Jest](https://jestjs.io/) Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
- [MongoDB](https://www.mongodb.com/) MongoDB is a source-available cross-platform document-oriented database program.)
- [Shopify API library](https://github.com/Shopify/shopify-node-api) adds OAuth to the Express backend. This lets users install the app and grant scope permissions.
- [Express](https://expressjs.com/) builds the backend.
- [express-validator](https://www.npmjs.com/package/express-validator) Validates express requests query, body etc.
Frontend
- [Vite](https://vitejs.dev/) builds the [React](https://reactjs.org/) frontend.
- [React Router](https://reactrouter.com/) is used for routing. We wrap this with file-based routing.
- [Date-fns](https://date-fns.org/) Date manipulation.
- [ReactQuery](https://react-query-v3.tanstack.com/overview) React Hooks for Data Fetching
- [TypeScript](https://www.typescriptlang.org) TypeScript is JavaScript with syntax for types.
- [Fullcalendar-react](https://github.com/fullcalendar/fullcalendar-react) Fullcalendar for appointments
- [App Bridge React](https://shopify.dev/apps/tools/app-bridge/getting-started/using-react) adds authentication to API requests in the frontend and renders components outside of the App’s iFrame.
- [Polaris React](https://polaris.shopify.com/) is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
- [Custom hooks](https://github.com/Shopify/shopify-frontend-template-react/tree/main/hooks) make authenticated requests to the Admin API.
- [File-based routing](https://github.com/Shopify/shopify-frontend-template-react/blob/main/Routes.jsx) makes creating new pages easier.
### Requirements
1. You must [download and install Node.js](https://nodejs.org/en/download/) if you don't already have it.
1. You must [create a Shopify partner account](https://partners.shopify.com/signup) if you don’t have one.
1. You must [create a development store](https://help.shopify.com/en/partners/dashboard/development-stores#create-a-development-store) if you don’t have one.
#### Local Development
[The Shopify CLI](https://shopify.dev/apps/tools/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.
```shell
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?
```shell
npm run deploy -- --reset
```
To push the shopify appl changes?
```shell
git push heroku main
```
or setup heroku for CLI github.
### Build
The frontend is a single page app. It requires the following keys:
```json
{
"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:
```shell
cd shopify-embed-app/frontend/ && SHOPIFY_API_KEY=REPLACE_ME npm run build
```
## License
[MIT](https://opensource.org/licenses/MIT)