Problem: Consumers have the power to support ethical companies, but do not have the time to research every company they buy from.
Purpose: This project is a composite scoring system for products and brands found on Ethic Marketplace that will allow consumers to more easily vet the products that they purchase. Our scoring system, in conjunction with Ethic Marketplace, will allow users to easily see how products stack up in regard to the things they care about.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
- Clone the repo to get started.
- Run
npm installto install all the package dependencies - Next, install Ngrok on your machine by running
npm install ngrok -g
Ngrok is a cloud service that accepts traffic on a public address and relays that traffic through to the ngrok process running on your machine and then on to the local address specified.
This is required to allow Shopify to embedd our app
To start up the backend alone, simply run the express server
npm run express
If you're only planning to make changes to the backend, then that's it! Happy developing.
However, if you're planning to work on the Embedded App, Issue the following command to start up both the Backend and React Server
npm run dev
On another new terminal, create a tunnel on port 3000 with ngrok
ngrok http 3000
Next, log on to the Shopify Partners with Ethic Marketplace's Collaborator account.
- From your partner Dashboard, click Apps
- Choose Ethic Score
- From the top, click on App Setup
- Copy the HTTPS version of the forwarding URL from your ngrok terminal tab.
- Go to the URL section of the page and paste the HTTPS version of your ngrok forwarding URL into the App URL field.
- Paste the same HTTPS forwarding URL into the Whitelisted redirection URL(s) field and add /auth/callback to the end of the path.
- Save changes
- Visit the app on the test development store and if you followed the steps, the embedded app should be up and running.
We didn't realize this until after setting up for production. For production, the forwarding URL should be the deployed app URL. So as of now, if the forwarding URL is changed for local development purposes, then the live version of the embedded app won't be available to be used.
It might be beneficial to create an entirely new app on the Shopify Partner's dashboard and use those app keys for development
Example using Google Cloud App Engine
- Create one App Engine for Embedded App and one for API
- Set up Google Cloud to run in this directory
gcloud init
- Change start script in package.json
- First deploy API server
"start": "node index.js"
- Then run:
gcloud app deploy
- Second deploy Embedded App
"start": "next build && npm run client"
- Then run:
gcloud app deploy
Metafields consists of a namespace, key, value and an optional description. Namespaces helps us group different metafields together. Can be helpful later in the future if we need to store different types of metafields.
- key: choose 1 of the following: ["co_im", "eco_f," "all_n", "an_ri", "labor"]
- valueType: "string"
- value: A JSON stringified string of all the metrics
- namespace: "ethic-metrics"
- key: choose 1 of the following: ["co_im", "eco_f," "all_n", "an_ri", "labor"]
- valueType: "integer"
- value: an integer ranging from 1-10
- namespace: "userprefs"
- co_im: Community Impact
- eco_f: Eco-Friendly
- all_n: All Natural/Non-toxic
- an_ri: Animal Rights
- labor: Labor Rights
A description of all metrics and their range of values can be found here
The current weight of each metric used for calculation can be found here
- React.js - Frontend library
- Next.js - React Framework
- Liquid - Templating Language used on Shopify Stores
- Polaris - Shopify Component Library for styling
- 3/10/2020 - Project Requirement Document
- 6/1/2020 - UCI Dev Notes
- 6/4/2020 - UCI Project Demo
- Ivan Huang - younghuangbao
- Nathan Cho - lopkik
- Preston Tai - prestontai
- Brandon Tom - brandontom96