{"id":18633590,"url":"https://github.com/jamalsoueidan/booking-shopify-embed-app","last_synced_at":"2025-04-11T07:32:13.921Z","repository":{"id":64990745,"uuid":"548139750","full_name":"jamalsoueidan/booking-shopify-embed-app","owner":"jamalsoueidan","description":"Shopify Booking Appointment renderers inside the shopify admin area. Must be installed in the store to run.","archived":true,"fork":false,"pushed_at":"2023-03-11T12:23:54.000Z","size":9032,"stargazers_count":14,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T05:35:13.320Z","etag":null,"topics":["express","javascript","nextjs","nodejs","react","reactjs","shopify","shopify-app","shopify-extensions","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamalsoueidan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2022-10-09T01:44:16.000Z","updated_at":"2024-10-30T15:39:07.000Z","dependencies_parsed_at":"2023-02-18T17:00:48.667Z","dependency_job_id":null,"html_url":"https://github.com/jamalsoueidan/booking-shopify-embed-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamalsoueidan%2Fbooking-shopify-embed-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamalsoueidan%2Fbooking-shopify-embed-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamalsoueidan%2Fbooking-shopify-embed-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamalsoueidan%2Fbooking-shopify-embed-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamalsoueidan","download_url":"https://codeload.github.com/jamalsoueidan/booking-shopify-embed-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358855,"owners_count":21090445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","javascript","nextjs","nodejs","react","reactjs","shopify","shopify-app","shopify-extensions","typescript"],"created_at":"2024-11-07T05:15:39.080Z","updated_at":"2025-04-11T07:32:13.311Z","avatar_url":"https://github.com/jamalsoueidan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eShopify Booking Appointment Application\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/jamalsoueidan/book-appointment-app/blob/main/screens/staff-view-schedule.png?raw=true\" width=\"600\"/\u003e\n\u003c/p\u003e\n\nThe staff use another application outside shopify: [Booking Shopify External App](https://github.com/jamalsoueidan/booking-shopify-external-app)\n\n## What is this and who is it for 🤷‍♀️\n\nFrontend 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.\n\nThere 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.\n\n## Features\n\n- A proven, scalable, and simple project structure\n- Only functional components with hooks, written in modern React.\n- A variety of custom light-weight UI components, such as a calendar, modal, and various form elements, among others.\n- Simple local React state management without the use of redux, mobx, or anything else.\n\n## Getting started\n\nThe project includes Shopify Extension and the Shopify Application.\n\nYou 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.\n\nRun shopify-extension-app\n\n```shell\nnpm start\n```\n\nand then you must run the root project\n\n```shell\nnpm run dev\n```\n\nFor the extension to be able to request the apis in your shopify storefront, you must update the api url in the:\n./extensions/book-appointment-ext/product.liquid\n\n```liquid\n{%- assign api = 'https://5fba75380ffd.eu.ngrok.io' -%}\n```\n\nThis is because the ngrok create new url everytime it boots up the shopify application.\n\nIf you want to test the extension in the shopify-extension-app you must update the api url in the:\n./shopify-extension-app/public/index.html\n\n```javascript\nShopify.api = \"https://5284fdeca23c.eu.ngrok.io\";\n```\n\nThe structur of this project is follows:\n\nShopify Application\n./shopify-embed-app\n\nShopify Extension (react)\n./shopify-extension-app\n\n## Application screens\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/jamalsoueidan/book-appointment-app/blob/main/screens/bookings.png?raw=true\" width=\"300\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/jamalsoueidan/book-appointment-app/blob/main/screens/product-view.png?raw=true\" width=\"300\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg  src=\"https://github.com/jamalsoueidan/book-appointment-app/blob/main/screens/settings.png?raw=true\"  width=\"300\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg  src=\"https://github.com/jamalsoueidan/book-appointment-app/blob/main/screens/staff-list.png?raw=true\"  width=\"300\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg  src=\"https://github.com/jamalsoueidan/book-appointment-app/blob/main/screens/staff-view.png?raw=true\"  width=\"300\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Widget screen\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/jamalsoueidan/book-appointment-app/blob/main/screens/extension1.png?raw=true\" width=\"300\"/\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://github.com/jamalsoueidan/book-appointment-app/blob/main/screens/extension2.png?raw=true\" width=\"300\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Tech Stack\n\nThe following Shopify tools complement these third-party tools to ease app development:\n\n### Shopify Extension (react)\n\n./shopify-extension-app\n\n- [easepick](https://easepick.com) Date picker - tiny size, no dependencies.\n- [emotion](https://emotion.sh/docs/introduction) Emotion is a library designed for writing css styles with JavaScript.\n- [shopify/react-form](https://www.npmjs.com/package/@shopify/react-form) Manage React forms tersely and safely-typed with no magic using React hooks.\n- [react-to-webcomponent](https://www.npmjs.com/package/react-to-webcomponent) Converts React components to custom elements!\n\n### Shopify Application (express + react)\n\n./shopify-embed-app\n\nBackend\n\n- [Jest](https://jestjs.io/) Jest is a delightful JavaScript Testing Framework with a focus on simplicity.\n- [MongoDB](https://www.mongodb.com/) MongoDB is a source-available cross-platform document-oriented database program.)\n- [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.\n- [Express](https://expressjs.com/) builds the backend.\n- [express-validator](https://www.npmjs.com/package/express-validator) Validates express requests query, body etc.\n\nFrontend\n\n- [Vite](https://vitejs.dev/) builds the [React](https://reactjs.org/) frontend.\n- [React Router](https://reactrouter.com/) is used for routing. We wrap this with file-based routing.\n- [Date-fns](https://date-fns.org/) Date manipulation.\n- [ReactQuery](https://react-query-v3.tanstack.com/overview) React Hooks for Data Fetching\n- [TypeScript](https://www.typescriptlang.org) TypeScript is JavaScript with syntax for types.\n- [Fullcalendar-react](https://github.com/fullcalendar/fullcalendar-react) Fullcalendar for appointments\n- [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.\n- [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.\n- [Custom hooks](https://github.com/Shopify/shopify-frontend-template-react/tree/main/hooks) make authenticated requests to the Admin API.\n- [File-based routing](https://github.com/Shopify/shopify-frontend-template-react/blob/main/Routes.jsx) makes creating new pages easier.\n\n### Requirements\n\n1. You must [download and install Node.js](https://nodejs.org/en/download/) if you don't already have it.\n1. You must [create a Shopify partner account](https://partners.shopify.com/signup) if you don’t have one.\n1. 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.\n\n#### Local Development\n\n[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.\n\nYou can develop locally using your preferred package manager. Run one of the following commands from the root of your app.\n\n```shell\nnpm run dev\n```\n\nOpen the URL generated in your console. Once you grant permission to the app, you can start development.\n\n## Deployment\n\nTo push the update extension changes?\n\n```shell\nnpm run deploy -- --reset\n```\n\nTo push the shopify appl changes?\n\n```shell\ngit push heroku main\n```\n\nor setup heroku for CLI github.\n\n### Build\n\nThe frontend is a single page app. It requires the following keys:\n\n```json\n{\n  \"HOST\": \"https://book-appointment-shopify-app.herokuapp.com\",\n  \"MONGODB_URI\": \"mongodb+srv://book-appointment-app\",\n  \"NODE_OPTIONS\": \"--max_old_space_size=2560\",\n  \"SCOPES\": \"unauthenticated_read_product_listings,read_products,read_orders,read_customers\",\n  \"SHOPIFY_API_KEY\": \"XXX\",\n  \"SHOPIFY_API_SECRET\": \"XXX\",\n  \"SMSDK_SECRET\": \"XXX\",\n  \"TZ\": \"UTC\",\n}\n```\nTo build the frontend app:\n\n\n```shell\ncd shopify-embed-app/frontend/ \u0026\u0026 SHOPIFY_API_KEY=REPLACE_ME npm run build\n```\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamalsoueidan%2Fbooking-shopify-embed-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamalsoueidan%2Fbooking-shopify-embed-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamalsoueidan%2Fbooking-shopify-embed-app/lists"}