Uzapoint Shopify Sync

Uzapoint Shopify Sync is a Shopify app designed to streamline the process of syncing products from Uzapoint to a Shopify store. With the app, merchants can effortlessly manage their product catalog, review sync history, and perform rollbacks as needed.

Key Functionalities

1. Sync Products: Automatically synchronize products from the external API to your Shopify store, ensuring that your product catalog is always up-to-date.

2. Review Sync History: View a detailed history of product syncs, including timestamps and status updates, to track changes and ensure data integrity.

3. Rollback: Easily rollback product syncs to a previous state if needed, providing flexibility and control over your product catalog.

Tech Stack

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

• Express builds the backend.
• Vite builds the React frontend.
• React Router is used for routing. We wrap this with file-based routing.
• React Query queries the Admin API.
• i18next and related libraries are used to internationalize the frontend.
  • react-i18next is used for React-specific i18n functionality.
  • i18next-resources-to-backend is used to dynamically load app translations.
  • @formatjs/intl-localematcher is used to match the user locale with supported app locales.
  • @formatjs/intl-locale is used as a polyfill for Intl.Locale if necessary.
  • @formatjs/intl-pluralrules is used as a polyfill for Intl.PluralRules if necessary.

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

• Shopify REST 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.
• @shopify/i18next-shopify is a plugin for i18next that allows translation files to follow the same JSON schema used by Shopify app extensions and themes.

Getting started

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 store for testing if you don't have one, either a development store or a Shopify Plus sandbox store.

Installation

This can be installed using your preferred package manager:

Using yarn:

yarn create @shopify/app --template=node

Using npm:

npm init @shopify/app@latest -- --template=node

Using pnpm:

pnpm create @shopify/app@latest --template=node

This will clone the repository 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.

Application Storage

To integrate Firebase to the application these steps were used

Set up Firebase Project:

1. Go to the Firebase console and create a new project.
2. Navigate to the "Project settings" and then the "Service accounts" tab.
3. Generate a new private key to obtain the credentials file.
4. In index.js server file have this code

In the code below , replace 'path/to/serviceAccountKey.json' with the path to your Firebase credentials file.

const serviceAccount = require('path/to/serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

const db = admin.firestore();

Install Firebase Admin SDK:

Install the Firebase Admin SDK in your Node.js project using npm:

npm install firebase-admin --save


### 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:

```shell
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.

Known issues

The npm run dev command may not run well in some situations due to cloudflare,so using ngrok may be a good alternative.

npm run dev -- --tunnel ngrok